CSS: responsive

[class*="-hidden-"],[class*="-show-"] — Kelas tunjuk/sembunyi berdasarkan lebar viewport atau kontena merentasi skala titik hentian bertema.

.instui-hidden-max-<bp>/-hidden-min-<bp> sembunyikan mengikut lebar viewport; .instui-show-max-<bp>/-show-min-<bp> adalah songsang (disembunyikan secara lalai, ditunjukkan hanya dalam julat melalui display: revert); variasi -cq- bertindak balas kepada lebar nenek moyang .instui-container sebaliknya, bukan lebar viewport. Tier skala xs/sm/md/lg/xl (sumber daripada token komponen tray-width IR) masing-masing diwakili alias kepada ejaan bentuk panjang (x-small–x-large) dan nama peranti (mobile/phablet/tablet/laptop/desktop) — kedua-duanya sudah lapuk demi nama pendek — serta tier bertema tak diskala content/content-full-width (lebar maksima kawasan kandungan utama).

Source: index.ts

Penggunaan

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

Contoh

<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>

Pemodifikasi

Pemodifikasi	Penerangan
.-cq-hidden-max-content	Sembunyikan apabila kontena yang ditandakan berada pada atau di bawah titik hentian content (68.75em).
.-cq-hidden-max-content-full-width	Sembunyikan apabila kontena yang ditandakan berada pada atau di bawah titik hentian 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	Sembunyikan apabila kontena yang ditandakan berada pada atau di bawah titik hentian lg (48em).
.-cq-hidden-max-md	Sembunyikan apabila kontena yang ditandakan berada pada atau di bawah titik hentian 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	Sembunyikan apabila kontena yang ditandakan berada pada atau di bawah titik hentian 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	Sembunyikan apabila kontena yang ditandakan berada pada atau di bawah titik hentian xl (62em).
.-cq-hidden-max-xs	Sembunyikan apabila kontena yang ditandakan berada pada atau di bawah titik hentian xs (16em).
.-cq-hidden-min-content	Sembunyikan apabila kontena yang ditandakan berada pada atau di atas titik hentian content (68.75em).
.-cq-hidden-min-content-full-width	Sembunyikan apabila kontena yang ditandakan berada pada atau di atas titik hentian 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	Sembunyikan apabila kontena yang ditandakan berada pada atau di atas titik hentian lg (48em).
.-cq-hidden-min-md	Sembunyikan apabila kontena yang ditandakan berada pada atau di atas titik hentian 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	Sembunyikan apabila kontena yang ditandakan berada pada atau di atas titik hentian 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	Sembunyikan apabila kontena yang ditandakan berada pada atau di atas titik hentian xl (62em).
.-cq-hidden-min-xs	Sembunyikan apabila kontena yang ditandakan berada pada atau di atas titik hentian xs (16em).
.-cq-show-max-content	Tunjukkan apabila kontena yang ditandakan berada pada atau di bawah titik hentian content (68.75em); disembunyikan jika tidak.
.-cq-show-max-content-full-width	Tunjukkan apabila kontena yang ditandakan berada pada atau di bawah titik hentian content-full-width (98.75em); disembunyikan jika tidak.
.-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	Tunjukkan apabila kontena yang ditandakan berada pada atau di bawah titik hentian lg (48em); disembunyikan jika tidak.
.-cq-show-max-md	Tunjukkan apabila kontena yang ditandakan berada pada atau di bawah titik hentian md (30em); disembunyikan jika tidak.
.-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	Tunjukkan apabila kontena yang ditandakan berada pada atau di bawah titik hentian sm (20em); disembunyikan jika tidak.
.-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	Tunjukkan apabila kontena yang ditandakan berada pada atau di bawah titik hentian xl (62em); disembunyikan jika tidak.
.-cq-show-max-xs	Tunjukkan apabila kontena yang ditandakan berada pada atau di bawah titik hentian xs (16em); disembunyikan jika tidak.
.-cq-show-min-content	Tunjukkan apabila kontena yang ditandakan berada pada atau di atas titik hentian content (68.75em); disembunyikan jika tidak.
.-cq-show-min-content-full-width	Tunjukkan apabila kontena yang ditandakan berada pada atau di atas titik hentian content-full-width (98.75em); disembunyikan jika tidak.
.-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	Tunjukkan apabila kontena yang ditandakan berada pada atau di atas titik hentian lg (48em); disembunyikan jika tidak.
.-cq-show-min-md	Tunjukkan apabila kontena yang ditandakan berada pada atau di atas titik hentian md (30em); disembunyikan jika tidak.
.-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	Tunjukkan apabila kontena yang ditandakan berada pada atau di atas titik hentian sm (20em); disembunyikan jika tidak.
.-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	Tunjukkan apabila kontena yang ditandakan berada pada atau di atas titik hentian xl (62em); disembunyikan jika tidak.
.-cq-show-min-xs	Tunjukkan apabila kontena yang ditandakan berada pada atau di atas titik hentian xs (16em); disembunyikan jika tidak.
.-hidden-max-content	Sembunyikan apabila paparan berada pada atau di bawah titik hentian content (68.75em).
.-hidden-max-content-full-width	Sembunyikan apabila paparan berada pada atau di bawah titik hentian 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	Sembunyikan apabila paparan berada pada atau di bawah titik hentian lg (48em).
.-hidden-max-md	Sembunyikan apabila paparan berada pada atau di bawah titik hentian 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	Sembunyikan apabila paparan berada pada atau di bawah titik hentian 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	Sembunyikan apabila paparan berada pada atau di bawah titik hentian xl (62em).
.-hidden-max-xs	Sembunyikan apabila paparan berada pada atau di bawah titik hentian xs (16em).
.-hidden-min-content	Sembunyikan apabila paparan berada pada atau di atas titik hentian content (68.75em).
.-hidden-min-content-full-width	Sembunyikan apabila paparan berada pada atau di atas titik hentian 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	Sembunyikan apabila paparan berada pada atau di atas titik hentian lg (48em).
.-hidden-min-md	Sembunyikan apabila paparan berada pada atau di atas penanda hentian 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	Sembunyikan apabila paparan berada pada atau di atas penanda hentian 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	Sembunyikan apabila paparan berada pada atau di atas penanda hentian xl (62em).
.-hidden-min-xs	Sembunyikan apabila paparan berada pada atau di atas penanda hentian xs (16em).
.-show-max-content	Tunjukkan (songsangan kepada -hidden-min-content) apabila paparan berada pada atau di bawah penanda hentian content (68.75em); tersembunyi jika tidak.
.-show-max-content-full-width	Tunjukkan (songsangan kepada -hidden-min-content-full-width) apabila paparan berada pada atau di bawah penanda hentian content-full-width (98.75em); tersembunyi jika tidak.
.-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	Tunjukkan (songsangan kepada -hidden-min-lg) apabila paparan berada pada atau di bawah penanda hentian lg (48em); tersembunyi jika tidak.
.-show-max-md	Tunjukkan (songsangan kepada -hidden-min-md) apabila paparan berada pada atau di bawah penanda hentian md (30em); tersembunyi jika tidak.
.-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	Tunjukkan (songsangan kepada -hidden-min-sm) apabila paparan berada pada atau di bawah penanda hentian sm (20em); tersembunyi jika tidak.
.-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	Tunjukkan (songsangan kepada -hidden-min-xl) apabila paparan berada pada atau di bawah penanda hentian xl (62em); tersembunyi jika tidak.
.-show-max-xs	Tunjukkan (songsangan kepada -hidden-min-xs) apabila paparan berada pada atau di bawah penanda hentian xs (16em); tersembunyi jika tidak.
.-show-min-content	Tunjukkan (songsangan kepada -hidden-max-content) apabila paparan berada pada atau di atas penanda hentian content (68.75em); tersembunyi jika tidak.
.-show-min-content-full-width	Tunjukkan (songsangan kepada -hidden-max-content-full-width) apabila paparan berada pada atau di atas penanda hentian content-full-width (98.75em); tersembunyi jika tidak.
.-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	Tunjukkan (songsangan kepada -hidden-max-lg) apabila paparan berada pada atau di atas penanda hentian lg (48em); tersembunyi jika tidak.
.-show-min-md	Tunjukkan (songsangan kepada -hidden-max-md) apabila paparan berada pada atau di atas penanda hentian md (30em); tersembunyi jika tidak.
.-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	Tunjukkan (songsangan kepada -hidden-max-sm) apabila paparan berada pada atau di atas penanda hentian sm (20em); tersembunyi jika tidak.
.-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	Tunjukkan (songsangan kepada -hidden-max-xl) apabila paparan berada pada atau di atas penanda hentian xl (62em); tersembunyi jika tidak.
.-show-min-xs	Tunjukkan (songsangan kepada -hidden-max-xs) apabila paparan berada pada atau di atas penanda hentian xs (16em); tersembunyi jika tidak.

Hartanah tersuai

Sifat	Jenis	Lalai	Penerangan
--pantoken-bp-content	<length>	68.75em	Nilai penanda hentian content (68.75em, ditulis tangan, bertema (bukan dalam token IR)). Menimpanya tidak menggerakkan ambang terkompil @media/@container ke atas.
--pantoken-bp-content-full-width	<length>	98.75em	Nilai penanda hentian content-full-width (98.75em, ditulis tangan, bertema (bukan dalam token IR)). Menimpanya tidak menggerakkan ambang terkompil @media/@container ke atas.
--pantoken-bp-lg	<length>	48em	Nilai penanda hentian lg (48em, mencerminkan --instui-component-tray-width-lg). Menimpanya tidak menggerakkan ambang terkompil @media/@container ke atas.
--pantoken-bp-md	<length>	30em	Nilai penanda hentian md (30em, mencerminkan --instui-component-tray-width-md). Menimpanya tidak menggerakkan ambang terkompil @media/@container ke atas.
--pantoken-bp-sm	<length>	20em	Nilai penanda hentian sm (20em, mencerminkan --instui-component-tray-width-sm). Menimpanya tidak menggerakkan ambang terkompil @media/@container ke atas.
--pantoken-bp-xl	<length>	62em	Nilai penanda hentian xl (62em, mencerminkan --instui-component-tray-width-xl). Menimpanya tidak menggerakkan ambang terkompil @media/@container ke atas.
--pantoken-bp-xs	<length>	16em	Nilai penanda hentian xs (16em, mencerminkan --instui-component-tray-width-xs). Menimpanya tidak menggerakkan ambang terkompil @media/@container ke atas.

Syarat

Jenis	Pertanyaan	Penerangan
media	(max-width: 16em)	Had atas bagi penanda hentian xs.
media	(min-width: 16em)	Had bawah bagi penanda hentian xs.
media	(max-width: 20em)	Had atas bagi penanda hentian sm.
media	(min-width: 20em)	Had bawah bagi penanda hentian sm.
media	(max-width: 30em)	Had atas bagi penanda hentian md.
media	(min-width: 30em)	Had bawah bagi penanda hentian md.
media	(max-width: 48em)	Had atas bagi penanda hentian lg.
media	(min-width: 48em)	Had bawah bagi penanda hentian lg.
media	(max-width: 62em)	Had atas bagi penanda hentian xl.
media	(min-width: 62em)	Had bawah bagi penanda hentian xl.
media	(max-width: 68.75em)	Had atas bagi penanda hentian content.
media	(min-width: 68.75em)	Had bawah bagi penanda hentian content.
media	(max-width: 98.75em)	Had atas bagi penanda hentian content-full-width.
media	(min-width: 98.75em)	Had bawah bagi penanda hentian content-full-width.
container	(max-width: 16em)	Had atas bagi penanda hentian xs, dinilai terhadap kontena bertanda.
container	(min-width: 16em)	Had bawah bagi penanda hentian xs, dinilai terhadap kontena bertanda.
container	(max-width: 20em)	Had atas bagi penanda hentian sm, dinilai terhadap kontena bertanda.
container	(min-width: 20em)	Had bawah bagi penanda hentian sm, dinilai terhadap kontena bertanda.
container	(max-width: 30em)	Batas atas bagi titik henti md, dinilai terhadap kontena yang ditandakan.
container	(min-width: 30em)	Batas bawah bagi titik henti md, dinilai terhadap kontena yang ditandakan.
container	(max-width: 48em)	Batas atas bagi titik henti lg, dinilai terhadap kontena yang ditandakan.
container	(min-width: 48em)	Batas bawah bagi titik henti lg, dinilai terhadap kontena yang ditandakan.
container	(max-width: 62em)	Batas atas bagi titik henti xl, dinilai terhadap kontena yang ditandakan.
container	(min-width: 62em)	Batas bawah bagi titik henti xl, dinilai terhadap kontena yang ditandakan.
container	(max-width: 68.75em)	Batas atas bagi titik henti content, dinilai terhadap kontena yang ditandakan.
container	(min-width: 68.75em)	Batas bawah bagi titik henti content, dinilai terhadap kontena yang ditandakan.
container	(max-width: 98.75em)	Batas atas bagi titik henti content-full-width, dinilai terhadap kontena yang ditandakan.
container	(min-width: 98.75em)	Batas bawah bagi titik henti content-full-width, dinilai terhadap kontena yang ditandakan.

Token digunakan

Token	Jenis	Nilai
--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