CSS: responsive

[class*="-hidden-"],[class*="-show-"] — Nézőtér- vagy konténerszélesség alapú megjelenítő/elrejtő osztályok egy témázott töréspontskálán.

A(z) .instui-hidden-max-<bp>/-hidden-min-<bp> a nézőtér szélessége alapján rejt el; a(z) .instui-show-max-<bp>/-show-min-<bp> ennek az ellentéte (alapértelmezés szerint rejtett, csak a tartományon belül jelenik meg a(z) display: revert révén); a(z) -cq- variánsok a nézőtér helyett egy .instui-container ős szélességére reagálnak. A skálaszintek (xs/sm/md/lg/xl, amelyek az IR tálcaszélesség-komponens tokenjeiből származnak) mindegyike rendelkezik egy hosszú írásmódú aliasszal (x-small–x-large) és egy eszköznévvel (mobile/phablet/tablet/laptop/desktop) — mindkettő elavult a rövid név javára —, valamint a skálázatlan, témázott content/content-full-width szintekkel (a fő tartalomterület maximális szélessége).

Forrás: index.ts

Használat

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

Példák

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

Módosítók

Módosító	Leírás
.-cq-hidden-max-content	Elrejtés, ha a megjelölt konténer a(z) content törésponton vagy az alatt van (68.75em).
.-cq-hidden-max-content-full-width	Elrejtés, amikor a megjelölt konténer a(z) content-full-width törésponton vagy az alatt van (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	Elrejtés, amikor a megjelölt konténer a(z) lg törésponton vagy az alatt van (48em).
.-cq-hidden-max-md	Elrejtés, amikor a megjelölt konténer a(z) md törésponton vagy az alatt van (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	Elrejtés, amikor a megjelölt konténer a(z) sm törésponton vagy az alatt van (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	Elrejtés, amikor a megjelölt konténer a(z) xl törésponton vagy az alatt van (62em).
.-cq-hidden-max-xs	Elrejtés, amikor a megjelölt konténer a(z) xs törésponton vagy az alatt van (16em).
.-cq-hidden-min-content	Elrejtés, amikor a megjelölt konténer a(z) content törésponton vagy a felett van (68.75em).
.-cq-hidden-min-content-full-width	Elrejtés, amikor a megjelölt konténer a(z) content-full-width törésponton vagy a felett van (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	Elrejtés, amikor a megjelölt konténer a(z) lg törésponton vagy a felett van (48em).
.-cq-hidden-min-md	Elrejtés, amikor a megjelölt konténer a(z) md törésponton vagy a felett van (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	Elrejtés, amikor a megjelölt konténer a(z) sm törésponton vagy a felett van (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	Elrejtés, amikor a megjelölt konténer a(z) xl törésponton vagy a felett van (62em).
.-cq-hidden-min-xs	Elrejtés, amikor a megjelölt konténer a(z) xs törésponton vagy a felett van (16em).
.-cq-show-max-content	Megjelenítés, amikor a megjelölt konténer a(z) content törésponton vagy az alatt van (68.75em); egyébként rejtett.
.-cq-show-max-content-full-width	Megjelenítés, amikor a megjelölt konténer a(z) content-full-width törésponton vagy az alatt van (98.75em); egyébként rejtett.
.-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	Megjelenítés, amikor a megjelölt konténer a(z) lg törésponton vagy az alatt van (48em); egyébként rejtett.
.-cq-show-max-md	Megjelenítés, amikor a megjelölt konténer a(z) md törésponton vagy az alatt van (30em); egyébként rejtett.
.-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	Megjelenítés, amikor a megjelölt konténer a(z) sm törésponton vagy az alatt van (20em); egyébként rejtett.
.-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	Megjelenítés, amikor a megjelölt konténer a(z) xl törésponton vagy az alatt van (62em); egyébként rejtett.
.-cq-show-max-xs	Megjelenítés, amikor a megjelölt konténer a(z) xs törésponton vagy az alatt van (16em); egyébként rejtett.
.-cq-show-min-content	Megjelenítés, amikor a megjelölt konténer a(z) content törésponton vagy a felett van (68.75em); egyébként rejtett.
.-cq-show-min-content-full-width	Megjelenítés, amikor a megjelölt konténer a(z) content-full-width törésponton vagy a felett van (98.75em); egyébként rejtett.
.-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	Megjelenítés, amikor a megjelölt konténer a(z) lg törésponton vagy a felett van (48em); egyébként rejtett.
.-cq-show-min-md	Megjelenítés, amikor a megjelölt konténer a(z) md törésponton vagy a felett van (30em); egyébként rejtett.
.-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	Megjelenítés, amikor a megjelölt konténer a(z) sm törésponton vagy a felett van (20em); egyébként rejtett.
.-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	Megjelenítés, amikor a megjelölt konténer a(z) xl törésponton vagy a felett van (62em); egyébként rejtett.
.-cq-show-min-xs	Megjelenítés, amikor a megjelölt konténer a(z) xs törésponton vagy a felett van (16em); egyébként rejtett.
.-hidden-max-content	Elrejtés, amikor a nézetablak a(z) content törésponton vagy az alatt van (68.75em).
.-hidden-max-content-full-width	Elrejtés, amikor a nézetablak a(z) content-full-width törésponton vagy az alatt van (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	Elrejtés, amikor a nézetablak a(z) lg törésponton vagy az alatt van (48em).
.-hidden-max-md	Elrejtés, amikor a nézetablak a(z) md törésponton vagy az alatt van (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	Elrejtés, amikor a nézetablak a(z) sm törésponton vagy az alatt van (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	Elrejtés, amikor a nézetablak a(z) xl törésponton vagy az alatt van (62em).
.-hidden-max-xs	Elrejtés, amikor a nézetablak a(z) xs törésponton vagy az alatt van (16em).
.-hidden-min-content	Elrejtés, amikor a nézetablak a(z) content törésponton vagy a felett van (68.75em).
.-hidden-min-content-full-width	Elrejtés, amikor a nézetablak a(z) content-full-width törésponton vagy a felett van (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	Elrejtés, amikor a nézetablak a(z) lg törésponton vagy a felett van (48em).
.-hidden-min-md	Elrejtés, amikor a nézetablak a(z) md törésponton vagy a felett van (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	Elrejtés, amikor a nézetablak a(z) sm törésponton vagy a felett van (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	Elrejtés, amikor a nézetablak a(z) xl törésponton vagy a felett van (62em).
.-hidden-min-xs	Elrejtés, amikor a nézetablak a(z) xs törésponton vagy a felett van (16em).
.-show-max-content	Megjelenítés (a(z) -hidden-min-content inverze), amikor a nézetablak a(z) content törésponton vagy az alatt van (68.75em); egyébként rejtett.
.-show-max-content-full-width	Megjelenítés (a(z) -hidden-min-content-full-width inverze), amikor a nézetablak a(z) content-full-width törésponton vagy az alatt van (98.75em); egyébként rejtett.
.-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	Megjelenítés (a(z) -hidden-min-lg inverze), amikor a nézetablak a(z) lg törésponton vagy az alatt van (48em); egyébként rejtett.
.-show-max-md	Megjelenítés (a(z) -hidden-min-md inverze), amikor a nézetablak a(z) md törésponton vagy az alatt van (30em); egyébként rejtett.
.-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	Megjelenítés (a(z) -hidden-min-sm inverze), amikor a nézetablak a(z) sm törésponton vagy az alatt van (20em); egyébként rejtett.
.-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	Megjelenítés (a(z) -hidden-min-xl inverze), amikor a nézetablak a(z) xl törésponton vagy az alatt van (62em); egyébként rejtett.
.-show-max-xs	Megjelenítés (a(z) -hidden-min-xs inverze), amikor a nézetablak a(z) xs törésponton vagy az alatt van (16em); egyébként rejtett.
.-show-min-content	Megjelenítés (a(z) -hidden-max-content inverze), amikor a nézetablak a(z) content törésponton vagy a felett van (68.75em); egyébként rejtett.
.-show-min-content-full-width	Megjelenítés (a(z) -hidden-max-content-full-width inverze), amikor a nézetablak a(z) content-full-width törésponton vagy a felett van (98.75em); egyébként rejtett.
.-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	Megjelenítés (a(z) -hidden-max-lg inverze), amikor a nézetablak a(z) lg törésponton vagy a felett van (48em); egyébként rejtett.
.-show-min-md	Megjelenítés (a(z) -hidden-max-md inverze), amikor a nézetablak a(z) md törésponton vagy a felett van (30em); egyébként rejtett.
.-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	Megjelenítés (a(z) -hidden-max-sm inverze), amikor a nézetablak a(z) sm törésponton vagy a felett van (20em); egyébként rejtett.
.-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	Megjelenítés (a(z) -hidden-max-xl inverze), amikor a nézetablak a(z) xl törésponton vagy a felett van (62em); egyébként rejtett.
.-show-min-xs	Megjelenítés (a(z) -hidden-max-xs inverze), amikor a nézetablak a(z) xs törésponton vagy a felett van (16em); egyébként rejtett.

Egyéni tulajdonságok

Tulajdonság	Típus	Alapértelmezett	Leírás
--pantoken-bp-content	<length>	68.75em	A(z) content töréspont értéke (68.75em, kézzel készített, témázott (nincs a token IR-ben)). A felülírása nem helyezi át a fenti lefordított @media/@container küszöbértékeket.
--pantoken-bp-content-full-width	<length>	98.75em	A(z) content-full-width töréspont értéke (98.75em, kézzel készített, témázott (nincs a token IR-ben)). A felülírása nem helyezi át a fenti lefordított @media/@container küszöbértékeket.
--pantoken-bp-lg	<length>	48em	A(z) lg töréspont értéke (48em, tükrözi a következőt: --instui-component-tray-width-lg). A felülírása nem helyezi át a fenti lefordított @media/@container küszöbértékeket.
--pantoken-bp-md	<length>	30em	A(z) md töréspont értéke (30em, tükrözi a következőt: --instui-component-tray-width-md). A felülírása nem helyezi át a fenti lefordított @media/@container küszöbértékeket.
--pantoken-bp-sm	<length>	20em	A(z) sm töréspont értéke (20em, tükrözi a következőt: --instui-component-tray-width-sm). A felülírása nem helyezi át a fenti lefordított @media/@container küszöbértékeket.
--pantoken-bp-xl	<length>	62em	A(z) xl töréspont értéke (62em, tükrözi a következőt: --instui-component-tray-width-xl). A felülírása nem helyezi át a fenti lefordított @media/@container küszöbértékeket.
--pantoken-bp-xs	<length>	16em	A(z) xs töréspont értéke (16em, tükrözi a következőt: --instui-component-tray-width-xs). A felülírása nem helyezi át a fenti lefordított @media/@container küszöbértékeket.

Feltételek

Típus	Lekérdezés	Leírás
media	(max-width: 16em)	A(z) xs töréspont felső határa.
media	(min-width: 16em)	A(z) xs töréspont alsó határa.
media	(max-width: 20em)	A(z) sm töréspont felső határa.
media	(min-width: 20em)	A(z) sm töréspont alsó határa.
media	(max-width: 30em)	A(z) md töréspont felső határa.
media	(min-width: 30em)	A(z) md töréspont alsó határa.
media	(max-width: 48em)	A(z) lg töréspont felső határa.
media	(min-width: 48em)	A(z) lg töréspont alsó határa.
media	(max-width: 62em)	A(z) xl töréspont felső határa.
media	(min-width: 62em)	A(z) xl töréspont alsó határa.
media	(max-width: 68.75em)	A(z) content töréspont felső határa.
media	(min-width: 68.75em)	A(z) content töréspont alsó határa.
media	(max-width: 98.75em)	A(z) content-full-width töréspont felső határa.
media	(min-width: 98.75em)	A(z) content-full-width töréspont alsó határa.
container	(max-width: 16em)	A(z) xs töréspont felső határa, egy megjelölt tárolóhoz viszonyítva kiértékelve.
container	(min-width: 16em)	A(z) xs töréspont alsó határa, egy megjelölt tárolóhoz viszonyítva kiértékelve.
container	(max-width: 20em)	A(z) sm töréspont felső határa, egy megjelölt tárolóhoz viszonyítva kiértékelve.
container	(min-width: 20em)	A(z) sm töréspont alsó határa, egy megjelölt tárolóhoz viszonyítva kiértékelve.
container	(max-width: 30em)	A(z) md töréspont felső határa, egy megjelölt tárolóhoz viszonyítva kiértékelve.
container	(min-width: 30em)	A(z) md töréspont alsó határa, egy megjelölt tárolóhoz viszonyítva kiértékelve.
container	(max-width: 48em)	A(z) lg töréspont felső határa, egy megjelölt tárolóhoz viszonyítva kiértékelve.
container	(min-width: 48em)	A(z) lg töréspont alsó határa, egy megjelölt tárolóhoz viszonyítva kiértékelve.
container	(max-width: 62em)	A(z) xl töréspont felső határa, egy megjelölt tárolóhoz viszonyítva kiértékelve.
container	(min-width: 62em)	A(z) xl töréspont alsó határa, egy megjelölt tárolóhoz viszonyítva kiértékelve.
container	(max-width: 68.75em)	A(z) content töréspont felső határa, egy megjelölt tárolóhoz viszonyítva kiértékelve.
container	(min-width: 68.75em)	A(z) content töréspont alsó határa, egy megjelölt tárolóhoz viszonyítva kiértékelve.
container	(max-width: 98.75em)	A(z) content-full-width töréspont felső határa, egy megjelölt tárolóhoz viszonyítva kiértékelve.
container	(min-width: 98.75em)	A(z) content-full-width töréspont alsó határa, egy megjelölt tárolóhoz viszonyítva kiértékelve.

Felhasznált tokenek

Token	Típus	Érték
--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