You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
36 lines
1.8 KiB
36 lines
1.8 KiB
<p>This demo has two versions. One just shows how to do a basic layout with 3 tabs and no
|
|
interaction. Using flexbox I'm able to simplify the HTML with only <b>a</b> tags rather than the usual pattern of using a <b>ul/li</b> combination. I don't have to use <b>a</b> tags at all and can use anything I can attach an <b>onClick</b> event handler to.
|
|
</p>
|
|
|
|
|
|
<p>The second demo does a complete set of 3 tabs with associated panels and the JavaScript necessary to make them work. The code you see here is <a href="https://svelte.dev">Svelte</a> template code to make the example more succinct, and to provide the handlers and interaction. You could also do this with Vanilla JavaScript with not much more hassle.
|
|
</p>
|
|
|
|
<p>The interactive demo isn't terribly difficult. You need to use a class to toggle the visuals for "active" vs. inactive tabs and panels, and you have to mark the inactive panels <b>display: none</b> so they aren't visible.
|
|
</p>
|
|
<pre>
|
|
<code class="language-css">
|
|
tabs a.active {
|
|
background-color: var(--color-bg-secondary);
|
|
}
|
|
|
|
panel {
|
|
display: none;
|
|
}
|
|
|
|
panel.active {
|
|
border: 1px solid var(--color-accent);
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 1em;
|
|
}
|
|
|
|
</code>
|
|
</pre>
|
|
|
|
<p>It's the only place you need a class for this simple demo. Using classes to design state changes and different
|
|
appearances works well since the alternative would be to somehow change the tags, and that won't work.
|
|
</p>
|
|
|
|
<p>Finally, I continue to use my more explicit style of <b>tabs a</b> rather than using classes to avoid specifying the structure I want to select. I would say you don't have to do this, but it does make it a lot easier to find the HTML that a piece of CSS applies to, and also makes sure you aren't accidentally applying a style from somewhere else via the cascade.
|
|
</p>
|
|
|