CSS: responsive

[class*="-hidden-"],[class*="-show-"] — Ranganna taispeána/fola bunaithe ar leithead an fhuinneog amhairc nó an choimeádáin thar scála sosbriste téamaithe.

.instui-hidden-max-<bp>/-hidden-min-<bp> a fhola de réir leithead an fhuinneog amhairc; is iad .instui-show-max-<bp>/-show-min-<bp> an mhalairt (folaithe de réir réamhshocraithe, le feiceáil amháin laistigh den raon trí display: revert); freagraíonn na éagsúlachtaí -cq- ar leithead seanmhéanmáistir .instui-container in áit leithead an fhuinneog amhairc. Tá sraitheanna scála xs/sm/md/lg/xl (a fhaightear ó thóicíní comhpháirte tray-width san IR) aliasáilte chuig ainm fhada foirmiúil (x-small–x-large) agus ainm gléas (mobile/phablet/tablet/laptop/desktop) — araon as dáta i bhfabhar an ainm ghort — agus na sraitheanna téamaithe neamhscála content/content-full-width (uasmhéid leithead an phríomh-ábhar).

Source: index.ts

Úsáid

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

Samplaí

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

Modhnóirí

Modhnóir	Cur síos
.-cq-hidden-max-content	Fola nuair atá an coimeádán marcáilte ag an nó faoi bhun an sosbriste content (68.75em).
.-cq-hidden-max-content-full-width	Fola nuair atá an coimeádán marcáilte ag an nó faoi bhun an sosbriste 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	Fola nuair atá an coimeádán marcáilte ag an nó faoi bhun an sosbriste lg (48em).
.-cq-hidden-max-md	Fola nuair atá an coimeádán marcáilte ag an nó faoi bhun an sosbriste 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	Fola nuair atá an coimeádán marcáilte ag an nó faoi bhun an sosbriste 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	Fola nuair atá an coimeádán marcáilte ag an nó faoi bhun an sosbriste xl (62em).
.-cq-hidden-max-xs	Fola nuair atá an coimeádán marcáilte ag an nó faoi bhun an sosbriste xs (16em).
.-cq-hidden-min-content	Fola nuair atá an coimeádán marcáilte ag an nó os cionn an sosbriste content (68.75em).
.-cq-hidden-min-content-full-width	Fola nuair atá an coimeádán marcáilte ag an nó os cionn an sosbriste 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	Fola nuair atá an coimeádán marcáilte ag an nó os cionn an sosbriste lg (48em).
.-cq-hidden-min-md	Fola nuair atá an coimeádán marcáilte ag an nó os cionn an sosbriste 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	Fola nuair atá an coimeádán marcáilte ag an nó os cionn an sosbriste 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	Fola nuair atá an coimeádán marcáilte ag an nó os cionn an sosbriste xl (62em).
.-cq-hidden-min-xs	Fola nuair atá an coimeádán marcáilte ag an nó os cionn an sosbriste xs (16em).
.-cq-show-max-content	Taispeáin nuair atá an coimeádán marcáilte ag an nó faoi bhun an sosbriste content (68.75em); i bhfolach dá mhalairt.
.-cq-show-max-content-full-width	Taispeáin nuair atá an coimeádán marcáilte ag an nó faoi bhun an sosbriste content-full-width (98.75em); i bhfolach dá mhalairt.
.-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	Taispeáin nuair atá an coimeádán marcáilte ag an nó faoi bhun an sosbriste lg (48em); i bhfolach dá mhalairt.
.-cq-show-max-md	Taispeáin nuair atá an coimeádán marcáilte ag an nó faoi bhun an sosbriste md (30em); i bhfolach dá mhalairt.
.-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	Taispeáin nuair atá an coimeádán marcáilte ag an nó faoi bhun an sosbriste sm (20em); i bhfolach dá mhalairt.
.-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	Taispeáin nuair atá an coimeádán marcáilte ag an nó faoi bhun an sosbriste xl (62em); i bhfolach dá mhalairt.
.-cq-show-max-xs	Taispeáin nuair atá an coimeádán marcáilte ag an nó faoi bhun an sosbriste xs (16em); i bhfolach dá mhalairt.
.-cq-show-min-content	Taispeáin nuair atá an coimeádán marcáilte ag an nó os cionn an sosbriste content (68.75em); i bhfolach dá mhalairt.
.-cq-show-min-content-full-width	Taispeáin nuair atá an coimeádán marcáilte ag an nó os cionn an sosbriste content-full-width (98.75em); i bhfolach dá mhalairt.
.-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	Taispeáin nuair atá an coimeádán marcáilte ag an nó os cionn an sosbriste lg (48em); i bhfolach dá mhalairt.
.-cq-show-min-md	Taispeáin nuair atá an coimeádán marcáilte ag an nó os cionn an sosbriste md (30em); i bhfolach dá mhalairt.
.-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	Taispeáin nuair atá an coimeádán marcáilte ag an nó os cionn an sosbriste sm (20em); i bhfolach dá mhalairt.
.-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	Taispeáin nuair atá an coimeádán marcáilte ag an nó os cionn an sosbriste xl (62em); i bhfolach dá mhalairt.
.-cq-show-min-xs	Taispeáin nuair atá an coimeádán marcáilte ag an nó os cionn an sosbriste xs (16em); i bhfolach dá mhalairt.
.-hidden-max-content	Fola nuair atá an fhuinneog amhairc ag an nó faoi bhun an sosbriste content (68.75em).
.-hidden-max-content-full-width	Fola nuair atá an fhuinneog amhairc ag an nó faoi bhun an sosbriste 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	Fola nuair atá an fhuinneog amhairc ag an nó faoi bhun an sosbriste lg (48em).
.-hidden-max-md	Fola nuair atá an fhuinneog amhairc ag an nó faoi bhun an sosbriste 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	Fola nuair atá an fhuinneog amhairc ag an nó faoi bhun an sosbriste 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	Fola nuair atá an fhuinneog amhairc ag an nó faoi bhun an sosbriste xl (62em).
.-hidden-max-xs	Fola nuair atá an fhuinneog amhairc ag an nó faoi bhun an sosbriste xs (16em).
.-hidden-min-content	Fola nuair atá an fhuinneog amhairc ag an nó os cionn an sosbriste content (68.75em).
.-hidden-min-content-full-width	Fola nuair atá an fhuinneog amhairc ag an nó os cionn an sosbriste 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	Fola nuair atá an fhuinneog amhairc ag an nó os cionn an sosbriste lg (48em).
.-hidden-min-md	Folaigh nuair atá an radharc-amharc ag nó os cionn an bhriseadhphointe 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	Folaigh nuair atá an radharc-amharc ag nó os cionn an bhriseadhphointe 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	Folaigh nuair atá an radharc-amharc ag nó os cionn an bhriseadhphointe xl (62em).
.-hidden-min-xs	Folaigh nuair atá an radharc-amharc ag nó os cionn an bhriseadhphointe xs (16em).
.-show-max-content	Taispeáin (idirmhalartach de -hidden-min-content) nuair atá an radharc-amharc ag nó faoi bhun an bhriseadhphointe content (68.75em); i bhfolach murach sin.
.-show-max-content-full-width	Taispeáin (idirmhalartach de -hidden-min-content-full-width) nuair atá an radharc-amharc ag nó faoi bhun an bhriseadhphointe content-full-width (98.75em); i bhfolach murach sin.
.-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	Taispeáin (idirmhalartach de -hidden-min-lg) nuair atá an radharc-amharc ag nó faoi bhun an bhriseadhphointe lg (48em); i bhfolach murach sin.
.-show-max-md	Taispeáin (idirmhalartach de -hidden-min-md) nuair atá an radharc-amharc ag nó faoi bhun an bhriseadhphointe md (30em); i bhfolach murach sin.
.-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	Taispeáin (idirmhalartach de -hidden-min-sm) nuair atá an radharc-amharc ag nó faoi bhun an bhriseadhphointe sm (20em); i bhfolach murach sin.
.-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	Taispeáin (idirmhalartach de -hidden-min-xl) nuair atá an radharc-amharc ag nó faoi bhun an bhriseadhphointe xl (62em); i bhfolach murach sin.
.-show-max-xs	Taispeáin (idirmhalartach de -hidden-min-xs) nuair atá an radharc-amharc ag nó faoi bhun an bhriseadhphointe xs (16em); i bhfolach murach sin.
.-show-min-content	Taispeáin (idirmhalartach de -hidden-max-content) nuair atá an radharc-amharc ag nó os cionn an bhriseadhphointe content (68.75em); i bhfolach murach sin.
.-show-min-content-full-width	Taispeáin (idirmhalartach de -hidden-max-content-full-width) nuair atá an radharc-amharc ag nó os cionn an bhriseadhphointe content-full-width (98.75em); i bhfolach murach sin.
.-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	Taispeáin (idirmhalartach de -hidden-max-lg) nuair atá an radharc-amharc ag nó os cionn an bhriseadhphointe lg (48em); i bhfolach murach sin.
.-show-min-md	Taispeáin (idirmhalartach de -hidden-max-md) nuair atá an radharc-amharc ag nó os cionn an bhriseadhphointe md (30em); i bhfolach murach sin.
.-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	Taispeáin (idirmhalartach de -hidden-max-sm) nuair atá an radharc-amharc ag nó os cionn an bhriseadhphointe sm (20em); i bhfolach murach sin.
.-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	Taispeáin (idirmhalartach de -hidden-max-xl) nuair atá an radharc-amharc ag nó os cionn an bhriseadhphointe xl (62em); i bhfolach murach sin.
.-show-min-xs	Taispeáin (idirmhalartach de -hidden-max-xs) nuair atá an radharc-amharc ag nó os cionn an bhriseadhphointe xs (16em); i bhfolach murach sin.

Airíonna saincheaptha

Airí	Cineál	Réamhshocraithe	Cur síos
--pantoken-bp-content	<length>	68.75em	Luach an bhriseadhphointe content (68.75em, lámhscríofa, téamaithe (níl sa IR token)). Ní chuireann a shárú na teorainneacha chumaiscithe @media/@container os cionn.
--pantoken-bp-content-full-width	<length>	98.75em	Luach an bhriseadhphointe content-full-width (98.75em, lámhscríofa, téamaithe (níl sa IR token)). Ní chuireann a shárú na teorainneacha chumaiscithe @media/@container os cionn.
--pantoken-bp-lg	<length>	48em	Luach an bhriseadhphointe lg (48em, macasamhlaíonn --instui-component-tray-width-lg). Ní chuireann a shárú na teorainneacha chumaiscithe @media/@container os cionn.
--pantoken-bp-md	<length>	30em	Luach an bhriseadhphointe md (30em, macasamhlaíonn --instui-component-tray-width-md). Ní chuireann a shárú na teorainneacha chumaiscithe @media/@container os cionn.
--pantoken-bp-sm	<length>	20em	Luach an bhriseadhphointe sm (20em, macasamhlaíonn --instui-component-tray-width-sm). Ní chuireann a shárú na teorainneacha chumaiscithe @media/@container os cionn.
--pantoken-bp-xl	<length>	62em	Luach an bhriseadhphointe xl (62em, macasamhlaíonn --instui-component-tray-width-xl). Ní chuireann a shárú na teorainneacha chumaiscithe @media/@container os cionn.
--pantoken-bp-xs	<length>	16em	Luach an bhriseadhphointe xs (16em, macasamhlaíonn --instui-component-tray-width-xs). Ní chuireann a shárú na teorainneacha chumaiscithe @media/@container os cionn.

Coinníollacha

Cineál	Ceist	Cur síos
media	(max-width: 16em)	Teorainn uachtarach an bhriseadhphointe xs.
media	(min-width: 16em)	Teorainn íochtarach an bhriseadhphointe xs.
media	(max-width: 20em)	Teorainn uachtarach an bhriseadhphointe sm.
media	(min-width: 20em)	Teorainn íochtarach an bhriseadhphointe sm.
media	(max-width: 30em)	Teorainn uachtarach an bhriseadhphointe md.
media	(min-width: 30em)	Teorainn íochtarach an bhriseadhphointe md.
media	(max-width: 48em)	Teorainn uachtarach an bhriseadhphointe lg.
media	(min-width: 48em)	Teorainn íochtarach an bhriseadhphointe lg.
media	(max-width: 62em)	Teorainn uachtarach an bhriseadhphointe xl.
media	(min-width: 62em)	Teorainn íochtarach an bhriseadhphointe xl.
media	(max-width: 68.75em)	Teorainn uachtarach an bhriseadhphointe content.
media	(min-width: 68.75em)	Teorainn íochtarach an bhriseadhphointe content.
media	(max-width: 98.75em)	Teorainn uachtarach an bhriseadhphointe content-full-width.
media	(min-width: 98.75em)	Teorainn íochtarach an bhriseadhphointe content-full-width.
container	(max-width: 16em)	Teorainn uachtarach an bhriseadhphointe xs, measúnaithe in aghaidh coimeádáin mharcáilte.
container	(min-width: 16em)	Teorainn íochtarach an bhriseadhphointe xs, measúnaithe in aghaidh coimeádáin mharcáilte.
container	(max-width: 20em)	Teorainn uachtarach an bhriseadhphointe sm, measúnaithe in aghaidh coimeádáin mharcáilte.
container	(min-width: 20em)	Teorainn íochtarach an bhriseadhphointe sm, measúnaithe in aghaidh coimeádáin mharcáilte.
container	(max-width: 30em)	Teorainn uachtarach den bhriseadh md, measúnaithe i gcoinne coimeádáin mharcáilte.
container	(min-width: 30em)	Teorainn íochtarach den bhriseadh md, measúnaithe i gcoinne coimeádáin mharcáilte.
container	(max-width: 48em)	Teorainn uachtarach den bhriseadh lg, measúnaithe i gcoinne coimeádáin mharcáilte.
container	(min-width: 48em)	Teorainn íochtarach den bhriseadh lg, measúnaithe i gcoinne coimeádáin mharcáilte.
container	(max-width: 62em)	Teorainn uachtarach den bhriseadh xl, measúnaithe i gcoinne coimeádáin mharcáilte.
container	(min-width: 62em)	Teorainn íochtarach den bhriseadh xl, measúnaithe i gcoinne coimeádáin mharcáilte.
container	(max-width: 68.75em)	Teorainn uachtarach den bhriseadh content, measúnaithe i gcoinne coimeádáin mharcáilte.
container	(min-width: 68.75em)	Teorainn íochtarach den bhriseadh content, measúnaithe i gcoinne coimeádáin mharcáilte.
container	(max-width: 98.75em)	Teorainn uachtarach den bhriseadh content-full-width, measúnaithe i gcoinne coimeádáin mharcáilte.
container	(min-width: 98.75em)	Teorainn íochtarach den bhriseadh content-full-width, measúnaithe i gcoinne coimeádáin mharcáilte.

Tóicíní a úsáideadh

Token	Cineál	Luach
--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