CSS: tag ​

.instui-tag — Một chip nội tuyến cho từ khóa hoặc bộ lọc.

Đặt padding ngang của chính nó (-size-sm/-size-lg thay đổi kích thước); chuỗi một modifier tiện ích khoảng cách -p-*/-padding-* sẽ ghi đè giá trị mặc định đó.

Source: tag.css

Sử dụng ​

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

Demo ​

Các ví dụ ​

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

Bộ sửa ​

Bộ sửaMô tả
.-inlineHiển thị nội tuyến cùng văn bản và có biểu tượng đóng ở cuối.
.-readonlyNhãn chỉ đọc (không thể đóng).
.-size-largeMột nhãn lớn. Bí danh dạng dài của -size-lg.
.-size-lgMột nhãn lớn.
.-size-smMột nhãn nhỏ.
.-size-smallMột nhãn nhỏ. Bí danh dạng dài của -size-sm.

Phần tử giả ​

Phần tử giảMô tả
::afterHiển thị biểu tượng đóng ở cuối trên nhãn nội tuyến có thể đóng được.

Token tiêu thụ ​

TokenKiểuGiá trị
--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

Liên quan ​

  • pill — Tương đương label-chip chỉ đọc.