CSS: pill ​

.instui-pill — ป้ายสถานะขนาดกะทัดรัด; เพิ่มสัญลักษณ์นำหน้าด้วยรูปแบบร่วม -icon-<name>.

ไม่เหมือนกับ badge ซึ่งแสดงจำนวน หรือ tag ซึ่งสามารถลบได้, ปิ้วเป็นป้ายสถานะแบบคงที่; สัญลักษณ์นำหน้าจะเป็น ::before ที่ถูกมาสก์ ไม่ใช่ <img>.

Source: pill.css

การใช้งาน ​

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

ตัวอย่าง ​

html
<div class="instui-view --display-flex --gap-md">
  <span class="instui-pill -color-success -icon-check">เผยแพร่</span>
  <span class="instui-pill">ร่าง</span>
  <span class="instui-pill -color-info">อยู่ระหว่างการตรวจสอบ</span>
  <span class="instui-pill -color-warning">ล้าสมัย</span>
  <span class="instui-pill -color-danger">ถูกบล็อก</span>
  <span class="instui-pill -color-violet">พาสเทล</span>
</div>

ตัวปรับแต่ง ​

ตัวปรับแต่งคำอธิบาย
.-color-auroraสถานะข้อผิดพลาด.
.-color-dangerสถานะข้อผิดพลาด.
.-color-infoสถานะข้อมูล.
.-color-neutralสถานะข้อมูล.
.-color-orangeสีพาเล็ตต์ Orange.
.-color-plumสถานะเน้นสีพลัม.
.-color-seaสถานะเน้นสีทะเล.
.-color-skyสถานะเน้นสีท้องฟ้า.
.-color-stoneสถานะเตือนภัย.
.-color-successสถานะเชิงบวก.
.-color-violetสถานะเน้นสีไวโอเล็ต.
.-color-warningสถานะเตือนภัย.
.-icon-*สัญลักษณ์นำหน้าจากชุดไอคอน (เช่น -icon-check), วาดก่อนป้ายข้อความ.
.-size-largeตัวเลขเมตริกขนาดใหญ่.
.-size-medium(ค่าเริ่มต้น) ขนาดกลาง.
.-size-x-smallขนาดพิลล์ที่เล็กที่สุด.

องค์ประกอบเทียม ​

องค์ประกอบเทียมคำอธิบาย
::beforeสัญลักษณ์ไอคอนนำหน้า ขนาดและระยะห่างปรับให้ตรงกับปิ้ว.

โทเค็นที่ใช้ ​

Tokenชนิดค่า
--instui-component-pill-aurora-background-color<color>LightDarklight-dark(#C8F3DF, #01442F)
--instui-component-pill-aurora-border-color—color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--instui-component-pill-aurora-text-color<color>LightDarklight-dark(#007352, #2BC692)
--instui-component-pill-base-border-color—color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--instui-component-pill-base-text-color<color>LightDarklight-dark(#273540, #F2F4F5)
--instui-component-pill-border-radius<length>999rem
--instui-component-pill-border-style—solid
--instui-component-pill-border-width<length>0.0625rem
--instui-component-pill-error-background-color<color>#E62429
--instui-component-pill-error-border-color—color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--instui-component-pill-error-text-color<color>#ffffff
--instui-component-pill-font-family[ <font-family-name> | <generic-font-family> ]#Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-pill-gap-content<length>0.125rem
--instui-component-pill-gap-icon-label<length>0.25rem
--instui-component-pill-gap-icon-label-large<length>0.5rem
--instui-component-pill-gap-icon-label-medium<length>0.5rem
--instui-component-pill-height<length>1.5rem
--instui-component-pill-height-large<length>2rem
--instui-component-pill-height-medium<length>1.75rem
--instui-component-pill-height-x-small<length>1.25rem
--instui-component-pill-info-background-color<color>LightDarklight-dark(#DEEBFF, #123E62)
--instui-component-pill-info-border-color—color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--instui-component-pill-info-text-color<color>LightDarklight-dark(#2369A4, #7FB4F1)
--instui-component-pill-line-height<length>0.875rem
--instui-component-pill-max-width<length>240px
--instui-component-pill-neutral-background-color<color>LightDarklight-dark(#E8EAEC, #2D3D49)
--instui-component-pill-orange-background-color<color>LightDarklight-dark(#FFE4D7, #682400)
--instui-component-pill-orange-border-color—color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--instui-component-pill-orange-text-color<color>LightDarklight-dark(#B23F01, #FF905A)
--instui-component-pill-padding-horizontal<length>0.5rem
--instui-component-pill-padding-horizontal-large<length>0.75rem
--instui-component-pill-padding-horizontal-medium<length>0.75rem
--instui-component-pill-padding-vertical<length>0.25rem
--instui-component-pill-plum-background-color<color>LightDarklight-dark(#FAE3EF, #651E4C)
--instui-component-pill-plum-border-color—color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--instui-component-pill-plum-text-color<color>LightDarklight-dark(#A83780, #EC93C6)
--instui-component-pill-sea-background-color<color>LightDarklight-dark(#CFF0F6, #00424A)
--instui-component-pill-sea-border-color—color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--instui-component-pill-sea-text-color<color>LightDarklight-dark(#02717E, #3CC0D4)
--instui-component-pill-sky-background-color<color>LightDarklight-dark(#D6EDFE, #084059)
--instui-component-pill-sky-border-color—color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--instui-component-pill-sky-text-color<color>LightDarklight-dark(#116D94, #63B9EB)
--instui-component-pill-status-label-font-weight<integer>400
--instui-component-pill-stone-background-color<color>LightDarklight-dark(#E9E9E9, #3A3A3A)
--instui-component-pill-stone-border-color—color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--instui-component-pill-stone-text-color<color>LightDarklight-dark(#646464, #AFAFAF)
--instui-component-pill-success-background-color<color>LightDarklight-dark(#CAF4D0, #01451B)
--instui-component-pill-success-border-color—color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--instui-component-pill-success-text-color<color>LightDarklight-dark(#017533, #61C378)
--instui-component-pill-text-font-size<length>0.75rem
--instui-component-pill-text-font-size-large<length>1rem
--instui-component-pill-text-font-size-medium<length>0.875rem
--instui-component-pill-text-font-weight<integer>400
--instui-component-pill-violet-background-color<color>LightDarklight-dark(#F3E5F7, #522965)
--instui-component-pill-violet-border-color—color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--instui-component-pill-violet-text-color<color>LightDarklight-dark(#8A49A7, #CAA1D9)
--instui-component-pill-warning-background-color<color>LightDarklight-dark(#F7E7CF, #4D3600)
--instui-component-pill-warning-border-color—color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--instui-component-pill-warning-text-color<color>LightDarklight-dark(#664800, #E0A300)
--instui-font-size-text-xs<length>0.75rem

ที่เกี่ยวข้อง ​

  • badge — badge คือคู่เทียบของจำนวนหรือการแจ้งเตือน。
  • tag — tag คือคู่เทียบแบบฟอร์มที่ลบได้.