dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
50 lines (49 loc) • 2.24 kB
TypeScript
import { PropertyValueMap } from 'lit';
import { DdsElement } from '../../internal/dds-hu-element';
declare const LANDMARK_TAGS: {
readonly aside: import('lit-html/static.js').StaticValue;
readonly nav: import('lit-html/static.js').StaticValue;
};
export type SideNavLandmark = keyof typeof LANDMARK_TAGS;
/**
* `dap-ds-sidenav`
* @summary Side navigation is a list of links that are used to navigate to different sections of a page.
* @element dap-ds-sidenav
* @title - Side navigation
*
* @event {{ href: string, event: Event }} dds-item-click - Event fired when the side navigation item is clicked.
*
* @slot - The content of the side navigation.
*
* @csspart base - The main side navigation container.
* @csspart menu - The menu of the side navigation.
*/
export default class DapDSSideNav extends DdsElement {
static tagName: string;
/** The label of the side navigation, if aria label is not provided, it will be used as aria label */
label: string;
/** The active href of the side navigation, to explicitly set the active item, if not provided, it will be set based on the current location */
activeHref: string;
/** The size of the side navigation */
size: 'xs' | 'sm' | 'lg';
/**
* The landmark element to render. `aside` exposes a complementary landmark; `nav`
* exposes a navigation landmark, so the sidenav is listed when a screen-reader user
* asks for the page's navigation.
*
* Defaults to `aside` because that is what this component has always rendered, and
* changing the landmark of every existing sidenav is not this component's call: a
* sidenav that is genuinely a sidebar should stay complementary. Set `nav` when the
* sidenav is the primary way to move around the view.
* @type {'aside' | 'nav'}
*/
landmark: SideNavLandmark;
static readonly styles: import('lit').CSSResult;
protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
private removeActive;
private setActive;
private handleClick;
render(): import('lit-html').TemplateResult;
}
export {};