Skip to content

Commit

Permalink
feat: 优化Tag组合模式样式
Browse files Browse the repository at this point in the history
  • Loading branch information
@NeverEllipsis
NeverEllipsis committed Aug 22, 2024
1 parent bc7d625 commit 14b35b7
Show file tree
Hide file tree
Showing 4 changed files with 318 additions and 4 deletions.
4 changes: 2 additions & 2 deletions packages/bui-core/src/Tag/Tag.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,8 @@
}

&.bui-tag-vip {
color: var(--bui-color-vip);
border: 1px solid fade(#ff866e, 40%);
color: var(--bui-color-red);
border: 1px solid var(--bui-color-border-primary);
}
}

Expand Down
37 changes: 35 additions & 2 deletions packages/bui-core/src/Tag/TagGroup.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,46 @@
display: inline-flex;
font-family: var(--bui-font-family);

.bui-tag {
margin: 0 0 0 -1px;
.bui-tag-outlined {
background-color: var(--bui-color-white);
}

.bui-tag-outlined + .bui-tag-contained {
margin-left: -1px;
}

.bui-tag-outlined:not(:last-child) {
position: relative;
border-right-style: dotted;

&::after {
top: 0;
}

&::before {
bottom: 0;
}

&::after,
&::before {
content: '';
position: absolute;
right: -1px;
width: 1px;
height: 13%;
color: #fff;
background-color: #fff;
border-right-style: solid;
}
}

.bui-tag:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;

&:not(.bui-tag-outlined) {
border-right: 0;
}
}

.bui-tag:not(:first-child) {
Expand Down
186 changes: 186 additions & 0 deletions packages/bui-core/src/Tag/__tests__/__snapshots__/Tag.snapshot.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -322,5 +322,191 @@ exports[`Tag snapshot Tag demo snapshot 0 4`] = `
info
</div>
</div>
<div
className="bui-tag-group"
>
<div
className="bui-tag bui-tag-contained bui-tag-primary"
style={Object {}}
>
primary
</div>
<div
className="bui-tag bui-tag-outlined bui-tag-info"
style={Object {}}
>
info
</div>
<div
className="bui-tag bui-tag-outlined bui-tag-info"
style={Object {}}
>
info
</div>
</div>
<div
className="bui-tag-group"
>
<div
className="bui-tag bui-tag-outlined bui-tag-primary"
style={Object {}}
>
primary
</div>
<div
className="bui-tag bui-tag-contained bui-tag-info"
style={Object {}}
>
info
</div>
<div
className="bui-tag bui-tag-outlined bui-tag-info"
style={Object {}}
>
info
</div>
</div>
<div
className="bui-tag-group"
>
<div
className="bui-tag bui-tag-outlined bui-tag-primary"
style={Object {}}
>
primary
</div>
<div
className="bui-tag bui-tag-outlined bui-tag-info"
style={Object {}}
>
info
</div>
<div
className="bui-tag bui-tag-contained bui-tag-info"
style={Object {}}
>
info
</div>
</div>
<div
className="bui-tag-group"
>
<div
className="bui-tag bui-tag-outlined bui-tag-primary"
style={Object {}}
>
primary
</div>
<div
className="bui-tag bui-tag-outlined bui-tag-info"
style={Object {}}
>
info
</div>
<div
className="bui-tag bui-tag-outlined bui-tag-info"
style={Object {}}
>
info
</div>
</div>
<div
className="bui-tag-group"
>
<div
className="bui-tag bui-tag-contained bui-tag-primary"
style={Object {}}
>
primary
</div>
<div
className="bui-tag bui-tag-outlined bui-tag-info"
style={Object {}}
>
info
</div>
<div
className="bui-tag bui-tag-contained bui-tag-info"
style={Object {}}
>
info
</div>
</div>
<div
className="bui-tag-group"
>
<div
className="bui-tag bui-tag-contained bui-tag-primary"
style={Object {}}
>
primary
</div>
<div
className="bui-tag bui-tag-contained bui-tag-info"
style={Object {}}
>
info
</div>
<div
className="bui-tag bui-tag-contained bui-tag-info"
style={Object {}}
>
info
</div>
</div>
<div
className="bui-tag-group"
>
<div
className="bui-tag bui-tag-contained bui-tag-primary"
style={Object {}}
>
primary
</div>
<div
className="bui-tag bui-tag-contained bui-tag-info"
style={Object {}}
>
info
</div>
<div
className="bui-tag bui-tag-outlined bui-tag-info"
style={Object {}}
>
info
</div>
</div>
<div
className="bui-tag-group"
>
<div
className="bui-tag bui-tag-outlined bui-tag-primary"
style={Object {}}
>
primary
</div>
<div
className="bui-tag bui-tag-contained bui-tag-info"
style={Object {}}
>
info
</div>
<div
className="bui-tag bui-tag-contained bui-tag-info"
style={Object {}}
>
info
</div>
</div>
<div
className="bui-tag-group"
>
<div
className="bui-tag bui-tag-outlined bui-tag-warning"
style={Object {}}
>
warning
</div>
</div>
</div>
`;
95 changes: 95 additions & 0 deletions packages/bui-core/src/Tag/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,6 +175,101 @@ export default () => {
info
</Tag>
</TagGroup>
<TagGroup>
<Tag variant="contained" color="primary">
primary
</Tag>
<Tag variant="outlined" color="info">
info
</Tag>
<Tag variant="outlined" color="info">
info
</Tag>
</TagGroup>

<TagGroup>
<Tag variant="outlined" color="primary">
primary
</Tag>
<Tag variant="contained" color="info">
info
</Tag>
<Tag variant="outlined" color="info">
info
</Tag>
</TagGroup>

<TagGroup>
<Tag variant="outlined" color="primary">
primary
</Tag>
<Tag variant="outlined" color="info">
info
</Tag>
<Tag variant="contained" color="info">
info
</Tag>
</TagGroup>
<TagGroup>
<Tag variant="outlined" color="primary">
primary
</Tag>
<Tag variant="outlined" color="info">
info
</Tag>
<Tag variant="outlined" color="info">
info
</Tag>
</TagGroup>
<TagGroup>
<Tag variant="contained" color="primary">
primary
</Tag>
<Tag variant="outlined" color="info">
info
</Tag>
<Tag variant="contained" color="info">
info
</Tag>
</TagGroup>
<TagGroup>
<Tag variant="contained" color="primary">
primary
</Tag>
<Tag variant="contained" color="info">
info
</Tag>
<Tag variant="contained" color="info">
info
</Tag>
</TagGroup>
<TagGroup>
<Tag variant="contained" color="primary">
primary
</Tag>
<Tag variant="contained" color="info">
info
</Tag>
<Tag variant="outlined" color="info">
info
</Tag>
</TagGroup>
<TagGroup>
<Tag variant="outlined" color="primary">
primary
</Tag>
<Tag variant="contained" color="info">
info
</Tag>
<Tag variant="contained" color="info">
info
</Tag>
</TagGroup>
<TagGroup>
<Tag variant="outlined" color="warning">
warning
</Tag>
</TagGroup>
</Stack>
);
};
Expand Down

0 comments on commit 14b35b7

Please sign in to comment.