Text experimental

기본 본문 text wrapper입니다. native <p> 또는 as로 span에 적용하며 data-size/data-tone으로 크기와 톤을 조절합니다.

native p

본문을 sm 크기로 표시해요.

본문을 md 크기로 표시해요.

본문을 lg 크기로 표시해요.

보조 정보는 muted 톤으로 흐리게 둬요.

<script lang="ts">
  import { Text } from '@odbd/svelte'

  const sizes = ['sm', 'md', 'lg'] as const
</script>

<div class="preview-stack">
  {#each sizes as size}
    <Text {size}>본문을 {size} 크기로 표시해요.</Text>
  {/each}
  <Text tone="muted">보조 정보는 muted 톤으로 흐리게 둬요.</Text>
</div>

Import

Svelte와 React가 같은 anatomy 계약을 공유합니다. 선택한 프레임워크는 모든 페이지에서 유지됩니다. 패키지 설치는 Getting Started를 참고하세요.

import { Text } from '@odbd/svelte'

import { Text } from '@odbd/react/text'