CSS: responsive

[class*="-hidden-"],[class*="-show-"] — Kelas tampil/sembunyi berdasarkan lebar viewport atau kontainer di seluruh skala breakpoint bertema.

.instui-hidden-max-<bp>/-hidden-min-<bp> menyembunyikan berdasarkan lebar viewport; .instui-show-max-<bp>/-show-min-<bp> adalah inversnya (disembunyikan secara default, hanya ditampilkan di dalam rentang melalui display: revert); varian -cq- bereaksi terhadap lebar leluhur .instui-container sebagai gantinya, bukan lebar viewport. Tier skala xs/sm/md/lg/xl (diambil dari token komponen tray-width IR) masing‑masing dialiaskan ke ejaan bentuk panjang (x-small–x-large) dan nama perangkat (mobile/phablet/tablet/laptop/desktop) — keduanya sudah usang dan digantikan oleh nama pendek — plus tier bertema tanpa skala content/content-full-width (max-width area konten utama).

Source: index.ts

Penggunaan

css

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

Contoh

html

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

Modifikator

Modifikator	Deskripsi
`.-cq-hidden-max-content`	Sembunyikan ketika kontainer yang ditandai berada pada atau di bawah breakpoint `content` (`68.75em`).
`.-cq-hidden-max-content-full-width`	Sembunyikan ketika kontainer yang ditandai berada pada atau di bawah 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`	Sembunyikan ketika kontainer yang ditandai berada pada atau di bawah breakpoint `lg` (`48em`).
`.-cq-hidden-max-md`	Sembunyikan ketika kontainer yang ditandai berada pada atau di bawah 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`	Sembunyikan ketika kontainer yang ditandai berada pada atau di bawah 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`	Sembunyikan ketika kontainer yang ditandai berada pada atau di bawah breakpoint `xl` (`62em`).
`.-cq-hidden-max-xs`	Sembunyikan ketika kontainer yang ditandai berada pada atau di bawah breakpoint `xs` (`16em`).
`.-cq-hidden-min-content`	Sembunyikan ketika kontainer yang ditandai berada pada atau di atas breakpoint `content` (`68.75em`).
`.-cq-hidden-min-content-full-width`	Sembunyikan ketika kontainer yang ditandai berada pada atau di atas 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`	Sembunyikan ketika kontainer yang ditandai berada pada atau di atas breakpoint `lg` (`48em`).
`.-cq-hidden-min-md`	Sembunyikan ketika kontainer yang ditandai berada pada atau di atas 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`	Sembunyikan ketika kontainer yang ditandai berada pada atau di atas 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`	Sembunyikan ketika kontainer yang ditandai berada pada atau di atas breakpoint `xl` (`62em`).
`.-cq-hidden-min-xs`	Sembunyikan ketika kontainer yang ditandai berada pada atau di atas breakpoint `xs` (`16em`).
`.-cq-show-max-content`	Tampilkan ketika kontainer yang ditandai berada pada atau di bawah breakpoint `content` (`68.75em`); disembunyikan selain itu.
`.-cq-show-max-content-full-width`	Tampilkan ketika kontainer yang ditandai berada pada atau di bawah breakpoint `content-full-width` (`98.75em`); disembunyikan selain itu.
`.-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`	Tampilkan ketika kontainer yang ditandai berada pada atau di bawah breakpoint `lg` (`48em`); disembunyikan selain itu.
`.-cq-show-max-md`	Tampilkan ketika kontainer yang ditandai berada pada atau di bawah breakpoint `md` (`30em`); disembunyikan selain itu.
`.-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`	Tampilkan ketika kontainer yang ditandai berada pada atau di bawah breakpoint `sm` (`20em`); disembunyikan selain itu.
`.-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`	Tampilkan ketika kontainer yang ditandai berada pada atau di bawah breakpoint `xl` (`62em`); disembunyikan selain itu.
`.-cq-show-max-xs`	Tampilkan ketika kontainer yang ditandai berada pada atau di bawah breakpoint `xs` (`16em`); disembunyikan selain itu.
`.-cq-show-min-content`	Tampilkan ketika kontainer yang ditandai berada pada atau di atas breakpoint `content` (`68.75em`); disembunyikan selain itu.
`.-cq-show-min-content-full-width`	Tampilkan ketika kontainer yang ditandai berada pada atau di atas breakpoint `content-full-width` (`98.75em`); disembunyikan selain itu.
`.-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`	Tampilkan ketika kontainer yang ditandai berada pada atau di atas breakpoint `lg` (`48em`); disembunyikan selain itu.
`.-cq-show-min-md`	Tampilkan ketika kontainer yang ditandai berada pada atau di atas breakpoint `md` (`30em`); disembunyikan selain itu.
`.-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`	Tampilkan ketika kontainer yang ditandai berada pada atau di atas breakpoint `sm` (`20em`); disembunyikan selain itu.
`.-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`	Tampilkan ketika kontainer yang ditandai berada pada atau di atas breakpoint `xl` (`62em`); disembunyikan selain itu.
`.-cq-show-min-xs`	Tampilkan ketika kontainer yang ditandai berada pada atau di atas breakpoint `xs` (`16em`); disembunyikan selain itu.
`.-hidden-max-content`	Sembunyikan ketika viewport berada pada atau di bawah breakpoint `content` (`68.75em`).
`.-hidden-max-content-full-width`	Sembunyikan ketika viewport berada pada atau di bawah 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`	Sembunyikan ketika viewport berada pada atau di bawah breakpoint `lg` (`48em`).
`.-hidden-max-md`	Sembunyikan ketika viewport berada pada atau di bawah 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`	Sembunyikan ketika viewport berada pada atau di bawah 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`	Sembunyikan ketika viewport berada pada atau di bawah breakpoint `xl` (`62em`).
`.-hidden-max-xs`	Sembunyikan ketika viewport berada pada atau di bawah breakpoint `xs` (`16em`).
`.-hidden-min-content`	Sembunyikan ketika viewport berada pada atau di atas breakpoint `content` (`68.75em`).
`.-hidden-min-content-full-width`	Sembunyikan ketika viewport berada pada atau di atas 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`	Sembunyikan ketika viewport berada pada atau di atas breakpoint `lg` (`48em`).
`.-hidden-min-md`	Sembunyikan ketika viewport berada pada atau di atas breakpoint `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`	Sembunyikan ketika viewport berada pada atau di atas breakpoint `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`	Sembunyikan ketika viewport berada pada atau di atas breakpoint `xl` (`62em`).
`.-hidden-min-xs`	Sembunyikan ketika viewport berada pada atau di atas breakpoint `xs` (`16em`).
`.-show-max-content`	Tampilkan (kebalikan dari `-hidden-min-content`) ketika viewport berada pada atau di bawah breakpoint `content` (`68.75em`); tersembunyi selain itu.
`.-show-max-content-full-width`	Tampilkan (kebalikan dari `-hidden-min-content-full-width`) ketika viewport berada pada atau di bawah breakpoint `content-full-width` (`98.75em`); tersembunyi selain itu.
`.-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`	Tampilkan (kebalikan dari `-hidden-min-lg`) ketika viewport berada pada atau di bawah breakpoint `lg` (`48em`); tersembunyi selain itu.
`.-show-max-md`	Tampilkan (kebalikan dari `-hidden-min-md`) ketika viewport berada pada atau di bawah breakpoint `md` (`30em`); tersembunyi selain itu.
`.-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`	Tampilkan (kebalikan dari `-hidden-min-sm`) ketika viewport berada pada atau di bawah breakpoint `sm` (`20em`); tersembunyi selain itu.
`.-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`	Tampilkan (kebalikan dari `-hidden-min-xl`) ketika viewport berada pada atau di bawah breakpoint `xl` (`62em`); tersembunyi selain itu.
`.-show-max-xs`	Tampilkan (kebalikan dari `-hidden-min-xs`) ketika viewport berada pada atau di bawah breakpoint `xs` (`16em`); tersembunyi selain itu.
`.-show-min-content`	Tampilkan (kebalikan dari `-hidden-max-content`) ketika viewport berada pada atau di atas breakpoint `content` (`68.75em`); tersembunyi selain itu.
`.-show-min-content-full-width`	Tampilkan (kebalikan dari `-hidden-max-content-full-width`) ketika viewport berada pada atau di atas breakpoint `content-full-width` (`98.75em`); tersembunyi selain itu.
`.-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`	Tampilkan (kebalikan dari `-hidden-max-lg`) ketika viewport berada pada atau di atas breakpoint `lg` (`48em`); tersembunyi selain itu.
`.-show-min-md`	Tampilkan (kebalikan dari `-hidden-max-md`) ketika viewport berada pada atau di atas breakpoint `md` (`30em`); tersembunyi selain itu.
`.-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`	Tampilkan (kebalikan dari `-hidden-max-sm`) ketika viewport berada pada atau di atas breakpoint `sm` (`20em`); tersembunyi selain itu.
`.-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`	Tampilkan (kebalikan dari `-hidden-max-xl`) ketika viewport berada pada atau di atas breakpoint `xl` (`62em`); tersembunyi selain itu.
`.-show-min-xs`	Tampilkan (kebalikan dari `-hidden-max-xs`) ketika viewport berada pada atau di atas breakpoint `xs` (`16em`); tersembunyi selain itu.

Properti khusus

Properti	Tipe	Bawaan	Deskripsi
`--pantoken-bp-content`	`<length>`	`68.75em`	Nilai breakpoint `content` (`68.75em`, ditulis tangan, bertema (tidak ada di token IR)). Menimpa nilainya tidak memindahkan ambang terkompilasi `@media`/`@container` ke atas.
`--pantoken-bp-content-full-width`	`<length>`	`98.75em`	Nilai breakpoint `content-full-width` (`98.75em`, ditulis tangan, bertema (tidak ada di token IR)). Menimpa nilainya tidak memindahkan ambang terkompilasi `@media`/`@container` ke atas.
`--pantoken-bp-lg`	`<length>`	`48em`	Nilai breakpoint `lg` (`48em`, mencerminkan `--instui-component-tray-width-lg`). Menimpa nilainya tidak memindahkan ambang terkompilasi `@media`/`@container` ke atas.
`--pantoken-bp-md`	`<length>`	`30em`	Nilai breakpoint `md` (`30em`, mencerminkan `--instui-component-tray-width-md`). Menimpa nilainya tidak memindahkan ambang terkompilasi `@media`/`@container` ke atas.
`--pantoken-bp-sm`	`<length>`	`20em`	Nilai breakpoint `sm` (`20em`, mencerminkan `--instui-component-tray-width-sm`). Menimpa nilainya tidak memindahkan ambang terkompilasi `@media`/`@container` ke atas.
`--pantoken-bp-xl`	`<length>`	`62em`	Nilai breakpoint `xl` (`62em`, mencerminkan `--instui-component-tray-width-xl`). Menimpa nilainya tidak memindahkan ambang terkompilasi `@media`/`@container` ke atas.
`--pantoken-bp-xs`	`<length>`	`16em`	Nilai breakpoint `xs` (`16em`, mencerminkan `--instui-component-tray-width-xs`). Menimpa nilainya tidak memindahkan ambang terkompilasi `@media`/`@container` ke atas.

Kondisi

Tipe	Kueri	Deskripsi
media	`(max-width: 16em)`	Batas atas breakpoint `xs`.
media	`(min-width: 16em)`	Batas bawah breakpoint `xs`.
media	`(max-width: 20em)`	Batas atas breakpoint `sm`.
media	`(min-width: 20em)`	Batas bawah breakpoint `sm`.
media	`(max-width: 30em)`	Batas atas breakpoint `md`.
media	`(min-width: 30em)`	Batas bawah breakpoint `md`.
media	`(max-width: 48em)`	Batas atas breakpoint `lg`.
media	`(min-width: 48em)`	Batas bawah breakpoint `lg`.
media	`(max-width: 62em)`	Batas atas breakpoint `xl`.
media	`(min-width: 62em)`	Batas bawah breakpoint `xl`.
media	`(max-width: 68.75em)`	Batas atas breakpoint `content`.
media	`(min-width: 68.75em)`	Batas bawah breakpoint `content`.
media	`(max-width: 98.75em)`	Batas atas breakpoint `content-full-width`.
media	`(min-width: 98.75em)`	Batas bawah breakpoint `content-full-width`.
container	`(max-width: 16em)`	Batas atas breakpoint `xs`, dievaluasi terhadap container yang ditandai.
container	`(min-width: 16em)`	Batas bawah breakpoint `xs`, dievaluasi terhadap container yang ditandai.
container	`(max-width: 20em)`	Batas atas breakpoint `sm`, dievaluasi terhadap container yang ditandai.
container	`(min-width: 20em)`	Batas bawah breakpoint `sm`, dievaluasi terhadap container yang ditandai.
container	`(max-width: 30em)`	Batas atas dari breakpoint `md`, dievaluasi terhadap sebuah kontainer yang ditandai.
container	`(min-width: 30em)`	Batas bawah dari breakpoint `md`, dievaluasi terhadap sebuah kontainer yang ditandai.
container	`(max-width: 48em)`	Batas atas dari breakpoint `lg`, dievaluasi terhadap sebuah kontainer yang ditandai.
container	`(min-width: 48em)`	Batas bawah dari breakpoint `lg`, dievaluasi terhadap sebuah kontainer yang ditandai.
container	`(max-width: 62em)`	Batas atas dari breakpoint `xl`, dievaluasi terhadap sebuah kontainer yang ditandai.
container	`(min-width: 62em)`	Batas bawah dari breakpoint `xl`, dievaluasi terhadap sebuah kontainer yang ditandai.
container	`(max-width: 68.75em)`	Batas atas dari breakpoint `content`, dievaluasi terhadap sebuah kontainer yang ditandai.
container	`(min-width: 68.75em)`	Batas bawah dari breakpoint `content`, dievaluasi terhadap sebuah kontainer yang ditandai.
container	`(max-width: 98.75em)`	Batas atas dari breakpoint `content-full-width`, dievaluasi terhadap sebuah kontainer yang ditandai.
container	`(min-width: 98.75em)`	Batas bawah dari breakpoint `content-full-width`, dievaluasi terhadap sebuah kontainer yang ditandai.

Token yang digunakan

Token	Tipe	Nilai
`--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`

tools

ai

platforms

renderers

packages

formats

design

bundlers

plugins

pantoken

postcss

typedoc

vite

Komponen

breadcrumb

calendar

drawer-layout

list

menu

modal

pagination

side-nav-bar

table

tabs

Utilitas

Aturan

Plugins

layout

CSS: responsive

Penggunaan

Contoh

Modifikator

Properti khusus

Kondisi

Token yang digunakan

pantoken

postcss

typedoc

vite

breadcrumb

calendar

drawer-layout

list

menu

modal

pagination

side-nav-bar

table

tabs

CSS: responsive ​

Penggunaan ​

Contoh ​

Modifikator ​

Properti khusus ​

Kondisi ​

Token yang digunakan ​

CSS: responsive

Penggunaan

Contoh

Modifikator

Properti khusus

Kondisi

Token yang digunakan