CSS: tag ​

.instui-tag — 키워드 또는 필터용 인라인 칩입니다.

자체 가로 padding을 설정합니다 (-size-sm/-size-lg가 조정합니다); -p-*/-padding-* 간격 유틸리티 수식자를 체이닝하면 해당 내장 값을 재정의합니다.

Source: tag.css

사용법 ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/tag.css";

데모 ​

예제들 ​

html
<span class="instui-tag -size-sm">small</span>

수정자 ​

수정자설명
.-inline텍스트와 인라인으로 배치되며 뒤에 닫기 아이콘이 표시됩니다.
.-readonly읽기 전용(해제 불가) 태그.
.-size-large대형 태그입니다. -size-lg의 긴 형식 별칭입니다.
.-size-lg대형 태그입니다.
.-size-sm소형 태그입니다.
.-size-small소형 태그입니다. -size-sm의 긴 형식 별칭입니다.

의사 요소 ​

의사 요소설명
::after해제 가능한 인라인 태그에 뒤쪽 닫기 아이콘을 렌더링합니다.

사용된 토큰 ​

Token타입값
--instui-component-tag-default-background<color>LightDarklight-dark(#44709F, #345B84)
--instui-component-tag-default-background-hover<color>LightDarklight-dark(#44709F, #3E6895)
--instui-component-tag-default-border-color<color>LightDarklight-dark(#44709F, #345B84)
--instui-component-tag-default-border-radius<length>0.5rem
--instui-component-tag-default-border-style—solid
--instui-component-tag-default-border-width<length>0.0625rem
--instui-component-tag-default-color<color>LightDarklight-dark(#273540, #ffffff)
--instui-component-tag-font-family[ <font-family-name> | <generic-font-family> ]#Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-tag-font-size-large<length>1rem
--instui-component-tag-font-size-medium<length>0.875rem
--instui-component-tag-font-size-small<length>0.75rem
--instui-component-tag-height-large<length>2rem
--instui-component-tag-height-medium<length>1.75rem
--instui-component-tag-height-small<length>1.5rem
--instui-component-tag-inline-background<color>LightDarklight-dark(#44709F, #345B84)
--instui-component-tag-inline-background-hover<color>LightDarklight-dark(#44709F, #3E6895)
--instui-component-tag-inline-border-color<color>LightDarklight-dark(#44709F, #345B84)
--instui-component-tag-inline-border-radius<length>0.25rem
--instui-component-tag-inline-color<color>LightDarklight-dark(#273540, #F2F4F5)
--instui-component-tag-inline-icon-color<color>LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-tag-inline-icon-hover-color<color>LightDarklight-dark(#234465, #ffffff)
--instui-component-tag-max-width<length>10rem
--instui-component-tag-padding-horizontal<length>0.5rem
--instui-component-tag-padding-horizontal-small<length>0.5rem
--instui-icon-x<image>url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%206%2018%22%2F%3E%3Cpath%20d%3D%22m6%206%2012%2012%22%2F%3E%3C%2Fsvg%3E')
--instui-spacing-space-xs<length>0.25rem

관련 항목 ​

  • pill — 읽기 전용 레이블-칩의 대응물.