lumir-design-system-01
Version:
Lumir Design System 01 - Professional & Clean
52 lines (50 loc) • 1.57 kB
TypeScript
import React from 'react';
import { IconName } from 'lumir-design-system-shared';
type MenuSize = 'md' | 'lg' | 'xlg';
type MenuState = 'default' | 'hovered' | 'pressed' | 'focused' | 'selected' | 'disabled';
export interface MenuHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'> {
/**
* 메뉴 헤더의 크기를 지정합니다.
*/
size?: MenuSize;
/**
* 메뉴 헤더의 상태를 지정합니다.
*/
state?: MenuState;
/**
* 메뉴 헤더의 텍스트 내용입니다.
*/
children: React.ReactNode;
/**
* 왼쪽에 표시할 아이콘입니다.
*/
leftIcon?: IconName;
/**
* 오른쪽에 표시할 아이콘입니다. (텍스트 옆)
*/
rightIcon?: IconName;
/**
* 확장/축소 상태를 나타냅니다.
*/
expanded?: boolean;
/**
* Chevron 버튼 표시 여부를 지정합니다.
* @default true
*/
showChevron?: boolean;
/**
* 비활성화 상태를 지정합니다.
*/
disabled?: boolean;
/**
* 클릭 이벤트 핸들러입니다.
*/
onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
}
/**
* MenuHeader 컴포넌트는 아코디언이나 GNB 메뉴에서 사용할 수 있는 헤더 역할을 합니다.
* 클릭 가능한 버튼 형태로 구현되어 메뉴 확장/축소 등의 동작을 처리할 수 있습니다.
*
*/
export declare const MenuHeader: React.ForwardRefExoticComponent<MenuHeaderProps & React.RefAttributes<HTMLDivElement>>;
export {};