dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
70 lines (69 loc) • 3.63 kB
TypeScript
import { CommonSize } from '../../common/types';
import { DdsElement } from '../../internal/dds-hu-element';
/**
* `dap-ds-tab-group`
* @summary A tab group component. It is used with dap-ds-tab component to create a tab group.
* @element dap-ds-tab-group
* @title - Tab group
* @group tab
*
* @event dds-tab-select - Fired when select a new tab.
*
* @slot - The tab items.
*
* @csspart base - The main container.
* @csspart tab-nav - The tab navigation container.
* @csspart tab-content - The tab content container.
*
* @cssproperty --dds-tab-group-border-radius - Border radius of the tab group container (default: var(--dds-radius-base))
* @cssproperty --dds-tab-border-radius - Border radius for tab items (default: var(--dds-radius-base) var(--dds-radius-base) 0 0)
* @cssproperty --dds-tab-group-border-width - Border width of the tab navigation (default: var(--dds-border-width-base))
* @cssproperty --dds-tab-group-border-color - Border color of the tab navigation (default: var(--dds-border-neutral-subtle))
* @cssproperty --dds-tab-height-sm - Height of small tabs (default: 40px)
* @cssproperty --dds-tab-height-lg - Height of large tabs (default: 50px)
* @cssproperty --dds-tab-font-size-sm - Font size of small tabs (default: var(--dds-font-base))
* @cssproperty --dds-tab-font-size-lg - Font size of large tabs (default: var(--dds-font-lg))
* @cssproperty --dds-tab-padding - Padding of the tab buttons (default: 0 var(--dds-spacing-400))
* @cssproperty --dds-tab-border-width - Border width for tabs (default: var(--dds-border-width-large))
* @cssproperty --dds-tab-selected-border-color - Border color for selected tabs (default: var(--dds-border-brand-base))
* @cssproperty --dds-tab-text-color - Text color for tabs (default: var(--dds-button-subtle-text-neutral-enabled))
* @cssproperty --dds-tab-hover-text-color - Text color for tabs on hover (default: var(--dds-text-brand-subtle))
* @cssproperty --dds-tab-disabled-text-color - Text color for disabled tabs (default: var(--dds-text-neutral-disabled))
* @cssproperty --dds-tab-hover-background - Background color for tabs on hover (default: var(--dds-transparent-black-subtle))
* @cssproperty --dds-tab-active-background - Background color for active tabs (default: var(--dds-transparent-black-base))
*/
export default class DapDSTabGroup extends DdsElement {
static tagName: string;
/**@ignore */
defaultSlot: HTMLSlotElement;
/**@ignore */
tabNavElements: HTMLElement[];
/** The selected tab id. */
selectedTabId: string;
/** The size of the tab buttons. Default is `sm`. Can be `sm` or `lg`.
* @type {'sm' | 'lg'}
*/
size: CommonSize;
/** If true, the tab group will be displayed in mobile mode. */
mobile: boolean;
static readonly styles: import('lit').CSSResult;
private _tabNavItems;
private _activeTabIds;
private _initialEmit;
emitTabSelect(tabId: string): void;
attributeChangedCallback(name: string, oldValue: string | null, value: string | null): void;
/**
* Collects the title nodes of a tab (every light DOM child that is not
* slotted into the tab content).
*
* The nodes are cloned: rendering the original nodes into the nav would move
* them out of the tab's light DOM, so any later slotchange would find the tab
* title empty and the nav labels would disappear.
* @ignore
*/
private getTabTitleNodes;
handleSlotChange(event: Event): void;
handleClick(tabId: string | null): void;
handleKeyDown(event: KeyboardEvent): void;
render(): import('lit-html').TemplateResult<1>;
}