CSS: responsive

[class*="-hidden-"],[class*="-show-"] — คลาสสำหรับแสดง/ซ่อนตามความกว้างของ viewport หรือ container โดยใช้มาตราส่วน breakpoint ที่มีธีม

.instui-hidden-max-<bp>/-hidden-min-<bp> ซ่อนตามความกว้างของ viewport; .instui-show-max-<bp>/-show-min-<bp> เป็นแบบตรงกันข้าม (ถูกซ่อนตามค่าเริ่มต้น และจะแสดงเฉพาะภายในช่วงผ่าน display: revert); ชุดตัวแปร -cq- ตอบสนองต่อความกว้างของ ancestor แบบ .instui-container แทนที่จะเป็น viewport ช่วงระดับสเกล xs/sm/md/lg/xl (มาจาก token ของ component tray-width ใน IR) แต่ละระดับมีชื่อยาวที่เป็นนามแฝง (x-small–x-large) และชื่ออุปกรณ์ (mobile/phablet/tablet/laptop/desktop) — ทั้งสองถูกเลิกใช้ zug ให้ใช้ชื่อสั้นแทน — รวมทั้งระดับไม่ปรับสเกลที่มีธีม content/content-full-width (max-width ของพื้นที่เนื้อหาหลัก)

Source: index.ts

การใช้งาน

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

ตัวอย่าง

<div class="instui-hidden-max-sm">Hidden at or below the small breakpoint.</div>
<div class="instui-show-min-sm">Shown only at or above the small breakpoint.</div>

ตัวปรับแต่ง

ตัวปรับแต่ง	คำอธิบาย
.-cq-hidden-max-content	ซ่อนเมื่อ container ที่ทำเครื่องหมายมีความกว้างเท่าหรือต่ำกว่า breakpoint content (68.75em)
.-cq-hidden-max-content-full-width	ซ่อนเมื่อ container ที่ทำเครื่องหมายมีความกว้างเท่าหรือต่ำกว่า breakpoint content-full-width (98.75em)
.-cq-hidden-max-desktop	Alias — maps to .-cq-hidden-max-xl.
.-cq-hidden-max-laptop	Alias — maps to .-cq-hidden-max-lg.
.-cq-hidden-max-large	Alias — maps to .-cq-hidden-max-lg.
.-cq-hidden-max-lg	ซ่อนเมื่อ container ที่ทำเครื่องหมายมีความกว้างเท่าหรือต่ำกว่า breakpoint lg (48em)
.-cq-hidden-max-md	ซ่อนเมื่อ container ที่ทำเครื่องหมายมีความกว้างเท่าหรือต่ำกว่า breakpoint md (30em)
.-cq-hidden-max-medium	Alias — maps to .-cq-hidden-max-md.
.-cq-hidden-max-mobile	Alias — maps to .-cq-hidden-max-xs.
.-cq-hidden-max-phablet	Alias — maps to .-cq-hidden-max-sm.
.-cq-hidden-max-sm	ซ่อนเมื่อ container ที่ทำเครื่องหมายมีความกว้างเท่าหรือต่ำกว่า breakpoint sm (20em)
.-cq-hidden-max-small	Alias — maps to .-cq-hidden-max-sm.
.-cq-hidden-max-tablet	Alias — maps to .-cq-hidden-max-md.
.-cq-hidden-max-x-large	Alias — maps to .-cq-hidden-max-xl.
.-cq-hidden-max-x-small	Alias — maps to .-cq-hidden-max-xs.
.-cq-hidden-max-xl	ซ่อนเมื่อ container ที่ทำเครื่องหมายมีความกว้างเท่าหรือต่ำกว่า breakpoint xl (62em)
.-cq-hidden-max-xs	ซ่อนเมื่อ container ที่ทำเครื่องหมายมีความกว้างเท่าหรือต่ำกว่า breakpoint xs (16em)
.-cq-hidden-min-content	ซ่อนเมื่อ container ที่ทำเครื่องหมายมีความกว้างเท่าหรือมากกว่า breakpoint content (68.75em)
.-cq-hidden-min-content-full-width	ซ่อนเมื่อ container ที่ทำเครื่องหมายมีความกว้างเท่าหรือมากกว่า breakpoint content-full-width (98.75em)
.-cq-hidden-min-desktop	Alias — maps to .-cq-hidden-min-xl.
.-cq-hidden-min-laptop	Alias — maps to .-cq-hidden-min-lg.
.-cq-hidden-min-large	Alias — maps to .-cq-hidden-min-lg.
.-cq-hidden-min-lg	ซ่อนเมื่อ container ที่ทำเครื่องหมายมีความกว้างเท่าหรือมากกว่า breakpoint lg (48em)
.-cq-hidden-min-md	ซ่อนเมื่อ container ที่ทำเครื่องหมายมีความกว้างเท่าหรือมากกว่า breakpoint md (30em)
.-cq-hidden-min-medium	Alias — maps to .-cq-hidden-min-md.
.-cq-hidden-min-mobile	Alias — maps to .-cq-hidden-min-xs.
.-cq-hidden-min-phablet	Alias — maps to .-cq-hidden-min-sm.
.-cq-hidden-min-sm	ซ่อนเมื่อ container ที่ทำเครื่องหมายมีความกว้างเท่าหรือมากกว่า breakpoint sm (20em)
.-cq-hidden-min-small	Alias — maps to .-cq-hidden-min-sm.
.-cq-hidden-min-tablet	Alias — maps to .-cq-hidden-min-md.
.-cq-hidden-min-x-large	Alias — maps to .-cq-hidden-min-xl.
.-cq-hidden-min-x-small	Alias — maps to .-cq-hidden-min-xs.
.-cq-hidden-min-xl	ซ่อนเมื่อ container ที่ทำเครื่องหมายมีความกว้างเท่าหรือมากกว่า breakpoint xl (62em)
.-cq-hidden-min-xs	ซ่อนเมื่อ container ที่ทำเครื่องหมายมีความกว้างเท่าหรือมากกว่า breakpoint xs (16em)
.-cq-show-max-content	แสดงเมื่อ container ที่ทำเครื่องหมายมีความกว้างเท่าหรือต่ำกว่า content (68.75em); ซ่อนในกรณีอื่น
.-cq-show-max-content-full-width	แสดงเมื่อ container ที่ทำเครื่องหมายมีความกว้างเท่าหรือต่ำกว่า content-full-width (98.75em); ซ่อนในกรณีอื่น
.-cq-show-max-desktop	Alias — maps to .-cq-show-max-xl.
.-cq-show-max-laptop	Alias — maps to .-cq-show-max-lg.
.-cq-show-max-large	Alias — maps to .-cq-show-max-lg.
.-cq-show-max-lg	แสดงเมื่อ container ที่ทำเครื่องหมายมีความกว้างเท่าหรือต่ำกว่า lg (48em); ซ่อนในกรณีอื่น
.-cq-show-max-md	แสดงเมื่อ container ที่ทำเครื่องหมายมีความกว้างเท่าหรือต่ำกว่า md (30em); ซ่อนในกรณีอื่น
.-cq-show-max-medium	Alias — maps to .-cq-show-max-md.
.-cq-show-max-mobile	Alias — maps to .-cq-show-max-xs.
.-cq-show-max-phablet	Alias — maps to .-cq-show-max-sm.
.-cq-show-max-sm	แสดงเมื่อ container ที่ทำเครื่องหมายมีความกว้างเท่าหรือต่ำกว่า sm (20em); ซ่อนในกรณีอื่น
.-cq-show-max-small	Alias — maps to .-cq-show-max-sm.
.-cq-show-max-tablet	Alias — maps to .-cq-show-max-md.
.-cq-show-max-x-large	Alias — maps to .-cq-show-max-xl.
.-cq-show-max-x-small	Alias — maps to .-cq-show-max-xs.
.-cq-show-max-xl	แสดงเมื่อ container ที่ทำเครื่องหมายมีความกว้างเท่าหรือต่ำกว่า xl (62em); ซ่อนในกรณีอื่น
.-cq-show-max-xs	แสดงเมื่อ container ที่ทำเครื่องหมายมีความกว้างเท่าหรือต่ำกว่า xs (16em); ซ่อนในกรณีอื่น
.-cq-show-min-content	แสดงเมื่อ container ที่ทำเครื่องหมายมีความกว้างเท่าหรือมากกว่า content (68.75em); ซ่อนในกรณีอื่น
.-cq-show-min-content-full-width	แสดงเมื่อ container ที่ทำเครื่องหมายมีความกว้างเท่าหรือมากกว่า content-full-width (98.75em); ซ่อนในกรณีอื่น
.-cq-show-min-desktop	Alias — maps to .-cq-show-min-xl.
.-cq-show-min-laptop	Alias — maps to .-cq-show-min-lg.
.-cq-show-min-large	Alias — maps to .-cq-show-min-lg.
.-cq-show-min-lg	แสดงเมื่อ container ที่ทำเครื่องหมายมีความกว้างเท่าหรือมากกว่า lg (48em); ซ่อนในกรณีอื่น
.-cq-show-min-md	แสดงเมื่อ container ที่ทำเครื่องหมายมีความกว้างเท่าหรือมากกว่า md (30em); ซ่อนในกรณีอื่น
.-cq-show-min-medium	Alias — maps to .-cq-show-min-md.
.-cq-show-min-mobile	Alias — maps to .-cq-show-min-xs.
.-cq-show-min-phablet	Alias — maps to .-cq-show-min-sm.
.-cq-show-min-sm	แสดงเมื่อ container ที่ทำเครื่องหมายมีความกว้างเท่าหรือมากกว่า sm (20em); ซ่อนในกรณีอื่น
.-cq-show-min-small	Alias — maps to .-cq-show-min-sm.
.-cq-show-min-tablet	Alias — maps to .-cq-show-min-md.
.-cq-show-min-x-large	Alias — maps to .-cq-show-min-xl.
.-cq-show-min-x-small	Alias — maps to .-cq-show-min-xs.
.-cq-show-min-xl	แสดงเมื่อ container ที่ทำเครื่องหมายมีความกว้างเท่าหรือมากกว่า xl (62em); ซ่อนในกรณีอื่น
.-cq-show-min-xs	แสดงเมื่อ container ที่ทำเครื่องหมายมีความกว้างเท่าหรือมากกว่า xs (16em); ซ่อนในกรณีอื่น
.-hidden-max-content	ซ่อนเมื่อ viewport มีความกว้างเท่าหรือต่ำกว่า breakpoint content (68.75em)
.-hidden-max-content-full-width	ซ่อนเมื่อ viewport มีความกว้างเท่าหรือต่ำกว่า breakpoint content-full-width (98.75em)
.-hidden-max-desktop	Alias — maps to .-hidden-max-xl.
.-hidden-max-laptop	Alias — maps to .-hidden-max-lg.
.-hidden-max-large	Alias — maps to .-hidden-max-lg.
.-hidden-max-lg	ซ่อนเมื่อ viewport มีความกว้างเท่าหรือต่ำกว่า breakpoint lg (48em)
.-hidden-max-md	ซ่อนเมื่อ viewport มีความกว้างเท่าหรือต่ำกว่า breakpoint md (30em)
.-hidden-max-medium	Alias — maps to .-hidden-max-md.
.-hidden-max-mobile	Alias — maps to .-hidden-max-xs.
.-hidden-max-phablet	Alias — maps to .-hidden-max-sm.
.-hidden-max-sm	ซ่อนเมื่อ viewport มีความกว้างเท่าหรือต่ำกว่า breakpoint sm (20em)
.-hidden-max-small	Alias — maps to .-hidden-max-sm.
.-hidden-max-tablet	Alias — maps to .-hidden-max-md.
.-hidden-max-x-large	Alias — maps to .-hidden-max-xl.
.-hidden-max-x-small	Alias — maps to .-hidden-max-xs.
.-hidden-max-xl	ซ่อนเมื่อ viewport มีความกว้างเท่าหรือต่ำกว่า breakpoint xl (62em)
.-hidden-max-xs	ซ่อนเมื่อ viewport มีความกว้างเท่าหรือต่ำกว่า breakpoint xs (16em)
.-hidden-min-content	ซ่อนเมื่อ viewport มีความกว้างเท่าหรือมากกว่า breakpoint content (68.75em)
.-hidden-min-content-full-width	ซ่อนเมื่อ viewport มีความกว้างเท่าหรือมากกว่า breakpoint content-full-width (98.75em)
.-hidden-min-desktop	Alias — maps to .-hidden-min-xl.
.-hidden-min-laptop	Alias — maps to .-hidden-min-lg.
.-hidden-min-large	Alias — maps to .-hidden-min-lg.
.-hidden-min-lg	ซ่อนเมื่อ viewport มีความกว้างเท่าหรือมากกว่า breakpoint lg (48em)
.-hidden-min-md	ซ่อนเมื่อขนาดหน้าต่างแสดงผล (viewport) อยู่ที่หรือสูงกว่า breakpoint md (30em).
.-hidden-min-medium	Alias — maps to .-hidden-min-md.
.-hidden-min-mobile	Alias — maps to .-hidden-min-xs.
.-hidden-min-phablet	Alias — maps to .-hidden-min-sm.
.-hidden-min-sm	ซ่อนเมื่อขนาดหน้าต่างแสดงผล (viewport) อยู่ที่หรือสูงกว่า breakpoint sm (20em).
.-hidden-min-small	Alias — maps to .-hidden-min-sm.
.-hidden-min-tablet	Alias — maps to .-hidden-min-md.
.-hidden-min-x-large	Alias — maps to .-hidden-min-xl.
.-hidden-min-x-small	Alias — maps to .-hidden-min-xs.
.-hidden-min-xl	ซ่อนเมื่อขนาดหน้าต่างแสดงผล (viewport) อยู่ที่หรือสูงกว่า breakpoint xl (62em).
.-hidden-min-xs	ซ่อนเมื่อขนาดหน้าต่างแสดงผล (viewport) อยู่ที่หรือสูงกว่า breakpoint xs (16em).
.-show-max-content	แสดง (ตรงข้ามกับ -hidden-min-content) เมื่อขนาดหน้าต่างแสดงผล (viewport) อยู่ที่หรือต่ำกว่า breakpoint content (68.75em); ซ่อนในกรณีอื่น ๆ.
.-show-max-content-full-width	แสดง (ตรงข้ามกับ -hidden-min-content-full-width) เมื่อขนาดหน้าต่างแสดงผล (viewport) อยู่ที่หรือต่ำกว่า breakpoint content-full-width (98.75em); ซ่อนในกรณีอื่น ๆ.
.-show-max-desktop	Alias — maps to .-show-max-xl.
.-show-max-laptop	Alias — maps to .-show-max-lg.
.-show-max-large	Alias — maps to .-show-max-lg.
.-show-max-lg	แสดง (ตรงข้ามกับ -hidden-min-lg) เมื่อขนาดหน้าต่างแสดงผล (viewport) อยู่ที่หรือต่ำกว่า breakpoint lg (48em); ซ่อนในกรณีอื่น ๆ.
.-show-max-md	แสดง (ตรงข้ามกับ -hidden-min-md) เมื่อขนาดหน้าต่างแสดงผล (viewport) อยู่ที่หรือต่ำกว่า breakpoint md (30em); ซ่อนในกรณีอื่น ๆ.
.-show-max-medium	Alias — maps to .-show-max-md.
.-show-max-mobile	Alias — maps to .-show-max-xs.
.-show-max-phablet	Alias — maps to .-show-max-sm.
.-show-max-sm	แสดง (ตรงข้ามกับ -hidden-min-sm) เมื่อขนาดหน้าต่างแสดงผล (viewport) อยู่ที่หรือต่ำกว่า breakpoint sm (20em); ซ่อนในกรณีอื่น ๆ.
.-show-max-small	Alias — maps to .-show-max-sm.
.-show-max-tablet	Alias — maps to .-show-max-md.
.-show-max-x-large	Alias — maps to .-show-max-xl.
.-show-max-x-small	Alias — maps to .-show-max-xs.
.-show-max-xl	แสดง (ตรงข้ามกับ -hidden-min-xl) เมื่อขนาดหน้าต่างแสดงผล (viewport) อยู่ที่หรือต่ำกว่า breakpoint xl (62em); ซ่อนในกรณีอื่น ๆ.
.-show-max-xs	แสดง (ตรงข้ามกับ -hidden-min-xs) เมื่อขนาดหน้าต่างแสดงผล (viewport) อยู่ที่หรือต่ำกว่า breakpoint xs (16em); ซ่อนในกรณีอื่น ๆ.
.-show-min-content	แสดง (ตรงข้ามกับ -hidden-max-content) เมื่อขนาดหน้าต่างแสดงผล (viewport) อยู่ที่หรือสูงกว่า breakpoint content (68.75em); ซ่อนในกรณีอื่น ๆ.
.-show-min-content-full-width	แสดง (ตรงข้ามกับ -hidden-max-content-full-width) เมื่อขนาดหน้าต่างแสดงผล (viewport) อยู่ที่หรือสูงกว่า breakpoint content-full-width (98.75em); ซ่อนในกรณีอื่น ๆ.
.-show-min-desktop	Alias — maps to .-show-min-xl.
.-show-min-laptop	Alias — maps to .-show-min-lg.
.-show-min-large	Alias — maps to .-show-min-lg.
.-show-min-lg	แสดง (ตรงข้ามกับ -hidden-max-lg) เมื่อขนาดหน้าต่างแสดงผล (viewport) อยู่ที่หรือสูงกว่า breakpoint lg (48em); ซ่อนในกรณีอื่น ๆ.
.-show-min-md	แสดง (ตรงข้ามกับ -hidden-max-md) เมื่อขนาดหน้าต่างแสดงผล (viewport) อยู่ที่หรือสูงกว่า breakpoint md (30em); ซ่อนในกรณีอื่น ๆ.
.-show-min-medium	Alias — maps to .-show-min-md.
.-show-min-mobile	Alias — maps to .-show-min-xs.
.-show-min-phablet	Alias — maps to .-show-min-sm.
.-show-min-sm	แสดง (ตรงข้ามกับ -hidden-max-sm) เมื่อขนาดหน้าต่างแสดงผล (viewport) อยู่ที่หรือสูงกว่า breakpoint sm (20em); ซ่อนในกรณีอื่น ๆ.
.-show-min-small	Alias — maps to .-show-min-sm.
.-show-min-tablet	Alias — maps to .-show-min-md.
.-show-min-x-large	Alias — maps to .-show-min-xl.
.-show-min-x-small	Alias — maps to .-show-min-xs.
.-show-min-xl	แสดง (ตรงข้ามกับ -hidden-max-xl) เมื่อขนาดหน้าต่างแสดงผล (viewport) อยู่ที่หรือสูงกว่า breakpoint xl (62em); ซ่อนในกรณีอื่น ๆ.
.-show-min-xs	แสดง (ตรงข้ามกับ -hidden-max-xs) เมื่อขนาดหน้าต่างแสดงผล (viewport) อยู่ที่หรือสูงกว่า breakpoint xs (16em); ซ่อนในกรณีอื่น ๆ.

พร็อพเพอร์ตีที่กำหนดเอง

คุณสมบัติ	ชนิด	ค่าเริ่มต้น	คำอธิบาย
--pantoken-bp-content	<length>	68.75em	ค่าของ breakpoint content (68.75em, เขียนด้วยมือ, ธีมแล้ว (ไม่รวมใน token IR)). การ override ค่านี้จะไม่ทำให้เกณฑ์ที่คอมไพล์แล้ว @media/@container ขยับขึ้นไปสูงกว่า.
--pantoken-bp-content-full-width	<length>	98.75em	ค่าของ breakpoint content-full-width (98.75em, เขียนด้วยมือ, ธีมแล้ว (ไม่รวมใน token IR)). การ override ค่านี้จะไม่ทำให้เกณฑ์ที่คอมไพล์แล้ว @media/@container ขยับขึ้นไปสูงกว่า.
--pantoken-bp-lg	<length>	48em	ค่าของ breakpoint lg (48em, สะท้อนค่า --instui-component-tray-width-lg). การ override ค่านี้จะไม่ทำให้เกณฑ์ที่คอมไพล์แล้ว @media/@container ขยับขึ้นไปสูงกว่า.
--pantoken-bp-md	<length>	30em	ค่าของ breakpoint md (30em, สะท้อนค่า --instui-component-tray-width-md). การ override ค่านี้จะไม่ทำให้เกณฑ์ที่คอมไพล์แล้ว @media/@container ขยับขึ้นไปสูงกว่า.
--pantoken-bp-sm	<length>	20em	ค่าของ breakpoint sm (20em, สะท้อนค่า --instui-component-tray-width-sm). การ override ค่านี้จะไม่ทำให้เกณฑ์ที่คอมไพล์แล้ว @media/@container ขยับขึ้นไปสูงกว่า.
--pantoken-bp-xl	<length>	62em	ค่าของ breakpoint xl (62em, สะท้อนค่า --instui-component-tray-width-xl). การ override ค่านี้จะไม่ทำให้เกณฑ์ที่คอมไพล์แล้ว @media/@container ขยับขึ้นไปสูงกว่า.
--pantoken-bp-xs	<length>	16em	ค่าของ breakpoint xs (16em, สะท้อนค่า --instui-component-tray-width-xs). การ override ค่านี้จะไม่ทำให้เกณฑ์ที่คอมไพล์แล้ว @media/@container ขยับขึ้นไปสูงกว่า.

เงื่อนไข

ชนิด	การค้นหา	คำอธิบาย
media	(max-width: 16em)	ขอบบนของ breakpoint xs.
media	(min-width: 16em)	ขอบล่างของ breakpoint xs.
media	(max-width: 20em)	ขอบบนของ breakpoint sm.
media	(min-width: 20em)	ขอบล่างของ breakpoint sm.
media	(max-width: 30em)	ขอบบนของ breakpoint md.
media	(min-width: 30em)	ขอบล่างของ breakpoint md.
media	(max-width: 48em)	ขอบบนของ breakpoint lg.
media	(min-width: 48em)	ขอบล่างของ breakpoint lg.
media	(max-width: 62em)	ขอบบนของ breakpoint xl.
media	(min-width: 62em)	ขอบล่างของ breakpoint xl.
media	(max-width: 68.75em)	ขอบบนของ breakpoint content.
media	(min-width: 68.75em)	ขอบล่างของ breakpoint content.
media	(max-width: 98.75em)	ขอบบนของ breakpoint content-full-width.
media	(min-width: 98.75em)	ขอบล่างของ breakpoint content-full-width.
container	(max-width: 16em)	ขอบบนของ breakpoint xs ที่ถูกประเมินเทียบกับคอนเทนเนอร์ที่ถูกทำเครื่องหมาย.
container	(min-width: 16em)	ขอบล่างของ breakpoint xs ที่ถูกประเมินเทียบกับคอนเทนเนอร์ที่ถูกทำเครื่องหมาย.
container	(max-width: 20em)	ขอบบนของ breakpoint sm ที่ถูกประเมินเทียบกับคอนเทนเนอร์ที่ถูกทำเครื่องหมาย.
container	(min-width: 20em)	ขอบล่างของ breakpoint sm ที่ถูกประเมินเทียบกับคอนเทนเนอร์ที่ถูกทำเครื่องหมาย.
container	(max-width: 30em)	ขอบบนของ breakpoint md ที่ถูกประเมินเทียบกับคอนเทนเนอร์ที่ถูกทำเครื่องหมาย
container	(min-width: 30em)	ขอบล่างของ breakpoint md ที่ถูกประเมินเทียบกับคอนเทนเนอร์ที่ถูกทำเครื่องหมาย
container	(max-width: 48em)	ขอบบนของ breakpoint lg ที่ถูกประเมินเทียบกับคอนเทนเนอร์ที่ถูกทำเครื่องหมาย
container	(min-width: 48em)	ขอบล่างของ breakpoint lg ที่ถูกประเมินเทียบกับคอนเทนเนอร์ที่ถูกทำเครื่องหมาย
container	(max-width: 62em)	ขอบบนของ breakpoint xl ที่ถูกประเมินเทียบกับคอนเทนเนอร์ที่ถูกทำเครื่องหมาย
container	(min-width: 62em)	ขอบล่างของ breakpoint xl ที่ถูกประเมินเทียบกับคอนเทนเนอร์ที่ถูกทำเครื่องหมาย
container	(max-width: 68.75em)	ขอบบนของ breakpoint content ที่ถูกประเมินเทียบกับคอนเทนเนอร์ที่ถูกทำเครื่องหมาย
container	(min-width: 68.75em)	ขอบล่างของ breakpoint content ที่ถูกประเมินเทียบกับคอนเทนเนอร์ที่ถูกทำเครื่องหมาย
container	(max-width: 98.75em)	ขอบบนของ breakpoint content-full-width ที่ถูกประเมินเทียบกับคอนเทนเนอร์ที่ถูกทำเครื่องหมาย
container	(min-width: 98.75em)	ขอบล่างของ breakpoint content-full-width ที่ถูกประเมินเทียบกับคอนเทนเนอร์ที่ถูกทำเครื่องหมาย

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

Token	ชนิด	ค่า
--instui-component-tray-width-lg	<length>	48em
--instui-component-tray-width-md	<length>	30em
--instui-component-tray-width-sm	<length>	20em
--instui-component-tray-width-xl	<length>	62em
--instui-component-tray-width-xs	<length>	16em