CSS: breadcrumb

.instui-breadcrumb — Egy útmorzsa nyom / elválasztókkal; az utolsó morzsa az aktuális oldal.

Forrás: breadcrumb.css

Akadálymentesség

Burkolja be az nyomot <nav aria-label>-be és jelölje meg az aktuális oldal morzsáját a aria-current="page"-vel.

Használat

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

Példák

<nav class="instui-breadcrumb" aria-label="Breadcrumb">
  <span class="item">
    <a href="#"><span class="instui-icon -icon-house"></span> Home</a>
  </span>
  <span class="item"><a href="#">Guides</a></span>
  <span class="item"><a href="#">Components</a></span>
  <span class="item" aria-current="page">Breadcrumb</span>
</nav>

HomeGuidesComponentsBreadcrumb

Felépítés

.instui-breadcrumb
  .item
    a
      [class*="-icon-"] (0..1)

flowchart TD n0[".instui-breadcrumb"]:::cssdoc-root n1(".item"):::cssdoc-part n2("a"):::cssdoc-part n3("[class*="-icon-"]"):::cssdoc-part n2 -.->|0..1| n3 n1 --> n2 n0 --> n1 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

Módosítók

Módosító	Leírás
.-icon-*	Ábrázoljon egy karakter ikont egy morzsa linkben (például otthon az első morzsában).
.-size-large	Nagy. Hosszú forma alias a -size-lg.
.-size-lg	Nagy.
.-size-sm	Kicsi.
.-size-small	Kicsi. Hosszú forma alias a -size-sm.

Részek

Rész	Leírás
.item	Egy morzsa; az utolsó az aktuális oldal.

Pszeudoelemek

Pszeudoelem	Leírás
::after	Ábrázol a / elválasztó után minden morzsa kivételével az utolsót.

Felhasznált tokenek

Token	Típus	Érték
--instui-color-text-muted	<color>	light-dark(#576773, #AAB0B5)LightDark
--instui-component-breadcrumb-gap-lg	<length>	0.5rem
--instui-component-breadcrumb-gap-md	<length>	0.25rem
--instui-component-breadcrumb-gap-sm	<length>	0.125rem
--instui-component-link-font-family	[ <font-family-name> | <generic-font-family> ]#	Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-link-font-size-lg	<length>	1.75rem
--instui-component-link-font-size-md	<length>	1rem
--instui-component-link-font-size-sm	<length>	0.875rem
--instui-component-link-text-color	<color>	light-dark(#2369A4, #7FB4F1)LightDark
--instui-component-link-text-hover-color	<color>	light-dark(#1A5281, #ACCDF7)LightDark

Böngészőtámogatás

• Tartalmazza az elem stílusait a CSS @scope szabállyal; szükséges egy friss Chromium, Firefox, vagy Safari.

Kapcsolódó

• link — Stílusol minden morzsa linkként.