Tag

항목의 분류, 속성 또는 상태를 짧은 텍스트로 표시합니다.

<sy-tag>설치 안내 기본 사용법

Live preview

컴포넌트를 조작하면 여기에 결과가 표시됩니다.

코드 보기

HTML

<sy-tag color="purple" size="medium">디자인</sy-tag>

사용 가이드

분류·필터·상태를 짧은 이름으로 표시합니다. 동작 실행은 Button, 개수 표시는 Badge가 알맞습니다.

선택 가능한 태그

selectable로 필터처럼 켜고 끌 수 있게 합니다.

제거 가능한 태그

removable로 선택값을 목록에서 제거하게 합니다. disabled·readonly로 조작을 제한할 수 있습니다.

예제

분류 색상

텍스트와 함께 의미를 전달합니다.

코드 보기

HTML

<div style="display:flex;flex-wrap:wrap;align-items:center;gap:16px">
  <sy-tag color="gray">gray</sy-tag>
  <sy-tag color="purple">purple</sy-tag>
  <sy-tag color="blue">blue</sy-tag>
  <sy-tag color="green">green</sy-tag>
  <sy-tag color="cyan">cyan</sy-tag>
  <sy-tag color="yellow">yellow</sy-tag>
  <sy-tag color="orange">orange</sy-tag>
  <sy-tag color="red">red</sy-tag>
</div>

크기와 모양

주변 텍스트 크기에 맞춰 선택합니다.

코드 보기

HTML

<div style="display:flex;flex-wrap:wrap;align-items:center;gap:16px">
  <sy-tag
    size="small"
    rounded
    color="purple"
  >Syidax</sy-tag>
  <sy-tag
    size="medium"
    rounded
    color="purple"
  >Syidax</sy-tag>
  <sy-tag
    size="large"
    rounded
    color="purple"
  >Syidax</sy-tag>
</div>

제거할 수 있는 태그

닫기 버튼으로 현재 태그를 제거합니다.

코드 보기

HTML

<div style="display:flex;flex-wrap:wrap;align-items:center;gap:16px">
  <sy-tag removable color="blue">프론트엔드</sy-tag>
  <sy-tag removable color="green">디자인</sy-tag>
</div>

상호작용 상태

선택 가능·비활성·읽기 전용을 구분합니다.

코드 보기

HTML

<div style="display:flex;flex-wrap:wrap;align-items:center;gap:16px">
  <sy-tag selectable>선택</sy-tag>
  <sy-tag disabled removable>비활성</sy-tag>
  <sy-tag readonly removable>읽기 전용</sy-tag>
</div>

이벤트와 전달 값

컴포넌트를 조작하고 최근 이벤트의 이름과 detail 값을 확인하세요. 코드에는 이 컴포넌트와 하위 구성 요소가 보내는 이벤트의 구독 방법이 모두 포함되어 있습니다.

코드 보기

HTML

<sy-tag color="purple" size="medium">디자인</sy-tag>
<output id="demo-events" aria-live="polite">컴포넌트를 조작하면 최근 이벤트와 전달 값이 표시됩니다.
</output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  for (const name of ["selected", "removed"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

프로그램에서 태그 제거

setRemove()로 태그 제거 동작을 실행합니다. 제거 이벤트를 받아 앱의 선택 목록도 함께 갱신하세요.

코드 보기

HTML

<sy-tag removable id="sample">Design</sy-tag>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">태그 제거</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? '완료';
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.setRemove();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

기능별 예제

12개 주제에서 필요한 기능을 선택하세요. 속성 설정, 메서드 호출, 이벤트 결과와 슬롯 구성을 실행 화면과 코드로 확인할 수 있습니다.

기능 찾기

사용 예제 · Overview

선택한 예제를 직접 조작해 보세요. 여러 구성이 있는 주제는 세부 예제를 바꿀 수 있습니다.

코드 보기

HTML

예제를 불러오고 있습니다.