Buneilimintí comhéadain

Na cruthanna nach féidir le comhpháirt a bheith, mar go dtimpeallaíonn siad corp nach eol ach don ghlaoiteoir: an cárta rannóige, an greille sonraí, an roghchlár nochta, agus creatlach na mblaosc féin. Seolann tokens.css na haicmí agus scríobhann feidhmchlár an mharcáil. Is é atá thíos an mharcáil a thugann ui.Styleguide ar ais, lena focail i do theanga féin, agus coinníonn tástálacha ui an mharcáil sin in aghaidh tokens.css.

Tá gach sampla beo, ach ní théann a naisc áit ar bith.

box

Cárta stuáilte na rannóige, agus an ceannteideal a shuíonn lasmuigh de.

Cé acu cárta is cé

Níl aon stuáil ag rst-list ná rst-card d'aon ghnó: sraith rónna a choinníonn siad, agus stuálann gach ró é féin. Cuir foirm, alt, stiall nasc nó aon rud eile nach ró é díreach isteach i gceann acu agus léireofar é ar aon leibhéal leis an imlíne; is é an téacs ag baint leis an imeall an comhartha. Is é rst-box an cárta stuáilte d'ábhar ar bith, agus a cheannteideal mar rst-box-head deartháireach roimhe.

Deasc Fón HTML

<div rst-box-head>
  <h2>Íocaíocht amach</h2>
  <a rst-btn href="/payout/edit">Cuir in eagar</a>
</div>
<section rst-box>
  <p>Suíonn gach rud ar scáileán taobh istigh de bhoscaí.</p>
  <div rst-box-foot>Nuashonraithe 2 uair an chloig ó shin</div>
</section>

button

Tá ceithre leagan agus trí mhéid de chnaipí ann, agus is féidir le nasc cuma cnaipe a bheith air. Don roithleán a thaispeánann foirm agus í á seoladh, féach form-foot.

Deasc Fón HTML

<p>
  <button rst-btn type="button">Cealaigh</button> <button rst-btn="primary" type="button">Sábháil</button> <button rst-btn="ghost" type="button">Réamhamharc</button> <button rst-btn="danger" type="button">Scrios</button>
</p>
<p>
  <button rst-btn="primary sm" type="button">Beag</button> <button rst-btn="primary" type="button">Réamhshocraithe</button> <button rst-btn="primary lg" type="button">Mór</button> <a rst-btn href="/orders">Féach ar na horduithe</a>
</p>
<p>
  <button rst-btn="primary block" type="button">Lean ar aghaidh</button>
</p>
<p>
  <button rst-btn type="button" disabled>Cartlannaithe</button>
</p>

dropdown

An roghchlár details/summary atá taobh thiar de roghchláir bharr an leathanaigh agus de scagaire barra liosta, mar aon le scagaire i bhfeidhm mar shlis inbhainte.

Deasc Fón HTML

<details rst-dropdown name="rst-menus">
  <summary>
    Scag
    <span rst-caret aria-hidden="true">
      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
    </span>
    <span class="rst-sr-only">Scag orduithe: Íoctha</span>
  </summary>
  <div rst-dropdown-menu>
    <a aria-current="true" href="/orders?status=paid">Íoctha</a>
    <details rst-menu-group name="rst-menus-price" open>
      <summary>Praghas</summary>
      <div>
        <a href="/orders?price=free">Saor in aisce</a>
      </div>
    </details>
  </div>
</details>
<span rst-ftok>
  <span rst-ftok-k>Íoctha</span>
  <a href="/orders" aria-label="Bain an scagaire Íoctha">✕</a>
</span>

form-layout

Na tréithe a thugann a rithim agus a bharra sábhála d'fhoirm. Ní chuireann aon pháirt amach iad; fillann siad timpeall ar shraith réimsí a chum an glaoiteoir.

Deasc Fón HTML

<form rst-form-flow method="post" action="/settings">
  <div rst-field>
    <label rst-field-label for="name">Ainm</label>
    <input rst-input type="text" id="name" name="name">
  </div>
  <div rst-field>
    <label rst-field-label for="email">Ríomhphost</label>
    <input rst-input type="email" id="email" name="email">
  </div>
  <div rst-field-row>
    <div class="rst-grow" rst-field>
      <label rst-field-label for="city">Cathair</label>
      <input rst-input type="text" id="city" name="city">
    </div>
    <div rst-field>
      <label rst-field-label for="zip">Cód poist</label>
      <input rst-input="short" type="text" id="zip" name="zip">
    </div>
  </div>
  <div rst-form-bar>
    <span rst-form-bar-note>Sábháiltear athruithe láithreach.</span>
    <div rst-form-actions>
      <a rst-btn href="/settings">Cealaigh</a>
      <button rst-btn="primary" type="submit">Sábháil</button>
    </div>
  </div>
</form>

help

Comhartha ceiste le himlíne a nascann le halt cabhrach. Maisiúchán is ea a leid CSS; iompraíonn an nasc a lipéad iomlán féin.

Deasc Fón HTML

<a rst-help rst-tip href="/help/orders" target="_blank" rel="noopener" aria-label="Cabhair: orduithe" data-tip="Faoi orduithe">
  <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>
</a>

list-grid

Fíorfhoclóir na dtáblaí sonraí: socraíonn an cárta a cholúin uair amháin, ní roghnaíonn na rónna ach cealla.

Cruachtar scáileáin go hingearach

Is colún é scáileán: page-header, ansin section-header + cárta, ansin an chéad section-header + cárta eile, in ord léitheoireachta. Tá an leagan amach cothrománach fágtha faoi na cora cainte a sheolann é: rst-box-head, rst-field-row, rst-lbar, cealla rst-lrow, rst-seg-tabs.

Deasc Fón HTML

<div rst-card style="--rst-cols: 2fr 110px var(--rst-col-menu)">
  <div rst-lrow="head">
    <span>Ordú</span>
    <span class="rst-m-hide">Stádas</span>
    <span></span>
  </div>
  <div rst-lrow>
    <a class="rst-nm" href="/orders/AB3PX"><bdi>Grace Hopper</bdi>
      <small>AB3PX · <bdi>grace@example.com</bdi></small>
    </a>
    <span class="rst-m-hide rst-cell-mut">Íoctha</span>
    <details rst-row-menu name="rst-menus">
      <summary aria-label="Gníomhartha do Grace Hopper">
        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
      </summary>
      <div rst-row-menu-panel>
        <a href="/orders/AB3PX">Féach</a>
        <hr>
        <a class="rst-danger" href="/orders/AB3PX/refund">Aisíoc an t-ordú…</a>
      </div>
    </details>
  </div>
  <p rst-no-match>Níl aon ordú ag teacht leis. <a href="/orders">Glan na scagairí</a></p>
</div>
<p rst-count-line>Ag taispeáint <strong>1–20</strong> as <strong>412</strong></p>

modal

Is é a URL féin atá ag módúil, ní staid ar an gcliant: an leathanach thíos faoi, marcáilte inert, an painéal os a chionn agus gnáthnasc chun é a dhúnadh.

Deasc Fón HTML

<div rst-backdrop inert>
  <div rst-page>
    <h1>Socruithe</h1>
  </div>
</div>
<div rst-modal-overlay>
  <dialog rst-modal-panel open aria-labelledby="modal-title">
    <nav>
      <a href="/settings/profile" aria-current="page">Próifíl</a>
      <a href="/settings/billing">Billeáil</a>
      <a href="/settings/notifications">Fógraí</a>
    </nav>
    <section>
      <a rst-modal-close href="/settings" aria-label="Dún na socruithe">✕</a>
      <h2 id="modal-title">Próifíl</h2>
      <p>Nuashonraigh an t-ainm agus an grianghraf a thaispeántar ar fud an chuntais.</p>
    </section>
  </dialog>
</div>

Féach beo é ag an URL is dual dó (osclaítear i gcluaisín nua).

selbox

An ticbhosca roghnaithe a chaitheann ró liosta sa mhodh roghnaithe. Athdheimhníonn a lipéad céannacht an ró.

Deasc Fón HTML

<label rst-selbox>
  <input type="checkbox" aria-label="Roghnaigh ordú AB3PX">
</label>

shell-sidebar

Creatlach na blaoisce sidebar ar leathanach ábhair: ar fhón, rialtán ar ais chuig an innéacs.

Deasc Fón HTML

<div rst-shell-sidebar="page">
  <a rst-skip href="#main">Léim chuig an ábhar</a>
  <div rst-shell-back>
    <a href="/#nav-reports" rel="up" aria-label="Ar ais chuig Rannóga">Rannóga</a>
  </div>
  <aside rst-shell-rail>
    <h1 rst-shell-title>
      <span><a rst-shell-brand href="/">Notes</a></span><span>Tuairiscí</span>
    </h1>
    <a rst-shell-brand href="/">Notes</a>
    <nav rst-shell-nav>
      <span rst-shell-group>Obair</span>
      <a id="nav-dashboard" href="/dashboard">Deais</a>
      <a id="nav-reports" href="/reports" aria-current="page">Tuairiscí</a>
    </nav>
    <div rst-shell-rail-foot>
      <details rst-dropdown rst-shell-profile name="rst-shell-menu">
        <summary>
          <span rst-shell-avatar>
            <span rst-person-av aria-hidden="true">A</span>
            <span rst-person-name>Ada Lovelace</span>
          </span>
        </summary>
        <div rst-dropdown-menu>
          <div rst-shell-who>
            <span rst-person-av aria-hidden="true">A</span>
            <span rst-person-name>Ada Lovelace</span>
            <span rst-person-email>ada@example.com</span>
          </div>
          <a href="/settings">Socruithe</a>
        </div>
      </details>
    </div>
  </aside>
  <main rst-shell-main id="main">
    <div rst-page>Ábhar.</div>
  </main>
</div>

Oscail taispeántas an bhlaoisc taobhbharra, réamhamharc neamhspleách. (osclaítear i gcluaisín nua).

shell-topbar

Creatlach an bhlaoisc barrabharra féin, mar mharcáil. Seolann Layout í mar theimpléad iomlán.

Deasc Fón HTML

<div rst-shell-topbar>
  <a rst-skip href="#main">Léim chuig an ábhar</a>
  <header rst-shell-bar>
    <a rst-shell-brand href="/">Notes</a>
    <details rst-shell-menu name="rst-shell-menu">
      <summary>
        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12h16"/><path d="M4 6h16"/><path d="M4 18h16"/></svg>Roghchlár</summary>
    </details>
    <div rst-shell-tail>
      <nav rst-shell-nav>
        <a href="/" aria-current="page">Baile</a>
        <a href="/archive">Cartlann</a>
      </nav>
      <details rst-dropdown rst-shell-account name="rst-menus">
        <summary>
          Cuntas
          <span rst-caret aria-hidden="true">
            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
          </span>
        </summary>
        <div rst-dropdown-menu>
          <a href="/settings">Socruithe</a>
        </div>
      </details>
    </div>
  </header>
  <main rst-page id="main">Ábhar.</main>
  <footer rst-shell-foot>Déanta le rastrillo</footer>
</div>

Oscail taispeántas an bhlaoisc barrabharra, réamhamharc dá chuid féin. (osclaítear i gcluaisín nua).

stat-band

Sraith staitisticí trasna barr painéil.

Deasc Fón HTML

<div rst-stats>
  <div rst-stat="lead">
    <span rst-stat-label>Ioncam na míosa seo</span>
    <span rst-stat-num>&euro;48,210</span>
    <span rst-stat-delta rst-tone="positive">+12%</span>
    <span rst-stat-note>i gcomparáid leis an mí seo caite</span>
  </div>
  <div rst-stat>
    <span rst-stat-label>Orduithe inniu</span>
    <span rst-stat-num>318</span>
  </div>
  <div rst-stat>
    <span rst-stat-label>Meánchiseán</span>
    <span rst-stat-num>&euro;41.20</span>
    <span rst-stat-delta rst-tone="negative">&minus;3%</span>
  </div>
  <div rst-stat>
    <span rst-stat-label>Aisíocaíochtaí</span>
    <span rst-stat-num>7</span>
  </div>
</div>

tblock

Cárta le himlíne nach nochtar a chorp ach nuair a bhíonn a lasc air, trí :has(). Is í an lasc an t-údarás; níl sa nochtadh ach áis taispeána.

Deasc Fón HTML

<div rst-tblock>
  <label rst-tblock-head>
    <input type="checkbox" name="notify" checked>
    <span rst-switch-track aria-hidden="true"></span>
    <span>
      <span rst-tblock-title>Fógraí ríomhphoist</span>
      <span rst-tblock-desc>Seoltar é le haghaidh gach freagra ar shnáithe ina bhfuil tú.</span>
    </span>
  </label>
  <div rst-tblock-body>
    <div rst-field>
      <label rst-field-label for="notify-freq">Minicíocht</label>
      <input rst-input type="text" id="notify-freq" name="notify_freq" value="Achoimre laethúil">
    </div>
  </div>
</div>