Sidebar

Exports

@mbsw/ui에서 가져올 수 있는 항목입니다.

Sidebar

SidebarHeader

SidebarContent

SidebarFooter

SidebarTrigger

Props

컴포넌트별 주요 속성입니다. 조건부 속성의 조합과 공통 HTML, Radix 속성은 아래 전체 타입에서 확인하세요.

Sidebar 속성
Prop	Type	필수 여부
`asChild`	`boolean`	선택
`collapsed`	`boolean`	선택
`defaultCollapsed`	`boolean`	선택
`onCollapsedChange`	`((collapsed: boolean) => void)`	선택
`labels`	`Partial<SidebarLabels>`	선택

SidebarTrigger

SidebarTrigger 속성
Prop	Type	필수 여부
`asChild`	`boolean`	조건부
`children`	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	선택

Type reference

전체 타입 보기

속성 조합과 상속 속성을 포함한 TypeScript 선언입니다.

import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactElement, type RefAttributes } from 'react';

type DataAttributes = {
    [key: `data-${string}`]: boolean | number | string | undefined;
};

export type SidebarLabels = {
    collapse: string;
    expand: string;
};

export type SidebarProps = HTMLAttributes<HTMLElement> & DataAttributes & {
    asChild?: boolean;
    collapsed?: boolean;
    defaultCollapsed?: boolean;
    onCollapsedChange?: (collapsed: boolean) => void;
    labels?: Partial<SidebarLabels>;
};

export type SidebarHeaderProps = HTMLAttributes<HTMLDivElement> & DataAttributes;

export type SidebarContentProps = HTMLAttributes<HTMLDivElement> & DataAttributes;

export type SidebarFooterProps = HTMLAttributes<HTMLDivElement> & DataAttributes;

export type SidebarTriggerProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'disabled'> & DataAttributes & {
    /** The replacement toggle must remain focusable after expansion. */
    disabled?: never;
    asChild?: boolean;
    children?: ReactElement;
};

export declare const Sidebar: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & DataAttributes & {
    asChild?: boolean;
    collapsed?: boolean;
    defaultCollapsed?: boolean;
    onCollapsedChange?: (collapsed: boolean) => void;
    labels?: Partial<SidebarLabels>;
} & RefAttributes<HTMLElement>>;

export declare const SidebarHeader: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & DataAttributes & RefAttributes<HTMLDivElement>>;

export declare const SidebarFooter: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & DataAttributes & RefAttributes<HTMLDivElement>>;

export declare const SidebarContent: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & DataAttributes & RefAttributes<HTMLDivElement>>;

export declare const SidebarTrigger: {
    (props: SidebarTriggerProps & {
        asChild?: false;
    } & RefAttributes<HTMLButtonElement>): ReactElement | null;
    (props: SidebarTriggerProps & {
        asChild: true;
    } & RefAttributes<HTMLElement>): ReactElement | null;
};