CSS: responsive

[class*="-hidden-"],[class*="-show-"] — Nézetablak- vagy konténer-szélesség alapú mutat/elrejt osztályok egy témázott töréspont-skálán.

.instui-hidden-max-<bp>/-hidden-min-<bp> elrejtik a nézetablak szélessége alapján; .instui-show-max-<bp>/-show-min-<bp> az inverz (alapértelmezésben rejtett, csak a tartományon belül jelenik meg display: revert révén); a -cq- variánsok egy .instui-container ősi elem szélességére reagálnak, nem a nézetablakéra. A skála szintjei xs/sm/md/lg/xl (az IR tray-width komponens tokenjeiből származnak) mindegyike hosszú formájú aliasokkal van ellátva (x-small–x-large) és eszköznevekkel (mobile/phablet/tablet/laptop/desktop) — amelyek mind elavultak a rövid név javára — plusz az átskálázatlan, témázott content/content-full-width szintek (a fő tartalomterület max-szélessége).

Source: index.ts

Használat

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

Példák

<div class="instui-hidden-max-sm">Rejtett a kis töréspontnál vagy annál kisebb méretnél.</div>
<div class="instui-show-min-sm">Csak a kis töréspontnál vagy annál nagyobb méretnél látható.</div>

Módosítók

Módosító	Leírás
.-cq-hidden-max-content	Elrejti, amikor a jelölt konténer a content töréspontnál van vagy alatta (68.75em).
.-cq-hidden-max-content-full-width	Elrejti, amikor a jelölt konténer a content-full-width töréspontnál van vagy alatta (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	Elrejti, amikor a jelölt konténer a lg töréspontnál van vagy alatta (48em).
.-cq-hidden-max-md	Elrejti, amikor a jelölt konténer a lg töréspontnál van vagy alatta (48em).
.-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	Elrejti, amikor a jelölt konténer a sm töréspontnál van vagy alatta (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	Elrejti, amikor a jelölt konténer a xl töréspontnál van vagy alatta (62em).
.-cq-hidden-max-xs	Elrejti, amikor a jelölt konténer a sm töréspontnál van vagy alatta (20em).
.-cq-hidden-min-content	Elrejti, amikor a jelölt konténer a content töréspontnál van vagy afölött (68.75em).
.-cq-hidden-min-content-full-width	Elrejti, amikor a jelölt konténer a content-full-width töréspontnál van vagy afölött (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	Elrejti, amikor a jelölt konténer a lg töréspontnál van vagy afölött (48em).
.-cq-hidden-min-md	Elrejti, amikor a jelölt konténer a lg töréspontnál van vagy afölött (48em).
.-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	Elrejti, amikor a jelölt konténer a sm töréspontnál van vagy afölött (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	Elrejti, amikor a jelölt konténer a xl töréspontnál van vagy afölött (62em).
.-cq-hidden-min-xs	Elrejti, amikor a jelölt konténer a sm töréspontnál van vagy afölött (20em).
.-cq-show-max-content	Megjelenít, amikor a jelölt konténer a content töréspontnál van vagy alatta (68.75em); egyébként rejtett.
.-cq-show-max-content-full-width	Megjelenít, amikor a jelölt konténer a content-full-width töréspontnál van vagy alatta (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, amikor a jelölt konténer a lg töréspontnál van vagy alatta (48em); egyébként rejtett.
.-cq-show-max-md	Megjelenít, amikor a jelölt konténer a lg töréspontnál van vagy alatta (48em); 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, amikor a jelölt konténer a sm töréspontnál van vagy alatta (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, amikor a jelölt konténer a xl töréspontnál van vagy alatta (62em); egyébként rejtett.
.-cq-show-max-xs	Megjelenít, amikor a jelölt konténer a sm töréspontnál van vagy alatta (20em); egyébként rejtett.
.-cq-show-min-content	Megjelenítve, ha a megjelölt konténer eléri vagy meghaladja a content töréspontot (68.75em); egyébként rejtve.
.-cq-show-min-content-full-width	Megjelenik, ha a megjelölt konténer eléri vagy meghaladja a content-full-width töréspontot (98.75em); különben 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	Megjelenik, amikor a megjelölt konténer a lg töréspontnál (48em) vagy annál nagyobb; különben rejtett.
.-cq-show-min-md	Megjelenik, amikor a megjelölt konténer a lg töréspontnál (48em) vagy annál nagyobb; különben 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	Megjelenik, ha a jelölt konténer eléri vagy meghaladja a sm töréspontot (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ítve, ha a megjelölt konténer eléri vagy meghaladja a xl töréspontot (62em); különben rejtve.
.-cq-show-min-xs	Megjelenik, ha a jelölt konténer eléri vagy meghaladja a sm töréspontot (20em); egyébként rejtett.
.-hidden-max-content	Elrejtés, ha a nézetablak a content töréspontnál vagy annál kisebb (68.75em).
.-hidden-max-content-full-width	Rejtsd el, ha a nézetablak a content-full-width töréspontnál (98.75em) vagy annál kisebb.
.-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	Rejtsd el, ha a nézetablak a lg töréspontnál vagy annál kisebb (48em).
.-hidden-max-md	Rejtsd el, ha a nézetablak a lg töréspontnál vagy annál kisebb (48em).
.-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, ha a nézőablak a md töréspontnál (30em) van vagy annál kisebb.
.-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, ha a nézetablak az xl töréspontnál (62em) van vagy annál kisebb.
.-hidden-max-xs	Elrejtés, amikor a nézetablak a xs töréspontnál (16em) van vagy annál kisebb.
.-hidden-min-content	Elrejtés, amikor a nézetablak eléri vagy meghaladja a content töréspontot (68.75em).
.-hidden-min-content-full-width	Elrejtés, amikor a nézetablak eléri vagy meghaladja a content-full-width töréspontot (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	Rejtse el, amikor a nézetablak a lg töréspontnál (48em) vagy annál nagyobb.
.-hidden-min-md	Rejtse el, amikor a nézetablak a lg töréspontnál (48em) vagy annál nagyobb.
.-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	Elrejtve, ha a nézetablak eléri vagy meghaladja a sm töréspontot (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, ha a nézetablak a xl töréspontnál (62em) vagy annál nagyobb.
.-hidden-min-xs	Elrejtve, ha a nézetablak eléri vagy meghaladja a sm töréspontot (20em).
.-show-max-content	Megjelenik (a -hidden-min-content ellentéte), ha a nézetablak a content töréspontnál (68.75em) vagy annál kisebb; egyébként elrejtve.
.-show-max-content-full-width	Megjelenítés (a -hidden-min-content-full-width inverze), amikor a nézetablak a content-full-width töréspontnál vagy annál kisebb (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ítendő (a -hidden-min-lg ellentéte), ha a nézetablak a lg töréspontnál (48em) vagy annál kisebb; egyébként el van rejtve.
.-show-max-md	Megjelenítve (a -hidden-min-md ellentéte), amikor a nézőablak a md töréspontnál (30em) egyenlő vagy annál kisebb; 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 -hidden-min-sm ellentéte), amikor a nézetablak a sm töréspontnál (20em) egyenlő vagy kisebb; egyébként el van rejtve.
.-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	Megjelenik (a -hidden-min-xl ellentéte), amikor a nézetablak a xl töréspontnál (62em) vagy annál kisebb; különben rejtett.
.-show-max-xs	Megjelenik (a -hidden-min-xs ellentéte), amikor a nézetablak a xs töréspontnál (16em) egyenlő vagy annál kisebb; egyébként rejtett.
.-show-min-content	Megjelenítés (a -hidden-max-content inverze), amikor a nézetablak a content töréspontnál (68.75em) vagy afölött van; egyébként rejtve.
.-show-min-content-full-width	Megjelenítve (a -hidden-max-content-full-width ellentéte), amikor a nézetablak eléri vagy meghaladja a content-full-width töréspontot (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 -hidden-max-lg ellentéte), amikor a nézetablak a lg töréspontnál (48em) vagy annál nagyobb; egyébként elrejtve.
.-show-min-md	Megjelenik (a -hidden-max-md inverze), ha a nézetablak a md töréspontnál (30em) egyenlő vagy nagyobb; különben 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ítve (a -hidden-max-sm ellentéte), amikor a nézetablak eléri vagy meghaladja a sm töréspontot (20em); egyébként rejtve.
.-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ítve (a -hidden-max-xl invertálása), amikor a nézetablak a xl töréspontnál (62em) vagy annál nagyobb; egyébként elrejtve.
.-show-min-xs	Megjelenik (a -hidden-max-xs ellentéte), ha a nézetablak a xs töréspontnál (16em) vagy annál nagyobb; egyébként rejtett.

Egyéni tulajdonságok

Tulajdonság	Típus	Alapértelmezett	Leírás
--pantoken-bp-content	<length>	68.75em	A content töréspont értéke (68.75em, kézzel szerkesztett, témázott (nem szerepel a token IR-ben)). Ennek felülírása nem emeli meg a lefordított @media/@container küszöböket.
--pantoken-bp-content-full-width	<length>	98.75em	A content-full-width töréspont értéke (98.75em, kézzel szerkesztett, témafüggő (nem szerepel a token IR-ben)). Ennek felülírása nem emeli meg a kompilált @media/@container küszöböket.
--pantoken-bp-lg	<length>	64em	A lg breakpoint értéke (48em, megfelel a --instui-component-tray-width-lg-nak). Ennek felülírása nem emeli fel a lefordított @media/@container küszöböket.
--pantoken-bp-md	<length>	48em	Az md töréspont értéke (30em, megfelel a --instui-component-tray-width-md-nek). Ennek felülírása nem emeli feljebb a lefordított @media/@container küszöböket.
--pantoken-bp-sm	<length>	30em	A sm töréspont értéke (20em, megfelel a --instui-component-tray-width-sm-nek). Ennek felülírása nem tolja feljebb a kompilált @media/@container küszöbértékeket.
--pantoken-bp-xl	<length>	80em	Az xl töréspont értéke (62em, tükrözi a --instui-component-tray-width-xl-et). Ennek felülírása nem mozgatja feljebb a lefordított @media/@container küszöböket.
--pantoken-bp-xs	<length>	20em	A content töréspont értéke (68.75em, kézzel szerkesztett, témázott (nem szerepel a token IR-ben)). Ennek felülírása nem emeli meg a lefordított @media/@container küszöböket.

Feltételek

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

Fogyasztott tokenek

Token	Típus	Érték
--instui-breakpoints-lg	<length>	64em
--instui-breakpoints-md	<length>	48em
--instui-breakpoints-sm	<length>	30em
--instui-breakpoints-xl	<length>	80em