SectionHeader

@hua-labs/ui

v1.0.0

제목, 설명, 액션 슬롯을 포함한 섹션 헤더 컴포넌트입니다.

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

라이브 데모

최근 활동

알림

최근 알림 목록입니다

팀 멤버

팀 관리

설정

Props

이름	타입	기본값	설명
`title*`	`string`	-	Section title
`description`	`string`	-	Section description
`action`	`React.ReactNode`	-	Action element (button, link, etc.)

Code Examples

docs:common.basicUsagetsx

1import { SectionHeader } from '@hua-labs/ui/data';
2 
3<SectionHeader title="Recent Activity" />

docs:components.sectionHeader.examples.withDescriptiontsx

1<SectionHeader
2  title="Notifications"
3  description="Your recent notifications and alerts"
4/>

docs:common.withActiontsx

1<SectionHeader
2  title="Team Members"
3  description="Manage your team"
4  action={
5    <Button size="sm" variant="outline">
6      <Plus className="h-4 w-4 mr-1" />
7      Add Member
8    </Button>
9  }
10/>

접근성

•시맨틱 HTML: 제목에 h3 요소 사용

InfoCard Bookmark