CSS: close-button ​

.instui-close-button — ปุ่มไอคอนโปร่งใสที่วาดสัญลักษณ์ × ของตัวเอง มีสามขนาดและมีเวอร์ชันสำหรับพื้นสี

จะแสดงเสมอเป็นคอนโทรลแบบไอคอนเท่านั้นโดยไม่มีป้ายข้อความที่มองเห็นได้ ดังนั้น aria-label จึงจำเป็น ไม่ใช่เป็นทางเลือก; เปรียบเทียบกับตัวแปร -without-background แบบ ghost ของ button ซึ่งยังคงมีป้ายข้อความ

Source: close-button.css

TIP

การปรับปรุง JS — CSS ของคอมโพเนนต์นี้เรนเดอร์และทำงานได้ด้วยตัวเอง; จับคู่กับ @pantoken/interactions เพื่อเพิ่มพฤติกรรมเชิงโต้ตอบ ดู ตารางตัวปรับแต่งด้านล่าง.

การเข้าถึง ​

ให้ปุ่มแบบไอคอนเท่านั้นมี aria-label (เช่น "Close") และทำเครื่องหมายปุ่มที่ถูกปิดการใช้งานด้วย aria-disabled (หรือ disabled แบบเนทีฟ)

การใช้งาน ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/close-button.css";

ตัวอย่าง ​

html
<button class="instui-close-button -size-sm" aria-label="Close"></button>

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

ตัวปรับแต่งคำอธิบาย
.-color-inverseเลิกใช้ — use .-on-color.
.-on-colorสำหรับปุ่มปิดที่วางบนพื้นผิวที่มีสี (ไม่เป็นกลาง)
.-size-largeใหญ่. ชื่อยาวของ -size-lg.
.-size-lgใหญ่.
.-size-md(ค่าเริ่มต้น) ขนาดกลาง.
.-size-medium(ค่าเริ่มต้น) ขนาดกลาง. ชื่อยาวเป็นนามแฝงของ -size-md.
.-size-smเล็ก.
.-size-smallเล็ก. ชื่อยาวของ -size-sm.

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

องค์ประกอบเทียมคำอธิบาย
::beforeสัญลักษณ์ × ถูกมาสก์ใน currentColor

สถานะ ​

สถานะคำอธิบาย
[aria-disabled="true"]—
:disabled—

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

Tokenชนิดค่า
--instui-component-base-button-border-radius<length>0.75rem
--instui-component-base-button-large-height<length>3rem
--instui-component-base-button-medium-height<length>2.5rem
--instui-component-base-button-primary-ghost-active-background<color>LightDarklight-dark(#1D354F33, rgba(255,255,255,0.1))
--instui-component-base-button-primary-ghost-hover-background<color>LightDarklight-dark(#1D354F1A, rgba(255,255,255,0.1))
--instui-component-base-button-primary-inverse-ghost-active-background<color>rgba(255,255,255,0.1)
--instui-component-base-button-primary-inverse-ghost-hover-background<color>rgba(255,255,255,0.1)
--instui-component-base-button-small-height<length>2rem
--instui-component-icon-base-color<color>LightDarklight-dark(#273540, #ffffff)
--instui-component-icon-disabled-base-color<color>LightDarklight-dark(#8D959F, #576773)
--instui-component-icon-disabled-on-color<color>LightDarklight-dark(#C7CACD, #9EA6AD)
--instui-component-icon-on-color<color>#ffffff
--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

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

  • button — ปุ่มการกระทำทั่วไป