feat: tab close ui
This commit is contained in:
parent
78cda4d07a
commit
8a5b7930e4
|
@ -162,7 +162,15 @@ const Traits = (props) => {
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{tabs.map(([type]) => <Tab key={type}>{type}</Tab>)}
|
{tabs.map(([type]) => (
|
||||||
|
<Tab key={type}>
|
||||||
|
<span className="wrapper">
|
||||||
|
<span className="icon" />
|
||||||
|
{type}
|
||||||
|
<span className="close">✕</span>
|
||||||
|
</span>
|
||||||
|
</Tab>
|
||||||
|
))}
|
||||||
</TabList>
|
</TabList>
|
||||||
{tabs.map(([type, content]) => (
|
{tabs.map(([type, content]) => (
|
||||||
<TabPanel
|
<TabPanel
|
||||||
|
|
|
@ -27,13 +27,31 @@
|
||||||
color: #aaaaaa;
|
color: #aaaaaa;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 1em 3em;
|
|
||||||
&:not(:last-of-type) {
|
&:not(:last-of-type) {
|
||||||
border-right: 1px solid #282828;
|
border-right: 1px solid #282828;
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
color: #ddd;
|
color: #ddd;
|
||||||
}
|
}
|
||||||
|
.wrapper {
|
||||||
|
align-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
height: 3em;
|
||||||
|
width: 10em;
|
||||||
|
}
|
||||||
|
.close {
|
||||||
|
color: #999999;
|
||||||
|
padding: 0.25em;
|
||||||
|
visibility: hidden;
|
||||||
|
&:hover {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover .close {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.react-tabs__tab--selected[class] {
|
.react-tabs__tab--selected[class] {
|
||||||
|
|
Loading…
Reference in New Issue
Block a user