Tabs — wd-tabs

Category: Content · Tag: wd-tabsBack to: Components overview

---

What it does

A tabbed panel: a row of tab buttons, each revealing its own panel. The first tab is selected by default.

---

Adding it & its settings

Add Component → Content → Tabs.

Basic Settings (all components): #id, Classes, Inline Style.

Component Settings: none — the tabs are built from the content you put inside.

---

Content & slots

• Default slot — one child element per tab. Each child provides:
  • a title attribute → the tab button label,
  • its inner HTML → the tab's panel content.

<wd-tabs>
  <div title="Overview">Product overview…</div>
  <div title="Specs">Technical specifications…</div>
  <div title="Reviews">Customer reviews…</div>
</wd-tabs>

The component reads these children on load, builds the tab bar and panels, and removes the originals.

---

Styling

CSS variables

Container & header

Variable	Default
--wd-tabs-border	1px solid #ccc
--wd-tabs-border-radius	4px
--wd-tabs-header-background	#f7f7f7
--wd-tabs-header-border-bottom	1px solid #ccc

Tab buttons

Variable	Default
--wd-tabs-button-color	#555
--wd-tabs-button-font-family	sans-serif
--wd-tabs-button-font-size	1rem
--wd-tabs-button-font-weight	normal
--wd-tabs-button-min-height	3rem
--wd-tabs-button-padding	0.75rem 1rem
--wd-tabs-button-hover-background	#e2e2e2
--wd-tabs-button-hover-color	#333

Active tab

Variable	Default
--wd-tabs-button-active-background	transparent
--wd-tabs-button-active-color	#333
--wd-tabs-button-active-font-weight	bold
--wd-tabs-button-active-indicator-color	#333
--wd-tabs-button-indicator-width	3px

Content

Variable	Default
--wd-tabs-content-padding	1rem

::part()

Part	Element
tabs-<id>	The tabs wrapper.

wd-tabs::part(tabs-product) { border-radius: 8px; overflow: hidden; }

---

Notes

• The component emits a tabChange event when the active tab changes (useful for custom scripts).