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(IR의 tray-width 컴포넌트 토큰에서 유래)는 긴 형태 표기(x-small–x-large)와 기기 이름(mobile/phablet/tablet/laptop/desktop)에도 각각 별칭이 있으며 — 둘 다 짧은 이름으로 대체되어 더 이상 권장되지 않습니다 — 또한 비스케일링된 테마화된 content/content-full-width 계층(메인 콘텐츠 영역의 최대 너비)이 있습니다.

Source: index.ts

사용법

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

예제들

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

수정자

수정자	설명
.-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	표시된 컨테이너가 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	표시된 컨테이너가 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	표시된 컨테이너가 xs 브레이크포인트(16em) 이하일 때 숨김.
.-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	표시된 컨테이너가 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	표시된 컨테이너가 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	표시된 컨테이너가 xs 브레이크포인트(16em) 이상일 때 숨김.
.-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	표시된 컨테이너가 md 브레이크포인트(30em) 이하일 때 표시; 그렇지 않으면 숨김.
.-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	표시된 컨테이너가 xs 브레이크포인트(16em) 이하일 때 표시; 그렇지 않으면 숨김.
.-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	표시된 컨테이너가 md 브레이크포인트(30em) 이상일 때 표시; 그렇지 않으면 숨김.
.-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	표시된 컨테이너가 xs 브레이크포인트(16em) 이상일 때 표시; 그렇지 않으면 숨김.
.-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	뷰포트가 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	뷰포트가 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	뷰포트가 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	뷰포트가 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	뷰포트가 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	뷰포트가 xs 브레이크포인트(16em) 이상일 때 숨김.
.-show-max-content	뷰포트가 content 브레이크포인트(68.75em) 이하일 때(-hidden-min-content의 반대) 표시; 그렇지 않으면 숨김.
.-show-max-content-full-width	뷰포트가 content-full-width 브레이크포인트(98.75em) 이하일 때(-hidden-min-content-full-width의 반대) 표시; 그렇지 않으면 숨김.
.-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	뷰포트가 lg 브레이크포인트(48em) 이하일 때(-hidden-min-lg의 반대) 표시; 그렇지 않으면 숨김.
.-show-max-md	뷰포트가 md 브레이크포인트(30em) 이하일 때(-hidden-min-md의 반대) 표시; 그렇지 않으면 숨김.
.-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	뷰포트가 sm 브레이크포인트(20em) 이하일 때(-hidden-min-sm의 반대) 표시; 그렇지 않으면 숨김.
.-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	뷰포트가 xl 브레이크포인트(62em) 이하일 때(-hidden-min-xl의 반대) 표시; 그렇지 않으면 숨김.
.-show-max-xs	뷰포트가 xs 브레이크포인트(16em) 이하일 때(-hidden-min-xs의 반대) 표시; 그렇지 않으면 숨김.
.-show-min-content	뷰포트가 content 브레이크포인트(68.75em) 이상일 때(-hidden-max-content의 반대) 표시; 그렇지 않으면 숨김.
.-show-min-content-full-width	뷰포트가 content-full-width 브레이크포인트(98.75em) 이상일 때(-hidden-max-content-full-width의 반대) 표시; 그렇지 않으면 숨김.
.-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	뷰포트가 lg 브레이크포인트(48em) 이상일 때(-hidden-max-lg의 반대) 표시; 그렇지 않으면 숨김.
.-show-min-md	뷰포트가 md 브레이크포인트(30em) 이상일 때(-hidden-max-md의 반대) 표시; 그렇지 않으면 숨김.
.-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	뷰포트가 sm 브레이크포인트(20em) 이상일 때(-hidden-max-sm의 반대) 표시; 그렇지 않으면 숨김.
.-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	뷰포트가 xl 브레이크포인트(62em) 이상일 때(-hidden-max-xl의 반대) 표시; 그렇지 않으면 숨김.
.-show-min-xs	뷰포트가 xs 브레이크포인트(16em) 이상일 때(-hidden-max-xs의 반대) 표시; 그렇지 않으면 숨김.

사용자 정의 속성

속성	타입	기본	설명
--pantoken-bp-content	<length>	68.75em	content 브레이크포인트의 값(68.75em, 수동 작성, 테마화됨(토큰 IR에 없음)). 이를 재정의해도 컴파일된 @media/@container 임계값을 초과시키지 않습니다.
--pantoken-bp-content-full-width	<length>	98.75em	content-full-width 브레이크포인트의 값(98.75em, 수동 작성, 테마화됨(토큰 IR에 없음)). 이를 재정의해도 컴파일된 @media/@container 임계값을 초과시키지 않습니다.
--pantoken-bp-lg	<length>	48em	lg 브레이크포인트의 값(48em, --instui-component-tray-width-lg를 반영함). 이를 재정의해도 컴파일된 @media/@container 임계값을 초과시키지 않습니다.
--pantoken-bp-md	<length>	30em	md 브레이크포인트의 값(30em, --instui-component-tray-width-md를 반영함). 이를 재정의해도 컴파일된 @media/@container 임계값을 초과시키지 않습니다.
--pantoken-bp-sm	<length>	20em	sm 브레이크포인트의 값(20em, --instui-component-tray-width-sm를 반영함). 이를 재정의해도 컴파일된 @media/@container 임계값을 초과시키지 않습니다.
--pantoken-bp-xl	<length>	62em	xl 브레이크포인트의 값(62em, --instui-component-tray-width-xl를 반영함). 이를 재정의해도 컴파일된 @media/@container 임계값을 초과시키지 않습니다.
--pantoken-bp-xs	<length>	16em	xs 브레이크포인트의 값(16em, --instui-component-tray-width-xs를 반영함). 이를 재정의해도 컴파일된 @media/@container 임계값을 초과시키지 않습니다.

조건

타입	쿼리	설명
media	(max-width: 16em)	xs 브레이크포인트의 상한.
media	(min-width: 16em)	xs 브레이크포인트의 하한.
media	(max-width: 20em)	sm 브레이크포인트의 상한.
media	(min-width: 20em)	sm 브레이크포인트의 하한.
media	(max-width: 30em)	md 브레이크포인트의 상한.
media	(min-width: 30em)	md 브레이크포인트의 하한.
media	(max-width: 48em)	lg 브레이크포인트의 상한.
media	(min-width: 48em)	lg 브레이크포인트의 하한.
media	(max-width: 62em)	xl 브레이크포인트의 상한.
media	(min-width: 62em)	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: 16em)	마크된 컨테이너에 대해 평가된 xs 브레이크포인트의 상한.
container	(min-width: 16em)	마크된 컨테이너에 대해 평가된 xs 브레이크포인트의 하한.
container	(max-width: 20em)	마크된 컨테이너에 대해 평가된 sm 브레이크포인트의 상한.
container	(min-width: 20em)	마크된 컨테이너에 대해 평가된 sm 브레이크포인트의 하한.
container	(max-width: 30em)	마크된 컨테이너에 대해 평가되는 md 중단점의 상한.
container	(min-width: 30em)	마크된 컨테이너에 대해 평가되는 md 중단점의 하한.
container	(max-width: 48em)	마크된 컨테이너에 대해 평가되는 lg 중단점의 상한.
container	(min-width: 48em)	마크된 컨테이너에 대해 평가되는 lg 중단점의 하한.
container	(max-width: 62em)	마크된 컨테이너에 대해 평가되는 xl 중단점의 상한.
container	(min-width: 62em)	마크된 컨테이너에 대해 평가되는 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-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