CSS: responsive

[class*="-hidden-"],[class*="-show-"] — Các lớp hiển thị/ẩn theo chiều rộng khung nhìn hoặc chiều rộng container theo thang điểm breakpoint có chủ đề.

.instui-hidden-max-<bp>/-hidden-min-<bp> ẩn theo chiều rộng khung nhìn; .instui-show-max-<bp>/-show-min-<bp> là nghịch đảo (mặc định ẩn, chỉ hiển thị bên trong khoảng thông qua display: revert); các biến thể -cq- phản ứng theo chiều rộng của tổ tiên .instui-container thay vì chiều rộng khung nhìn. Các bậc thang xs/sm/md/lg/xl (lấy từ token thành phần tray-width trong IR) đều có bí danh dạng viết dài (x-small–x-large) và tên thiết bị (mobile/phablet/tablet/laptop/desktop) — cả hai đều đã bị deprecate ưu tiên tên ngắn — cộng thêm các bậc không tỉ lệ, có chủ đề content/content-full-width (max-width của vùng nội dung chính).

Source: index.ts

Sử dụng

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

Các ví dụ

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

Bộ sửa

Bộ sửa	Mô tả
.-cq-hidden-max-content	Ẩn khi khối được đánh dấu ở bằng hoặc nhỏ hơn breakpoint content (68.75em).
.-cq-hidden-max-content-full-width	Ẩn khi khối được đánh dấu ở bằng hoặc nhỏ hơn breakpoint 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	Ẩn khi khối được đánh dấu ở bằng hoặc nhỏ hơn breakpoint lg (48em).
.-cq-hidden-max-md	Ẩn khi khối được đánh dấu ở bằng hoặc nhỏ hơn breakpoint 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	Ẩn khi khối được đánh dấu ở bằng hoặc nhỏ hơn breakpoint 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	Ẩn khi khối được đánh dấu ở bằng hoặc nhỏ hơn breakpoint xl (62em).
.-cq-hidden-max-xs	Ẩn khi khối được đánh dấu ở bằng hoặc nhỏ hơn breakpoint xs (16em).
.-cq-hidden-min-content	Ẩn khi khối được đánh dấu ở bằng hoặc lớn hơn breakpoint content (68.75em).
.-cq-hidden-min-content-full-width	Ẩn khi khối được đánh dấu ở bằng hoặc lớn hơn breakpoint 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	Ẩn khi khối được đánh dấu ở bằng hoặc lớn hơn breakpoint lg (48em).
.-cq-hidden-min-md	Ẩn khi khối được đánh dấu ở bằng hoặc lớn hơn breakpoint 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	Ẩn khi khối được đánh dấu ở bằng hoặc lớn hơn breakpoint 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	Ẩn khi khối được đánh dấu ở bằng hoặc lớn hơn breakpoint xl (62em).
.-cq-hidden-min-xs	Ẩn khi khối được đánh dấu ở bằng hoặc lớn hơn breakpoint xs (16em).
.-cq-show-max-content	Hiện khi khối được đánh dấu ở bằng hoặc nhỏ hơn breakpoint content (68.75em); ngược lại bị ẩn.
.-cq-show-max-content-full-width	Hiện khi khối được đánh dấu ở bằng hoặc nhỏ hơn breakpoint content-full-width (98.75em); ngược lại bị ẩn.
.-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	Hiện khi khối được đánh dấu ở bằng hoặc nhỏ hơn breakpoint lg (48em); ngược lại bị ẩn.
.-cq-show-max-md	Hiện khi khối được đánh dấu ở bằng hoặc nhỏ hơn breakpoint md (30em); ngược lại bị ẩn.
.-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	Hiện khi khối được đánh dấu ở bằng hoặc nhỏ hơn breakpoint sm (20em); ngược lại bị ẩn.
.-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	Hiện khi khối được đánh dấu ở bằng hoặc nhỏ hơn breakpoint xl (62em); ngược lại bị ẩn.
.-cq-show-max-xs	Hiện khi khối được đánh dấu ở bằng hoặc nhỏ hơn breakpoint xs (16em); ngược lại bị ẩn.
.-cq-show-min-content	Hiện khi khối được đánh dấu ở bằng hoặc lớn hơn breakpoint content (68.75em); ngược lại bị ẩn.
.-cq-show-min-content-full-width	Hiện khi khối được đánh dấu ở bằng hoặc lớn hơn breakpoint content-full-width (98.75em); ngược lại bị ẩn.
.-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	Hiện khi khối được đánh dấu ở bằng hoặc lớn hơn breakpoint lg (48em); ngược lại bị ẩn.
.-cq-show-min-md	Hiện khi khối được đánh dấu ở bằng hoặc lớn hơn breakpoint md (30em); ngược lại bị ẩn.
.-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	Hiện khi khối được đánh dấu ở bằng hoặc lớn hơn breakpoint sm (20em); ngược lại bị ẩn.
.-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	Hiện khi khối được đánh dấu ở bằng hoặc lớn hơn breakpoint xl (62em); ngược lại bị ẩn.
.-cq-show-min-xs	Hiện khi khối được đánh dấu ở bằng hoặc lớn hơn breakpoint xs (16em); ngược lại bị ẩn.
.-hidden-max-content	Ẩn khi khung nhìn ở bằng hoặc nhỏ hơn breakpoint content (68.75em).
.-hidden-max-content-full-width	Ẩn khi khung nhìn ở bằng hoặc nhỏ hơn breakpoint 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	Ẩn khi khung nhìn ở bằng hoặc nhỏ hơn breakpoint lg (48em).
.-hidden-max-md	Ẩn khi khung nhìn ở bằng hoặc nhỏ hơn breakpoint 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	Ẩn khi khung nhìn ở bằng hoặc nhỏ hơn breakpoint 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	Ẩn khi khung nhìn ở bằng hoặc nhỏ hơn breakpoint xl (62em).
.-hidden-max-xs	Ẩn khi khung nhìn ở bằng hoặc nhỏ hơn breakpoint xs (16em).
.-hidden-min-content	Ẩn khi khung nhìn ở bằng hoặc lớn hơn breakpoint content (68.75em).
.-hidden-min-content-full-width	Ẩn khi khung nhìn ở bằng hoặc lớn hơn breakpoint 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	Ẩn khi khung nhìn ở bằng hoặc lớn hơn breakpoint lg (48em).
.-hidden-min-md	Ẩn khi khung nhìn ở hoặc trên điểm ngắt 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	Ẩn khi khung nhìn ở hoặc trên điểm ngắt 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	Ẩn khi khung nhìn ở hoặc trên điểm ngắt xl (62em).
.-hidden-min-xs	Ẩn khi khung nhìn ở hoặc trên điểm ngắt xs (16em).
.-show-max-content	Hiển thị (đối ngược của -hidden-min-content) khi khung nhìn ở hoặc dưới điểm ngắt content (68.75em); nếu không thì ẩn.
.-show-max-content-full-width	Hiển thị (đối ngược của -hidden-min-content-full-width) khi khung nhìn ở hoặc dưới điểm ngắt content-full-width (98.75em); nếu không thì ẩn.
.-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	Hiển thị (đối ngược của -hidden-min-lg) khi khung nhìn ở hoặc dưới điểm ngắt lg (48em); nếu không thì ẩn.
.-show-max-md	Hiển thị (đối ngược của -hidden-min-md) khi khung nhìn ở hoặc dưới điểm ngắt md (30em); nếu không thì ẩn.
.-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	Hiển thị (đối ngược của -hidden-min-sm) khi khung nhìn ở hoặc dưới điểm ngắt sm (20em); nếu không thì ẩn.
.-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	Hiển thị (đối ngược của -hidden-min-xl) khi khung nhìn ở hoặc dưới điểm ngắt xl (62em); nếu không thì ẩn.
.-show-max-xs	Hiển thị (đối ngược của -hidden-min-xs) khi khung nhìn ở hoặc dưới điểm ngắt xs (16em); nếu không thì ẩn.
.-show-min-content	Hiển thị (đối ngược của -hidden-max-content) khi khung nhìn ở hoặc trên điểm ngắt content (68.75em); nếu không thì ẩn.
.-show-min-content-full-width	Hiển thị (đối ngược của -hidden-max-content-full-width) khi khung nhìn ở hoặc trên điểm ngắt content-full-width (98.75em); nếu không thì ẩn.
.-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	Hiển thị (đối ngược của -hidden-max-lg) khi khung nhìn ở hoặc trên điểm ngắt lg (48em); nếu không thì ẩn.
.-show-min-md	Hiển thị (đối ngược của -hidden-max-md) khi khung nhìn ở hoặc trên điểm ngắt md (30em); nếu không thì ẩn.
.-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	Hiển thị (đối ngược của -hidden-max-sm) khi khung nhìn ở hoặc trên điểm ngắt sm (20em); nếu không thì ẩn.
.-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	Hiển thị (đối ngược của -hidden-max-xl) khi khung nhìn ở hoặc trên điểm ngắt xl (62em); nếu không thì ẩn.
.-show-min-xs	Hiển thị (đối ngược của -hidden-max-xs) khi khung nhìn ở hoặc trên điểm ngắt xs (16em); nếu không thì ẩn.

Thuộc tính tuỳ chỉnh

Thuộc tính	Kiểu	Mặc định	Mô tả
--pantoken-bp-content	<length>	68.75em	Giá trị của điểm ngắt content (68.75em, do người dùng viết tay, có chủ đề (không nằm trong token IR)). Ghi đè nó không làm di chuyển ngưỡng đã biên dịch @media/@container lên trên.
--pantoken-bp-content-full-width	<length>	98.75em	Giá trị của điểm ngắt content-full-width (98.75em, do người dùng viết tay, có chủ đề (không nằm trong token IR)). Ghi đè nó không làm di chuyển ngưỡng đã biên dịch @media/@container lên trên.
--pantoken-bp-lg	<length>	48em	Giá trị của điểm ngắt lg (48em, phản chiếu --instui-component-tray-width-lg). Ghi đè nó không làm di chuyển ngưỡng đã biên dịch @media/@container lên trên.
--pantoken-bp-md	<length>	30em	Giá trị của điểm ngắt md (30em, phản chiếu --instui-component-tray-width-md). Ghi đè nó không làm di chuyển ngưỡng đã biên dịch @media/@container lên trên.
--pantoken-bp-sm	<length>	20em	Giá trị của điểm ngắt sm (20em, phản chiếu --instui-component-tray-width-sm). Ghi đè nó không làm di chuyển ngưỡng đã biên dịch @media/@container lên trên.
--pantoken-bp-xl	<length>	62em	Giá trị của điểm ngắt xl (62em, phản chiếu --instui-component-tray-width-xl). Ghi đè nó không làm di chuyển ngưỡng đã biên dịch @media/@container lên trên.
--pantoken-bp-xs	<length>	16em	Giá trị của điểm ngắt xs (16em, phản chiếu --instui-component-tray-width-xs). Ghi đè nó không làm di chuyển ngưỡng đã biên dịch @media/@container lên trên.

Điều kiện

Kiểu	Truy vấn	Mô tả
media	(max-width: 16em)	Giới hạn trên của điểm ngắt xs.
media	(min-width: 16em)	Giới hạn dưới của điểm ngắt xs.
media	(max-width: 20em)	Giới hạn trên của điểm ngắt sm.
media	(min-width: 20em)	Giới hạn dưới của điểm ngắt sm.
media	(max-width: 30em)	Giới hạn trên của điểm ngắt md.
media	(min-width: 30em)	Giới hạn dưới của điểm ngắt md.
media	(max-width: 48em)	Giới hạn trên của điểm ngắt lg.
media	(min-width: 48em)	Giới hạn dưới của điểm ngắt lg.
media	(max-width: 62em)	Giới hạn trên của điểm ngắt xl.
media	(min-width: 62em)	Giới hạn dưới của điểm ngắt xl.
media	(max-width: 68.75em)	Giới hạn trên của điểm ngắt content.
media	(min-width: 68.75em)	Giới hạn dưới của điểm ngắt content.
media	(max-width: 98.75em)	Giới hạn trên của điểm ngắt content-full-width.
media	(min-width: 98.75em)	Giới hạn dưới của điểm ngắt content-full-width.
container	(max-width: 16em)	Giới hạn trên của điểm ngắt xs, được đánh giá so với một container đã được gắn dấu.
container	(min-width: 16em)	Giới hạn dưới của điểm ngắt xs, được đánh giá so với một container đã được gắn dấu.
container	(max-width: 20em)	Giới hạn trên của điểm ngắt sm, được đánh giá so với một container đã được gắn dấu.
container	(min-width: 20em)	Giới hạn dưới của điểm ngắt sm, được đánh giá so với một container đã được gắn dấu.
container	(max-width: 30em)	Giới hạn trên của điểm ngắt md, được đánh giá trên một container được đánh dấu.
container	(min-width: 30em)	Giới hạn dưới của điểm ngắt md, được đánh giá trên một container được đánh dấu.
container	(max-width: 48em)	Giới hạn trên của điểm ngắt lg, được đánh giá trên một container được đánh dấu.
container	(min-width: 48em)	Giới hạn dưới của điểm ngắt lg, được đánh giá trên một container được đánh dấu.
container	(max-width: 62em)	Giới hạn trên của điểm ngắt xl, được đánh giá trên một container được đánh dấu.
container	(min-width: 62em)	Giới hạn dưới của điểm ngắt xl, được đánh giá trên một container được đánh dấu.
container	(max-width: 68.75em)	Giới hạn trên của điểm ngắt content, được đánh giá trên một container được đánh dấu.
container	(min-width: 68.75em)	Giới hạn dưới của điểm ngắt content, được đánh giá trên một container được đánh dấu.
container	(max-width: 98.75em)	Giới hạn trên của điểm ngắt content-full-width, được đánh giá trên một container được đánh dấu.
container	(min-width: 98.75em)	Giới hạn dưới của điểm ngắt content-full-width, được đánh giá trên một container được đánh dấu.

Token tiêu thụ

Token	Kiểu	Giá trị
--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