dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
60 lines (59 loc) • 3.96 kB
TypeScript
import { DdsElement } from '../../internal/dds-hu-element';
import { default as ArrowsArrowRightSLine } from '../icons/arrows/arrows-arrow-right-s-line/arrows-arrow-right-s-line.component';
export type Spacing = 'top' | 'bottom' | 'both' | 'none';
/**
* `dap-ds-sidenav-group`
* @summary Side navigation group
* @element dap-ds-sidenav-group
* @title - Side navigation group
* @group side-navigation
*
* @slot - The content of the side navigation group.
* @slot submenu - The submenu of the side navigation group.
* @slot suffix - The suffix of the side navigation group.
*
* @csspart base - The main side navigation group container.
* @csspart title - The title of the side navigation group.
* @csspart link - The link of the side navigation group.
* @csspart toggle - The toggle button of the side navigation group.
* @csspart submenu - The submenu of the side navigation group.
*
* @cssproperty --dds-sidenav-group-margin-bottom - Default bottom margin of the sidenav group (default: var(--dds-spacing-100))
* @cssproperty --dds-sidenav-group-border-radius - Border radius of the sidenav group (default: var(--dds-radius-base))
* @cssproperty --dds-sidenav-group-spacing-margin - Margin used for spacing variants (default: var(--dds-spacing-400))
* @cssproperty --dds-sidenav-group-item-min-height-xs - Minimum height of the sidenav group item (default: var(--dds-spacing-800))
* @cssproperty --dds-sidenav-group-item-min-height-sm - Minimum height of the sidenav group item (default: var(--dds-spacing-1000))
* @cssproperty --dds-sidenav-group-item-min-height-lg - Minimum height of the sidenav group item (default: var(--dds-spacing-1200))
* @cssproperty --dds-sidenav-group-item-padding-xs - Padding of the sidenav group item (default: var(--dds-spacing-100) var(--dds-spacing-300))
* @cssproperty --dds-sidenav-group-item-padding-sm - Padding of the sidenav group item (default: var(--dds-spacing-200) var(--dds-spacing-400))
* @cssproperty --dds-sidenav-group-item-padding-lg - Padding of the sidenav group item (default: var(--dds-spacing-300) var(--dds-spacing-500))
* @cssproperty --dds-sidenav-group-item-color - Text color of the sidenav group item (default: var(--dds-text-neutral-base))
* @cssproperty --dds-sidenav-group-item-font-size-xs - Font size of the sidenav group item (default: var(--dds-font-sm))
* @cssproperty --dds-sidenav-group-item-font-size-sm - Font size of the sidenav group item (default: var(--dds-font-base))
* @cssproperty --dds-sidenav-group-item-font-size-lg - Font size of the sidenav group item (default: var(--dds-font-lg))
* @cssproperty --dds-sidenav-group-item-font-weight - Font weight of the sidenav group item (default: var(--dds-font-weight-medium))
* @cssproperty --dds-sidenav-group-item-bg-active - Background color when the item is active (default: var(--dds-transparent-black-subtle))
* @cssproperty --dds-sidenav-group-item-bg-hover - Background color on hover and active states (default: var(--dds-transparent-black-base))
* @cssproperty --dds-sidenav-group-toggle-margin - Margin for the toggle button (default: var(--dds-spacing-300))
* @cssproperty --dds-sidenav-group-submenu-padding - Padding for the submenu (default: var(--dds-spacing-300) 0)
*/
export default class DapDSSideNavGroup extends DdsElement {
static tagName: string;
static dependencies: {
'dap-ds-icon-arrow-right-s-line': typeof ArrowsArrowRightSLine;
};
/** The href of the side navigation item */
href: string;
/** Whether the side navigation item is active */
active: boolean;
/** The spacing of the side navigation item
* @type {'top' | 'bottom' | 'both' | 'none'}
*/
spacing: Spacing;
/** Whether the side navigation group is open */
open: boolean;
/** The size of the side navigation group */
size: 'xs' | 'sm' | 'lg';
static readonly styles: import('lit').CSSResult;
render(): import('lit-html').TemplateResult;
}