Section

@hua-labs/ui

v1.0.0

선택적 헤더 구성과 dot 스타일링을 지원하는 시맨틱 섹션 컴포넌트.

설치

bash

npm install @hua-labs/hua

Import

tsx

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

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

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

Props

이름	타입	기본값	설명
`children*`	`React.ReactNode`	-
`header`	`SectionHeaderConfig`	-	섹션 헤더 구성 객체
`spacing`	`"none" \| "sm" \| "md" \| "lg" \| "xl"`	`"lg"`
`background`	`"none" \| "muted" \| "accent" \| "primary"`	`"none"`
`container`	`"sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "full"`	`"lg"`
`containerPadding`	`"none" \| "sm" \| "md" \| "lg"`	`"none"`
`fullWidth`	`boolean`	`false`
`dot`	`string`	-	스타일링을 위한 dot 유틸리티 문자열
`style`	`React.CSSProperties`	-	추가 인라인 스타일

코드 예시

기본 사용법

import { Section } from '@hua-labs/ui';

<Section>
  <p>Section content goes here.</p>
</Section>

import { Section } from '@hua-labs/ui';

<Section
  header={{
    title: "Our Features",
    subtitle: "Everything you need to build modern applications.",
  }}
>
  <div>Feature cards...</div>
</Section>

import { Section } from '@hua-labs/ui';

<Section background="muted" spacing="xl">
  <p>Muted background section</p>
</Section>

<Section background="primary" spacing="lg">
  <p>Primary tinted section</p>
</Section>

import { Section } from '@hua-labs/ui';

<Section
  header={{
    title: "What's New",
    subtitle: "Latest updates from our team.",
    align: "left",
    decorator: false,
  }}
  spacing="md"
>
  <div>Content...</div>
</Section>

Panel Prose