Lamp Component
Tab menu toggle with indicator bar. Structure: .lamp > *. Selected item via data-selected="true" or input[type=radio]:checked. Supports 4 directions, theme colors, full-width and sizes.
Notes
- Base class:
.lamp. Children are tab items. Mark selected with data-selected="true" or wrap in label > input[type=radio].
- For items with icons, wrap text in
<span class="lamp-label">.
- Directions: default (bottom),
.lamp-top, .lamp-start (left, vertical), .lamp-end (right, vertical).
- Width:
.lamp-full for equal-width children.
- Sizes:
lamp-4 ~ lamp-15.
- Color:
lamp-* dynamic utilities (e.g. lamp-primary, lamp-error, lamp-blue-500).
Basic usage
Default
Home
Products
Services
About
With icons
🏠 Home
📦 Products
📞 Contact
Full width (.lamp-full)
Home
Products
Services
About
Selection methods
Directions
Bottom (default)
Home
Products
Services
Top (.lamp-top)
Home
Products
Services
Start (left, vertical)
Home
Products
Services
End (right, vertical)
Home
Products
Services
All theme colors
Primary
PrimaryOption
Secondary
SecondaryOption
Tertiary
TertiaryOption
Success
SuccessOption
Error
ErrorOption
Info
InfoOption
Warning
WarningOption
Caution
CautionOption
Highlight
HighlightOption
Ink
InkOption
Title
TitleOption
Description
DescriptionOption
Caption
CaptionOption
Placeholder
PlaceholderOption
Custom colors
Multiple color formats are supported:
- 1. Theme semantic colors, e.g.
*-error, *-error-hover
- 2. Tailwind built-in colors, e.g.
*-indigo-500
- 3. Raw color values, e.g.
*-[#ff0000]
- 4. CSS named colors, e.g.
*-[red], *-[green]
blue-200Option
blue-500Option
Sizes (lamp-4 ~ lamp-15)
4Item
5Item
6Item
7Item
8Item
9Item
10Item
11Item
12Item
13Item
14Item
15Item
Use cases
Tab switch
⭐ Favorites
📁 Files
👥 Team
⚙️ Settings
Navigation menu (top + full)
Home
Products
Services
About
Sidebar (start)
🏠 Home
📊 Data
👥 Users
Status switch
Pass
Fail
Skip