InfoCard

@hua-labs/ui

v1.0.0

아이콘, 제목, 내용을 포함한 정보 카드입니다. 다양한 메시지 유형에 맞는 색상 톤을 지원합니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { InfoCard } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

라이브 데모

정보

이것은 일반적인 정보 메시지입니다.

성공

작업이 성공적으로 완료되었습니다.

경고

계속하기 전에 확인해주세요.

팁

이 기능을 사용하면 더 효율적으로 작업할 수 있습니다.

Props

이름	타입	기본값	설명
`title*`	`string`	-	Card title
`icon*`	`IconName`	-	Icon name
`tone`	`"blue" \| "purple" \| "green" \| "orange"`	`"blue"`	Color tone
`children`	`React.ReactNode`	-	콘텐츠

코드 예시

기본 사용법tsx

1import { InfoCard } from '@hua-labs/ui';
2 
3<InfoCard icon="info" title="Information" tone="blue">
4  This is an informational message.
5</InfoCard>

다양한 톤tsx

1<InfoCard icon="check" title="Success" tone="green">
2  Operation completed successfully.
3</InfoCard>
4 
5<InfoCard icon="warning" title="Warning" tone="orange">
6  Please review before proceeding.
7</InfoCard>
8 
9<InfoCard icon="lightbulb" title="Tip" tone="purple">
10  Here's a helpful suggestion.
11</InfoCard>

접근성

•아이콘 + 텍스트: 아이콘과 텍스트 모두로 정보 전달

FeatureCard SectionHeader