KRDS Angular

태그 Tag ​

태그는 키워드 또는 레이블을 사용하여 콘텐츠를 분류하는 수단이다. 콘텐츠 항목에 직접 관련 분류 체계, 데이터 속성을 표시하거나, 목록에서 특정 분류 체계, 데이터 속성을 가진 항목이 선택되었음을 보여주기 위한 태그 그룹으로 사용된다.

KRDS 가이드

기본 ​

<krds-tag>는 삭제 버튼이 함께 표시되는 태그이고, 삭제 버튼을 누르면 (remove)로 클릭 이벤트를 보냅니다. 삭제 버튼은 "커스텀 내용 1 삭제"처럼 태그 내용과 함께 읽혀 어느 태그를 지우는지 알 수 있습니다. 태그는 krdsTagGroup을 붙인 요소로 감쌉니다.

ts
import { Component } from '@angular/core'
import { KrdsTag, KrdsTagGroup } from '@krds.ui/angular'

@Component({
  selector: 'demo-tag-basic',
  imports: [KrdsTag, KrdsTagGroup],
  template: `
    <div krdsTagGroup>
      <krds-tag>버튼</krds-tag>
    </div>
  `
})
export default class TagBasic {}

사이즈 ​

크기는 감싸는 krdsTagGroup의 size로 정합니다.

ts
import { Component } from '@angular/core'
import { KrdsTag, KrdsTagGroup } from '@krds.ui/angular'

@Component({
  selector: 'demo-tag-sizes',
  imports: [KrdsTag, KrdsTagGroup],
  template: `
    <div style="display: flex; flex-direction: column; gap: 1rem">
      @for (size of sizes; track size) {
        <div krdsTagGroup [size]="size">
          <krds-tag>태그</krds-tag>
          <krds-tag>태그</krds-tag>
          <krds-tag>태그</krds-tag>
        </div>
      }
    </div>
  `
})
export default class TagSizes {
  readonly sizes = ['large', 'medium', 'small'] as const
}

링크 태그 ​

기본 <a>에 krdsTag를 붙이면 삭제 버튼 없이 링크로 이동하는 태그가 됩니다. href, target, rel은 기본 속성 그대로 쓰고, 새 창으로 여는 링크는 새 창 링크의 krdsExternal을 함께 붙입니다.

ts
import { Component } from '@angular/core'
import { KrdsExternalLink, KrdsTag, KrdsTagGroup } from '@krds.ui/angular'

@Component({
  selector: 'demo-tag-link',
  imports: [KrdsTag, KrdsTagGroup, KrdsExternalLink],
  template: `
    <div style="display: flex; flex-direction: column; gap: 1rem">
      @for (size of sizes; track size) {
        <div krdsTagGroup [size]="size">
          <a krdsTag href="#">카테고리</a>
          <a krdsTag krdsExternal href="https://example.com">외부 링크</a>
          <a krdsTag href="#">필터 태그</a>
        </div>
      }
    </div>
  `
})
export default class TagLink {
  readonly sizes = ['large', 'medium', 'small'] as const
}

태그 삭제 ​

삭제 버튼은 태그를 직접 지우지 않으므로, (remove)에서 목록을 갱신해 태그를 지웁니다. 누른 삭제 버튼이 태그와 함께 사라지면 초점이 페이지 처음으로 빠지므로, 예제처럼 옆 태그로 초점을 옮겨 줍니다.

ts
import { Component, signal } from '@angular/core'
import { KrdsTag, KrdsTagGroup } from '@krds.ui/angular'

@Component({
  selector: 'demo-tag-remove',
  imports: [KrdsTag, KrdsTagGroup],
  template: `
    <div krdsTagGroup>
      @for (tag of tags(); track tag) {
        <krds-tag (remove)="remove(tag, $event)">{{ tag }}</krds-tag>
      }
      <a krdsTag href="#">링크 태그</a>
    </div>
  `
})
export default class TagRemove {
  readonly tags = signal(['커스텀 내용 1', '커스텀 내용 2'])

  remove(tag: string, event: MouseEvent) {
    // 지운 태그의 다음(없으면 앞) 태그로 초점을 옮겨, 삭제 버튼과 함께 초점이 사라지지 않게 한다
    const item = (event.target as HTMLElement).closest('.krds-btn-tag')!
    const neighbor = (item.nextElementSibling ?? item.previousElementSibling) as HTMLElement | null
    this.tags.update(tags => tags.filter(name => name !== tag))
    ;(neighbor?.querySelector('button') ?? neighbor)?.focus()
  }
}

KrdsTag ​

선택자 krds-tag, a[krdsTag]

Inputs

없음

Outputs

이름값설명
removeMouseEvent삭제 버튼을 클릭했을 때

KrdsTagGroup ​

선택자 [krdsTagGroup]

Inputs

이름타입기본값설명
size'small' | 'medium' | 'large''medium'태그 크기