lumir-design-system-01
Version:
Lumir Design System 01 - Professional & Clean
102 lines (101 loc) • 2.74 kB
TypeScript
import React from 'react';
import { IconName } from 'lumir-design-system-shared';
type Size = 'xsm' | 'sm' | 'md' | 'lg' | 'xlg';
type Style = 'left' | 'center';
type IconPosition = 'none' | 'before' | 'after' | 'above';
export interface TextDisplayProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'> {
/**
* 텍스트 디스플레이의 크기를 설정합니다.
* @default 'md'
*/
size?: Size;
/**
* 텍스트 정렬 스타일을 설정합니다.
* @default 'left'
*/
style?: Style;
/**
* 아이콘의 위치를 설정합니다.
* @default 'none'
*/
iconPosition?: IconPosition;
/**
* 사용할 아이콘 이름을 설정합니다.
*/
iconName?: IconName;
/**
* 아이콘 타입을 설정합니다.
*/
iconType?: 'line' | 'flat';
/**
* 라벨 텍스트 표시 여부를 설정합니다.
* @default false
*/
showLabel?: boolean;
/**
* 라벨 텍스트 내용을 설정합니다.
*/
labelText?: string;
/**
* 메인 텍스트 내용을 설정합니다.
*/
primaryText?: string;
/**
* 설명 텍스트 표시 여부를 설정합니다.
* @default false
*/
showDescription?: boolean;
/**
* 설명 텍스트 내용을 설정합니다.
*/
descriptionText?: string;
/**
* 캡션 텍스트 표시 여부를 설정합니다.
* @default false
*/
showCaption?: boolean;
/**
* 캡션 텍스트 내용을 설정합니다.
*/
captionText?: string;
}
/**
* TextDisplay 컴포넌트는 다양한 텍스트 요소들을 조합하여 표시하는 컴파운드 컴포넌트입니다.
* 라벨, 메인 텍스트, 설명, 캡션을 선택적으로 표시할 수 있으며, 아이콘도 함께 표시할 수 있습니다.
*
* @example
* ```tsx
* // 기본 사용법
* <TextDisplay
* primaryText="Hello World"
* />
*
* // 모든 요소 포함
* <TextDisplay
* size="lg"
* style="center"
* iconPosition="above"
* iconName="star-filled"
* iconType="flat"
* showLabel={true}
* labelText="Status"
* primaryText="Success"
* showDescription={true}
* descriptionText="Your operation completed successfully"
* showCaption={true}
* captionText="Last updated: 2024-01-01"
* />
*
* // 좌측 정렬 + 앞쪽 아이콘
* <TextDisplay
* style="left"
* iconPosition="before"
* iconName="info"
* primaryText="Information"
* showDescription={true}
* descriptionText="Additional details here"
* />
* ```
*/
export declare const TextDisplay: React.ForwardRefExoticComponent<TextDisplayProps & React.RefAttributes<HTMLDivElement>>;
export {};