CSS: tray

.instui-tray — He panui ā-paki-taha e keri mai ana mai i tetahi taha; he [popover] taketake rānei, he <dialog> taketake rānei.

Ka whakatau ngā tūnga timatanga/me mutu ki runga i inset-inline (tūtohi, mōhio ki te aronga); ka whakaata-aunoa te huringa keri-mai i raro i tētahi [dir="rtl"] mātua, nō reira kāore he tohu anō e hiahiatia mō ngā tuhinga matau-ki-mauī.

Source: tray.css

Wātea mō te katoa

He mata kōrerorero, he mata popover rānei te kōpae, nō reira tāngia tana ingoa ki aria-label rānei aria-labelledby, ā, kei te mana kati he aria-label (kei te whakamahi te .instui-close-button i te tauira i te aria-label="Close").

Ngā Whakamahi

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

Ngā tauira

<div class="instui-tray -placement-end -size-sm">
  <span class="instui-heading -level-h3">Filters</span>
  <p class="-size-sm">A tray slides in from the start edge and fills the viewport height.</p>
</div>
<button class="instui-button -toggle">toggle tray</button>

Hanganga

.instui-tray
  close-button (component, 0..1)
  ‹content›

flowchart TD n0[".instui-tray"]:::cssdoc-root n1(["close-button"]):::cssdoc-component n2[/"‹content›"/]:::cssdoc-slot n0 -.->|0..1| n1 n0 --> n2 click n1 "/api/css/close-button.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Ngā Kaitī

Kaiwhakatikatika	Whakamārama
.-placement-bottom	Pākia ki te taha raro.
.-placement-end	Pākia ki te taha mutunga (inline-end).
.-placement-start	(taunoa) Pākia ki te taha tīmatanga (inline-start).
.-placement-top	Pākia ki te taha runga.
.-size-large	Nui. He ingoa roa mō -size-lg.
.-size-lg	Nui.
.-size-md	(taunoa) Waenga.
.-size-medium	(taunoa) Waenga. He ingoa roa atu mō -size-md.
.-size-regular	Kua tukuna — use .-size-md.
.-size-sm	Ititi.
.-size-small	Ititi. He ingoa roa mō -size-sm.
.-size-x-large	Nui rawa. He ingoa roa mō -size-xl.
.-size-x-small	Ititi rawa. He ingoa roa mō -size-xs.
.-size-xl	Nui rawa.
.-size-xs	Ititi rawa.

Ngā Conditions

Momo	Pātai	Whakamārama
supports	(transition-behavior: allow-discrete)	—

Ngā tohu i whakamahia

Token	Momo	Uara
--instui-component-tray-background-color	<color>	LightDarklight-dark(#ffffff, #1C222B)
--instui-component-tray-border-color	<color>	LightDarklight-dark(#E8EAEC, #334450)
--instui-component-tray-border-width	<length>	0.0625rem
--instui-component-tray-padding	<length>	1.5rem
--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
--instui-component-tray-z-index	<integer>	9999
--instui-elevation-topmost	none | <shadow>#	—
--tray-slide-x	—	-100%
--tray-slide-y	—	0%

Tautoko pūtirotiro

• Ka huaki mā te API taketake [popover] me @starting-style; kei muri te keri-mai i tētahi tiaki @supports (transition-behavior: allow-discrete), nō reira ka whakatuwhera tonu te kōpae i ngā pūtirotiro kāore tēnei āhuatanga, engari kāore te keri.

Ngā wāhanga-iti

• close-button

Hono

• modal — Te tauira ārai ka taea te whakakore, ā, kei te pokapū i te wāhi, kaua ko te paki-taha.
• popover — Te mata o runga whānui e hangai ana tēnei.