텍스트 목록 Text list

텍스트 목록은 계층 구조가 있는 텍스트 블록을 읽기 쉽게 구성한 것이다.

기본 (대시)

type으로 ul·ol 요소를, variant로 글머리 스타일을 정합니다. 항목(li) 안에 KrdsTextList를 넣어 3단계까지 중첩합니다.

텍스트 목록 레벨1
텍스트 목록 레벨1
- 텍스트 목록 레벨2
- 텍스트 목록 레벨2
텍스트 목록 레벨1

vue

<script setup lang="ts">
  import { KrdsTextList } from '@krds.ui/vue'
</script>

<template>
  <KrdsTextList type="ul" variant="dash">
    <li>텍스트 목록 레벨1</li>
    <li>
      텍스트 목록 레벨1
      <KrdsTextList type="ul" variant="hollow">
        <li>텍스트 목록 레벨2</li>
        <li>텍스트 목록 레벨2</li>
      </KrdsTextList>
    </li>
    <li>텍스트 목록 레벨1</li>
  </KrdsTextList>
</template>

순서 있는 목록

variant="ordered"는 번호를 자동으로 붙이지 않으므로 항목마다 <span class="num">으로 번호를 직접 씁니다.

1. 텍스트 목록 레벨1
2. 텍스트 목록 레벨1
1. a. 텍스트 목록 레벨2
2. b. 텍스트 목록 레벨2
  1. ①텍스트 목록 레벨3
  2. ②텍스트 목록 레벨3
3. c. 텍스트 목록 레벨2
3. 텍스트 목록 레벨1

텍스트 목록 레벨1
- 텍스트 목록 레벨2
  1. ①텍스트 목록 레벨3
  2. ②텍스트 목록 레벨3
텍스트 목록 레벨1
1. a. 텍스트 목록 레벨2
  - 텍스트 목록 레벨3
  - 텍스트 목록 레벨3

vue

<script setup lang="ts">
  import { KrdsTextList } from '@krds.ui/vue'
</script>

<template>
  <KrdsTextList type="ol" variant="ordered">
    <li><span class="num">1. </span>텍스트 목록 레벨1</li>
    <li>
      <span class="num">2. </span>텍스트 목록 레벨1
      <KrdsTextList type="ol" variant="ordered">
        <li><span class="num">a. </span>텍스트 목록 레벨2</li>
        <li>
          <span class="num">b. </span>텍스트 목록 레벨2
          <KrdsTextList type="ol" variant="ordered">
            <li><span class="num">①</span>텍스트 목록 레벨3</li>
            <li><span class="num">②</span>텍스트 목록 레벨3</li>
          </KrdsTextList>
        </li>
        <li><span class="num">c. </span>텍스트 목록 레벨2</li>
      </KrdsTextList>
    </li>
    <li><span class="num">3. </span>텍스트 목록 레벨1</li>
  </KrdsTextList>
  <br />
  <KrdsTextList type="ul" variant="decimal">
    <li>
      텍스트 목록 레벨1
      <KrdsTextList type="ul" variant="dash">
        <li>
          텍스트 목록 레벨2
          <KrdsTextList type="ol" variant="ordered">
            <li><span class="num">①</span>텍스트 목록 레벨3</li>
            <li><span class="num">②</span>텍스트 목록 레벨3</li>
          </KrdsTextList>
        </li>
      </KrdsTextList>
    </li>
    <li>
      텍스트 목록 레벨1
      <KrdsTextList type="ol" variant="ordered">
        <li>
          <span class="num">a. </span>텍스트 목록 레벨2
          <KrdsTextList type="ul" variant="hollow">
            <li>텍스트 목록 레벨3</li>
            <li>텍스트 목록 레벨3</li>
          </KrdsTextList>
        </li>
      </KrdsTextList>
    </li>
  </KrdsTextList>
</template>

KrdsTextList

Props

이름	타입	기본값	설명
`type`	`"ol" \| "ul"`	`'ul'`	리스트 타입
`variant`	`"decimal" \| "dash" \| "hollow" \| "ordered"`	`'dash'`	스타일 변형

Slots

이름	설명
`default`	목록 항목

텍스트 목록 Text list ​

기본 (대시) ​

순서 있는 목록 ​

KrdsTextList ​