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 (נקבעות מטוקני רכיב tray-width שב‑IR) מקושרות גם לשם ארוך (x-small–x-large) ולשם מכשיר (mobile/phablet/tablet/laptop/desktop) — שניהם מיושנים לטובת השם הקצר — וכן לרמות הלא‑מוגדלות הממושמעות (content/content-full-width) (ה‑max‑width של אזור התוכן הראשי).

Source: index.ts

שימוש

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

דוגמאות

<div class="instui-hidden-max-sm">מוסתר בנקודת השבירה הקטנה או מתחתיה.</div>
<div class="instui-show-min-sm">מוצג רק בנקודת השבירה הקטנה או מעליה.</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	להסתיר כאשר המיכל המסומן נמצא ב‑או מתחת לנקודת השבירה lg (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	להסתיר כאשר המיכל המסומן נמצא ב‑או מתחת לנקודת השבירה 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	להסתיר כאשר המיכל המסומן נמצא ב‑או מתחת לנקודת השבירה sm (20em).
.-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	להסתיר כאשר המיכל המסומן נמצא ב‑או מעל לנקודת השבירה lg (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	להסתיר כאשר המיכל המסומן נמצא ב‑או מעל לנקודת השבירה 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	להסתיר כאשר המיכל המסומן נמצא ב‑או מעל לנקודת השבירה sm (20em).
.-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	להציג כאשר המיכל המסומן נמצא ב‑או מתחת לנקודת השבירה lg (48em); מוסתר אחרת.
.-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	להציג כאשר המיכל המסומן נמצא ב‑או מתחת לנקודת השבירה sm (20em); מוסתר אחרת.
.-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	להציג כאשר המיכל המסומן נמצא ב‑או מעל לנקודת השבירה lg (48em); מוסתר אחרת.
.-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	להציג כאשר המיכל המסומן נמצא ב‑או מעל לנקודת השבירה sm (20em); מוסתר אחרת.
.-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	להסתיר כאשר חלון התצוגה נמצא ב‑או מתחת לנקודת השבירה lg (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	להסתיר כאשר חלון התצוגה נמצא ב‑או מתחת לנקודת השבירה md (30em).
.-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	להסתיר כאשר חלון התצוגה נמצא ב‑או מעל לנקודת השבירה lg (48em).
.-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	הסתר כאשר חלון התצוגה נמצא ב־או מעל נקודת השבירה sm (20em).
.-show-max-content	הצג (ההינך ההפוך של -hidden-min-content) כאשר חלון התצוגה נמצא ב־או מתחת לנקודת השבירה content (68.75em); מוסתר אחרת.
.-show-max-content-full-width	הצג (ההינך ההפוך של -hidden-min-content-full-width) כאשר חלון התצוגה נמצא ב־או מתחת לנקודת השבירה content-full-width (98.75em); מוסתר אחרת.
.-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	הצג (ההינך ההפוך של -hidden-min-lg) כאשר חלון התצוגה נמצא ב־או מתחת לנקודת השבירה lg (48em); מוסתר אחרת.
.-show-max-md	הצג (ההינך ההפוך של -hidden-min-md) כאשר חלון התצוגה נמצא ב־או מתחת לנקודת השבירה md (30em); מוסתר אחרת.
.-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	הצג (ההינך ההפוך של -hidden-min-sm) כאשר חלון התצוגה נמצא ב־או מתחת לנקודת השבירה sm (20em); מוסתר אחרת.
.-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	הצג (ההינך ההפוך של -hidden-min-xl) כאשר חלון התצוגה נמצא ב־או מתחת לנקודת השבירה xl (62em); מוסתר אחרת.
.-show-max-xs	הצג (ההינך ההפוך של -hidden-min-xs) כאשר חלון התצוגה נמצא ב־או מתחת לנקודת השבירה xs (16em); מוסתר אחרת.
.-show-min-content	הצג (ההפכי של -hidden-max-content) כאשר חלון התצוגה נמצא ב־או מעל נקודת השבירה content (68.75em); מוסתר אחרת.
.-show-min-content-full-width	הצג (ההפכי של -hidden-max-content-full-width) כאשר חלון התצוגה נמצא ב־או מעל נקודת השבירה content-full-width (98.75em); מוסתר אחרת.
.-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	הצג (ההפכי של -hidden-max-lg) כאשר חלון התצוגה נמצא ב־או מעל נקודת השבירה lg (48em); מוסתר אחרת.
.-show-min-md	הצג (ההפכי של -hidden-max-md) כאשר חלון התצוגה נמצא ב־או מעל נקודת השבירה md (30em); מוסתר אחרת.
.-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	הצג (ההפכי של -hidden-max-sm) כאשר חלון התצוגה נמצא ב־או מעל נקודת השבירה sm (20em); מוסתר אחרת.
.-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	הצג (ההפכי של -hidden-max-xl) כאשר חלון התצוגה נמצא ב־או מעל נקודת השבירה xl (62em); מוסתר אחרת.
.-show-min-xs	הצג (ההפכי של -hidden-max-xs) כאשר חלון התצוגה נמצא ב־או מעל נקודת השבירה xs (16em); מוסתר אחרת.

תכונות מותאמות אישית

תכונה	סוג	ברירת מחדל	תיאור
--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>	64em	הערך של נקודת השבירה lg (48em, משקף את --instui-component-tray-width-lg). שינויו לא יזיז את הספים המוגדרים בקומפילציה @media/@container כלפי מעלה.
--pantoken-bp-md	<length>	48em	הערך של נקודת השבירה md (30em, משקף את --instui-component-tray-width-md). שינויו לא יזיז את הספים המוגדרים בקומפילציה @media/@container כלפי מעלה.
--pantoken-bp-sm	<length>	30em	הערך של נקודת השבירה sm (20em, משקף את --instui-component-tray-width-sm). שינויו לא יזיז את הספים המוגדרים בקומפילציה @media/@container כלפי מעלה.
--pantoken-bp-xl	<length>	80em	הערך של נקודת השבירה xl (62em, משקף את --instui-component-tray-width-xl). שינויו לא יזיז את הספים המוגדרים בקומפילציה @media/@container כלפי מעלה.
--pantoken-bp-xs	<length>	20em	הערך של נקודת השבירה content (68.75em, נכתב ידנית, מעוצב בנושא (לא ב־token IR)). שינויו לא יזיז את הספים המוגדרים בקומפילציה @media/@container כלפי מעלה.

תנאים

סוג	שאילתה	תיאור
media	(max-width: 20em)	גבול עליון של נקודת השבירה xs.
media	(min-width: 20em)	גבול תחתון של נקודת השבירה xs.
media	(max-width: 30em)	גבול עליון של נקודת השבירה sm.
media	(min-width: 30em)	גבול תחתון של נקודת השבירה sm.
media	(max-width: 48em)	גבול עליון של נקודת השבירה md.
media	(min-width: 48em)	גבול תחתון של נקודת השבירה md.
media	(max-width: 64em)	גבול עליון של נקודת השבירה lg.
media	(min-width: 64em)	גבול תחתון של נקודת השבירה lg.
media	(max-width: 80em)	גבול עליון של נקודת השבירה xl.
media	(min-width: 80em)	גבול תחתון של נקודת השבירה 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: 20em)	גבול עליון של נקודת השבירה xs, מוערך מול מכולה מסומנת.
container	(min-width: 20em)	גבול תחתון של נקודת השבירה xs, מוערך מול מכולה מסומנת.
container	(max-width: 30em)	גבול עליון של נקודת השבירה sm, מוערך מול מכולה מסומנת.
container	(min-width: 30em)	גבול תחתון של נקודת השבירה sm, מוערך מול מכולה מסומנת.
container	(max-width: 48em)	הגבול העליון של נקודת השבירה md, מחושב ביחס למיכל מסומן.
container	(min-width: 48em)	הגבול התחתון של נקודת השבירה md, מחושב ביחס למיכל מסומן.
container	(max-width: 64em)	הגבול העליון של נקודת השבירה lg, מחושב ביחס למיכל מסומן.
container	(min-width: 64em)	הגבול התחתון של נקודת השבירה lg, מחושב ביחס למיכל מסומן.
container	(max-width: 80em)	הגבול העליון של נקודת השבירה xl, מחושב ביחס למיכל מסומן.
container	(min-width: 80em)	הגבול התחתון של נקודת השבירה 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-breakpoints-lg	<length>	64em
--instui-breakpoints-md	<length>	48em
--instui-breakpoints-sm	<length>	30em
--instui-breakpoints-xl	<length>	80em