CSS: responsive

[class*="-hidden-"],[class*="-show-"] — 在主題化斷點尺度內，依視窗寬度或容器寬度顯示/隱藏的類別。

.instui-hidden-max-<bp>/-hidden-min-<bp> 依視窗寬度隱藏；.instui-show-max-<bp>/-show-min-<bp> 則相反（預設隱藏，僅在範圍內透過 display: revert 顯示）；-cq- 變體改為對祖先的 .instui-container 寬度作出反應，而非視窗。刻度等級 xs/sm/md/lg/xl（來源於 IR 的 tray-width 元件 token）各別有一個長形式別名（x-small–x-large）和一個裝置名稱（mobile/phablet/tablet/laptop/desktop）— 兩者皆已不建議使用，改以短名稱為主 — 以及未縮放的主題化 content/content-full-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	當標記的容器處於或低於 content 斷點（68.75em）時隱藏。
.-cq-hidden-max-content-full-width	當標記的容器處於或低於 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	當標記的容器處於或低於 lg 斷點（48em）時隱藏。
.-cq-hidden-max-md	當標記的容器處於或低於 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	當標記的容器處於或低於 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	當標記的容器處於或低於 xl 斷點（62em）時隱藏。
.-cq-hidden-max-xs	當標記的容器處於或低於 xs 斷點（16em）時隱藏。
.-cq-hidden-min-content	當標記的容器處於或高於 content 斷點（68.75em）時隱藏。
.-cq-hidden-min-content-full-width	當標記的容器處於或高於 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	當標記的容器處於或高於 lg 斷點（48em）時隱藏。
.-cq-hidden-min-md	當標記的容器處於或高於 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	當標記的容器處於或高於 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	當標記的容器處於或高於 xl 斷點（62em）時隱藏。
.-cq-hidden-min-xs	當標記的容器處於或高於 xs 斷點（16em）時隱藏。
.-cq-show-max-content	當標記的容器處於或低於 content 斷點（68.75em）時顯示；否則隱藏。
.-cq-show-max-content-full-width	當標記的容器處於或低於 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	當標記的容器處於或低於 lg 斷點（48em）時顯示；否則隱藏。
.-cq-show-max-md	當標記的容器處於或低於 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	當標記的容器處於或低於 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	當標記的容器處於或低於 xl 斷點（62em）時顯示；否則隱藏。
.-cq-show-max-xs	當標記的容器處於或低於 xs 斷點（16em）時顯示；否則隱藏。
.-cq-show-min-content	當標記的容器處於或高於 content 斷點（68.75em）時顯示；否則隱藏。
.-cq-show-min-content-full-width	當標記的容器處於或高於 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	當標記的容器處於或高於 lg 斷點（48em）時顯示；否則隱藏。
.-cq-show-min-md	當標記的容器處於或高於 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	當標記的容器處於或高於 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	當標記的容器處於或高於 xl 斷點（62em）時顯示；否則隱藏。
.-cq-show-min-xs	當標記的容器處於或高於 xs 斷點（16em）時顯示；否則隱藏。
.-hidden-max-content	當視窗處於或低於 content 斷點（68.75em）時隱藏。
.-hidden-max-content-full-width	當視窗處於或低於 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	當視窗處於或低於 lg 斷點（48em）時隱藏。
.-hidden-max-md	當視窗處於或低於 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	當視窗處於或低於 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	當視窗處於或低於 xl 斷點（62em）時隱藏。
.-hidden-max-xs	當視窗處於或低於 xs 斷點（16em）時隱藏。
.-hidden-min-content	當視窗處於或高於 content 斷點（68.75em）時隱藏。
.-hidden-min-content-full-width	當視窗處於或高於 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	當視窗處於或高於 lg 斷點（48em）時隱藏。
.-hidden-min-md	當檢視窗位於或高於 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	當檢視窗位於或高於 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	當檢視窗位於或高於 xl 斷點（62em）時隱藏。
.-hidden-min-xs	當檢視窗位於或高於 xs 斷點（16em）時隱藏。
.-show-max-content	當檢視窗位於或低於 content 斷點（68.75em）時顯示（為 -hidden-min-content 的相反）；否則隱藏。
.-show-max-content-full-width	當檢視窗位於或低於 content-full-width 斷點（98.75em）時顯示（為 -hidden-min-content-full-width 的相反）；否則隱藏。
.-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	當檢視窗位於或低於 lg 斷點（48em）時顯示（為 -hidden-min-lg 的相反）；否則隱藏。
.-show-max-md	當檢視窗位於或低於 md 斷點（30em）時顯示（為 -hidden-min-md 的相反）；否則隱藏。
.-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	當檢視窗位於或低於 sm 斷點（20em）時顯示（為 -hidden-min-sm 的相反）；否則隱藏。
.-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	當檢視窗位於或低於 xl 斷點（62em）時顯示（為 -hidden-min-xl 的相反）；否則隱藏。
.-show-max-xs	當檢視窗位於或低於 xs 斷點（16em）時顯示（為 -hidden-min-xs 的相反）；否則隱藏。
.-show-min-content	當檢視窗位於或高於 content 斷點（68.75em）時顯示（為 -hidden-max-content 的相反）；否則隱藏。
.-show-min-content-full-width	當檢視窗位於或高於 content-full-width 斷點（98.75em）時顯示（為 -hidden-max-content-full-width 的相反）；否則隱藏。
.-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	當檢視窗位於或高於 lg 斷點（48em）時顯示（為 -hidden-max-lg 的相反）；否則隱藏。
.-show-min-md	當檢視窗位於或高於 md 斷點（30em）時顯示（為 -hidden-max-md 的相反）；否則隱藏。
.-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	當檢視窗位於或高於 sm 斷點（20em）時顯示（為 -hidden-max-sm 的相反）；否則隱藏。
.-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	當檢視窗位於或高於 xl 斷點（62em）時顯示（為 -hidden-max-xl 的相反）；否則隱藏。
.-show-min-xs	當檢視窗位於或高於 xs 斷點（16em）時顯示（為 -hidden-max-xs 的相反）；否則隱藏。

自訂屬性

屬性	型別	預設	說明
--pantoken-bp-content	<length>	68.75em	該 content 斷點的值（68.75em，手動撰寫，已套用主題（不在 token IR 中））。覆寫它不會將編譯後的 @media/@container 閾值向上移動。
--pantoken-bp-content-full-width	<length>	98.75em	該 content-full-width 斷點的值（98.75em，手動撰寫，已套用主題（不在 token IR 中））。覆寫它不會將編譯後的 @media/@container 閾值向上移動。
--pantoken-bp-lg	<length>	48em	該 lg 斷點的值（48em，與 --instui-component-tray-width-lg 相同）。覆寫它不會將編譯後的 @media/@container 閾值向上移動。
--pantoken-bp-md	<length>	30em	該 md 斷點的值（30em，與 --instui-component-tray-width-md 相同）。覆寫它不會將編譯後的 @media/@container 閾值向上移動。
--pantoken-bp-sm	<length>	20em	該 sm 斷點的值（20em，與 --instui-component-tray-width-sm 相同）。覆寫它不會將編譯後的 @media/@container 閾值向上移動。
--pantoken-bp-xl	<length>	62em	該 xl 斷點的值（62em，與 --instui-component-tray-width-xl 相同）。覆寫它不會將編譯後的 @media/@container 閾值向上移動。
--pantoken-bp-xs	<length>	16em	該 xs 斷點的值（16em，與 --instui-component-tray-width-xs 相同）。覆寫它不會將編譯後的 @media/@container 閾值向上移動。

條件

型別	查詢	說明
media	(max-width: 16em)	xs 斷點的上限。
media	(min-width: 16em)	xs 斷點的下限。
media	(max-width: 20em)	sm 斷點的上限。
media	(min-width: 20em)	sm 斷點的下限。
media	(max-width: 30em)	md 斷點的上限。
media	(min-width: 30em)	md 斷點的下限。
media	(max-width: 48em)	lg 斷點的上限。
media	(min-width: 48em)	lg 斷點的下限。
media	(max-width: 62em)	xl 斷點的上限。
media	(min-width: 62em)	xl 斷點的下限。
media	(max-width: 68.75em)	content 斷點的上限。
media	(min-width: 68.75em)	content 斷點的下限。
media	(max-width: 98.75em)	content-full-width 斷點的上限。
media	(min-width: 98.75em)	content-full-width 斷點的下限。
container	(max-width: 16em)	xs 斷點的上限，針對標記容器評估。
container	(min-width: 16em)	xs 斷點的下限，針對標記容器評估。
container	(max-width: 20em)	sm 斷點的上限，針對標記容器評估。
container	(min-width: 20em)	sm 斷點的下限，針對標記容器評估。
container	(max-width: 30em)	在已標記的容器上評估的 md 斷點的上界。
container	(min-width: 30em)	在已標記的容器上評估的 md 斷點的下界。
container	(max-width: 48em)	在已標記的容器上評估的 lg 斷點的上界。
container	(min-width: 48em)	在已標記的容器上評估的 lg 斷點的下界。
container	(max-width: 62em)	在已標記的容器上評估的 xl 斷點的上界。
container	(min-width: 62em)	在已標記的容器上評估的 xl 斷點的下界。
container	(max-width: 68.75em)	在已標記的容器上評估的 content 斷點的上界。
container	(min-width: 68.75em)	在已標記的容器上評估的 content 斷點的下界。
container	(max-width: 98.75em)	在已標記的容器上評估的 content-full-width 斷點的上界。
container	(min-width: 98.75em)	在已標記的容器上評估的 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