The <luna-tab-group>, <luna-tab>, and <luna-tab-panel> components provide tab navigation with multiple placements and closable tabs.
Paths
/lunadom/components/tab/tab.js /lunadom/components/tab-group/tab-group.js /lunadom/components/tab-panel/tab-panel.js Standard Top (with Closable Tabs)
Welcome to the general info panel. This is where you can view overview information and get started with the basics.
Here are some shiny graphs and numbers. View analytics and performance metrics for your account.
Tweak your preferences here. Customize your experience and manage account settings.
Bottom Placement
Content for the overview tab with indicator on bottom.
Detailed information and specifications go here.
Historical data and previous activity records.
Start Placement (Vertical)
Manage your user profile details, avatar, and personal information.
View and manage your subscription, payment methods, and billing history.
Configure two-factor authentication and security preferences.
Custom Styling
Dashboard content with custom green accent color.
Analytics and insights with enhanced spacing.
Generate and view detailed reports.
Customization
luna-tab-group
nav - The container for luna-tab components.default - The container for luna-tab-panel components.luna-tab
default - The label for the tab.luna-tab-panel
default - The content of the tab panel.luna-tab-group
placement - Position of tab nav (top, bottom, start, end). Defaults to 'top'.no-scroll - Disables overflow scrolling on nav strip; tabs wrap instead.luna-tab
active - Whether the tab is currently active.disabled - Whether the tab is disabled.closable - Shows a close button next to the tab label.panel - The name of the luna-tab-panel this tab activates.luna-tab-panel
name - The unique identifier for this panel, matched by the 'panel' attribute of a luna-tab.active - Whether the panel is currently visible.luna-tab-group
--luna-tab-group-bg - Background of the whole component. Defaults to transparent.--luna-tab-group-border - Color of the nav/panel divider line. Defaults to #222.--luna-tab-group-nav-bg - Background of the nav strip. Defaults to transparent.--luna-tab-group-nav-padding - Inline padding of the nav strip. Defaults to 0 0.25rem.--luna-tab-scroll-button-size - Width of overflow scroll buttons. Defaults to 2rem.--luna-accent - Accent color forwarded to tabs. Defaults to #2563eb.luna-tab
--luna-tab-color - Default tab text color. Defaults to #555.--luna-tab-color-hover - Tab text color on hover. Defaults to #ccc.--luna-tab-color-active - Active tab text color. Defaults to #fff.--luna-tab-font-size - Tab label font size. Defaults to 0.8125rem.--luna-tab-font-weight - Tab label font weight. Defaults to 500.--luna-tab-padding - Tab padding. Defaults to 0.75rem 1.25rem.--luna-tab-indicator - Active indicator color. Defaults to var(--luna-accent, #2563eb).--luna-tab-hover-bg - Hover background tint. Defaults to rgba(255,255,255,.03).luna-tab-group
luna-tab-show - Fired when a tab is activated. detail: { tab, name }luna-tab
luna-close - Fired when the close button is clicked. detail: { tab }