@synergy-design-system/react
Version:
React wrappers for the Synergy Design System
77 lines (75 loc) • 4.11 kB
TypeScript
import Component from '@synergy-design-system/components/components/side-nav/side-nav.component.js';
import { type EventName } from '@lit/react';
import type { SynShowEvent } from '@synergy-design-system/components';
import type { SynAfterShowEvent } from '@synergy-design-system/components';
import type { SynHideEvent } from '@synergy-design-system/components';
import type { SynAfterHideEvent } from '@synergy-design-system/components';
/**
* @summary The <syn-side-nav /> element contains secondary navigation and fits below the header.
* It can be used to group multiple navigation items (<syn-nav-item />s) together.
*
* @example
* <syn-side-nav open>
* <syn-nav-item >Item 1</syn-nav-item>
* <syn-nav-item divider>Item 2</syn-nav-item>
* </syn-side-nav>
*
* @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-side-nav--docs
* @status stable
* @since 1.14.0
*
* @dependency syn-divider
* @dependency syn-drawer
* @dependency syn-icon
* @dependency syn-nav-item
*
* @slot - The main content of the side-nav. Used for <syn-nav-item /> elements.
* @slot footer - The footer content of the side-nav. Used for <syn-nav-item /> elements.
* Please avoid having to many nav-items as it can massively influence the user experience.
* @slot toggle-label - The label of the toggle nav-item for variant="sticky".
* @slot toggle-icon - An icon to use in lieu of the default icon for the toggle nav-item
* for variant="sticky".
*
* @event syn-show - Emitted when the side-nav opens.
* @event syn-after-show - Emitted after the side-nav opens and all animations are complete.
* @event syn-hide - Emitted when the side-nav closes.
* @event syn-after-hide - Emitted after the side-nav closes and all animations are complete.
*
* @csspart base - The components base wrapper
* @csspart drawer - The drawer that is used under the hood for creating the side-nav
* @csspart content-container - The components main content container
* @csspart content - The components main content
* @csspart footer-container - The components footer content container
(where the footer slot content is rendered)
* @csspart footer-divider - The components footer divider
* @csspart footer - The components footer content
* @csspart overlay - The overlay that covers the screen behind the side-nav.
* @csspart panel - The side-nav's panel (where the whole content is rendered).
* @csspart body - The side-nav's body (where the default slot content is rendered)
* @csspart drawer__base - The drawer's base wrapper
* @csspart toggle-nav-item - The nav-item to toggle open state for variant="sticky"
* @csspart toggle-icon - The icon of the toggle nav-item for variant="sticky"
* @csspart toggle-label - The label of the toggle nav-item for variant="sticky".
* @cssproperty --side-nav-open-width - The width of the side-nav if in open state
*
* @animation sideNav.showNonRail - The animation to use when showing the side-nav
* in variant="default".
* @animation sideNav.showRail - The animation to use when showing the side-nav in variant="rail"
* and variant="sticky".
* @animation sideNav.hideNonRail - The animation to use when hiding the side-nav
* in variant="default".
* @animation sideNav.hideRail - The animation to use when hiding the side-nav in variant="rail"
* and variant="sticky".
* @animation sideNav.overlay.show - The animation to use when showing the side-nav's overlay.
* @animation sideNav.overlay.hide - The animation to use when hiding the side-nav's overlay.
*/
export declare const SynSideNav: import("@lit/react").ReactWebComponent<Component, {
onSynShow: EventName<SynShowEvent>;
onSynAfterShow: EventName<SynAfterShowEvent>;
onSynHide: EventName<SynHideEvent>;
onSynAfterHide: EventName<SynAfterHideEvent>;
}>;
export type { SynShowEvent } from '@synergy-design-system/components';
export type { SynAfterShowEvent } from '@synergy-design-system/components';
export type { SynHideEvent } from '@synergy-design-system/components';
export type { SynAfterHideEvent } from '@synergy-design-system/components';