KRDS Angular

텍스트 목록 Text list ​

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

KRDS 가이드

기본 (대시) ​

기본 <ul>·<ol>에 krdsTextList를 붙이고, variant로 글머리 스타일(dash 기본, hollow, decimal, ordered)을 정합니다. 항목(<li>) 안에 krdsTextList 목록을 넣어 3단계까지 중첩합니다.

ts
import { Component } from '@angular/core'
import { KrdsTextList } from '@krds.ui/angular'

@Component({
  selector: 'demo-text-list-basic',
  imports: [KrdsTextList],
  template: `
    <ul krdsTextList variant="dash">
      <li>텍스트 목록 레벨1</li>
      <li>
        텍스트 목록 레벨1
        <ul krdsTextList variant="hollow">
          <li>텍스트 목록 레벨2</li>
          <li>텍스트 목록 레벨2</li>
        </ul>
      </li>
      <li>텍스트 목록 레벨1</li>
    </ul>
  `
})
export default class TextListBasic {}

순서 있는 목록 ​

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

ts
import { Component } from '@angular/core'
import { KrdsTextList } from '@krds.ui/angular'

@Component({
  selector: 'demo-text-list-ordered',
  imports: [KrdsTextList],
  template: `
    <ol krdsTextList variant="ordered">
      <li><span class="num">1. </span>텍스트 목록 레벨1</li>
      <li>
        <span class="num">2. </span>텍스트 목록 레벨1
        <ol krdsTextList variant="ordered">
          <li><span class="num">a. </span>텍스트 목록 레벨2</li>
          <li>
            <span class="num">b. </span>텍스트 목록 레벨2
            <ol krdsTextList variant="ordered">
              <li><span class="num">①</span>텍스트 목록 레벨3</li>
              <li><span class="num">②</span>텍스트 목록 레벨3</li>
            </ol>
          </li>
          <li><span class="num">c. </span>텍스트 목록 레벨2</li>
        </ol>
      </li>
      <li><span class="num">3. </span>텍스트 목록 레벨1</li>
    </ol>
    <br />
    <ul krdsTextList variant="decimal">
      <li>
        텍스트 목록 레벨1
        <ul krdsTextList variant="dash">
          <li>
            텍스트 목록 레벨2
            <ol krdsTextList variant="ordered">
              <li><span class="num">①</span>텍스트 목록 레벨3</li>
              <li><span class="num">②</span>텍스트 목록 레벨3</li>
            </ol>
          </li>
        </ul>
      </li>
      <li>
        텍스트 목록 레벨1
        <ol krdsTextList variant="ordered">
          <li>
            <span class="num">a. </span>텍스트 목록 레벨2
            <ul krdsTextList variant="hollow">
              <li>텍스트 목록 레벨3</li>
              <li>텍스트 목록 레벨3</li>
            </ul>
          </li>
        </ol>
      </li>
    </ul>
  `
})
export default class TextListOrdered {}

KrdsTextList ​

선택자 ul[krdsTextList], ol[krdsTextList]

Inputs

이름타입기본값설명
variant'decimal' | 'dash' | 'hollow' | 'ordered''dash'스타일