Patients
- Jill Tracy
- Patricia Wilk
- Herbert
- Ben Sullivan
<div data-jd-tabs>
<ul role="tablist">
<button role="tab" aria-selected="true" aria-controls="tab-patients" id="tab-label-patients">
Patients
</button>
<button role="tab" aria-selected="false" aria-controls="tab-doctors" data-deletable id="tab-label-doctors" tabindex="-1">
Doctors
</button>
<button role="tab" aria-selected="false" aria-controls="tab-janitors" id="tab-label-janitors" tabindex="-1" data-deletable="">
Janitors
</button>
</ul>
<div tabindex="0" role="tabpanel" class="content" id="tab-patients" aria-labelledby="tab-label-patients">
<h3>Patients</h3>
<ul>
<li>Jill Tracy</li>
<li>Patricia Wilk</li>
<li>Herbert</li>
<li>Ben Sullivan</li>
</ul>
</div>
<div tabindex="0" role="tabpanel" class="content" id="tab-doctors" aria-labelledby="tab-label-doctors" hidden>
<h3>Doctors</h3>
<ul>
<li>John Dorian</li>
<li>Christopher Turk</li>
<li>Perry Cox</li>
<li>Kim Briggs</li>
</ul>
</div>
<div tabindex="0" role="tabpanel" class="content" id="tab-janitors" aria-labelledby="tab-label-janitors" hidden>
<h3>Janitors</h3>
<ul>
<li>Glen Matthews</li>
</ul>
</div>
</div>
This means you simply have to use the data-jd-tabs
attibute — along with some basic accessibility attributes — to create some basic tabs!
As this is a fairly complicated component, there is wuite a bit of CSS, but most of it is up to you
[role="tablist"] {
margin: 0 0 -.1em;
overflow: visible;
}
[role="tab"] {
position: relative;
margin: 0;
padding: .3em .5em .4em;
border: 1px solid hsl(219, 1%, 72%);
border-radius: .2em .2em 0 0;
box-shadow: 0 0 .2em hsl(219, 1%, 72%);
overflow: visible;
font-family: inherit;
font-size: inherit;
background: hsl(220, 20%, 94%);
}
[role="tab"]:hover::before,
[role="tab"]:focus::before,
[role="tab"][aria-selected="true"]::before {
position: absolute;
bottom: 100%;
right: -1px;
left: -1px;
border-radius: 0.2em 0.2em 0 0;
border-top: 3px solid hsl(20, 96%, 48%);
content: '';
}
[role="tab"][aria-selected="true"] {
border-radius: 0;
background: hsl(220, 43%, 99%);
outline: 0;
}
[role="tab"][aria-selected="true"]:not(:focus):not(:hover)::before {
border-top: 5px solid hsl(218, 96%, 48%);
}
[role="tab"][aria-selected="true"]::after {
position: absolute;
z-index: 3;
bottom: -1px;
right: 0;
left: 0;
height: .3em;
background: hsl(220, 43%, 99%);
box-shadow: none;
content: '';
}
[role="tab"]:hover,
[role="tab"]:focus,
[role="tab"]:active {
outline: 0;
border-radius: 0;
color: inherit;
}
[role="tab"]:hover::before,
[role="tab"]:focus::before {
border-color: hsl(20, 96%, 48%);
}
[role="tabpanel"] {
position: relative;
z-index: 2;
padding: .5em .5em .7em;
border: 1px solid hsl(219, 1%, 72%);
border-radius: 0 .2em .2em .2em;
box-shadow: 0 0 .2em hsl(219, 1%, 72%);
background: hsl(220, 43%, 99%);
}
[role="tabpanel"]:focus {
border-color: hsl(20, 96%, 48%);
box-shadow: 0 0 .2em hsl(20, 96%, 48%);
outline: 0;
}
[role="tabpanel"]:focus::after {
position: absolute;
bottom: 0;
right: -1px;
left: -1px;
border-bottom: 3px solid hsl(20, 96%, 48%);
border-radius: 0 0 0.2em 0.2em;
content: '';
}
[role="tabpanel"] p {
margin: 0;
}
[role="tabpanel"] * + p {
margin-top: 1em;
}
A quick summary of the attributes used on the tabs container itself:
Attribute | Role | Default value |
---|---|---|
data-jd-tabs
|
Creates the tabs | No value |
data-delay
|
Defines the delay (in ms) to focus a tab when using arrows to navigate |
300
|
Now for the attributes used on the tabs buttons:
Attribute | Role | Default value |
---|---|---|
role="tab"
|
Required to make the tab system work | |
aria-controls
|
The ID of the tab panel the tab controls | Up to you |
data-deletable
|
Makes the whole tab deletable by using the DEL key |
false
|
And finally the attributes used on the panels:
Attribute | Role | Default value |
---|---|---|
role="tabpanel"
|
Required to make the tab system work | |
id
|
The ID of the tab panel (must be the same as the aria-controls attribute used in the button
|
Up to you |