Léim chuig an ábhar
Rannóga
Teanga, Gaeilge faoi láthair
Córas Dearaidh Rastrillo
Teanga, Gaeilge faoi láthair
EnglishGaeilge简体中文Españolहिन्दीPortuguêsবাংলাРусский日本語廣東話Tiếng Việtالعربية

Scáileán liosta

Scáileán liosta ginearálta le teideal, barra uirlisí agus rónna a oibríonn ar dheasc agus ar fón.

Tá gach sampla beo, ach ní théann a naisc áit ar bith. Taispeánann HTML an marcáil le cóipeáil.

page-header

Barra teidil an scáileáin: h1, fotheideal roghnach, agus príomhghníomh.

Teideal, fotheideal agus príomhghníomh

Réamhamharc 
<header rst-page-header>
  <div rst-page-header-titles>
    <h1>Postálacha</h1>
    <p rst-page-header-sub>Gach rud atá scríofa agat, an ceann is nuaí ar dtús.</p>
  </div>
  <a rst-btn="primary" href="/posts/new">
    <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="M5 12h14"/><path d="M12 5v14"/></svg>
    Scríobh postáil
  </a>
</header>
{{template "page-header" dict
    "Title" "Postálacha"
    "Sub" "Gach rud atá scríofa agat, an ceann is nuaí ar dtús."
    "ActionHref" "/posts/new"
    "ActionLabel" "Scríobh postáil"
    "ActionIcon" "plus"}}

Teideal amháin

Réamhamharc 
<header rst-page-header>
  <div rst-page-header-titles>
    <h1>Socruithe</h1>
  </div>
</header>
{{template "page-header" dict "Title" "Socruithe"}}

list-bar

An barra uirlisí ag barr cárta liosta, le cuardach agus scagaire.

Cuardach le hanuas-roghchlár scagtha

Réamhamharc

Cuir é seo taobh istigh de <div rst-list>.

<div rst-lbar>
  <search>
    <form rst-search method="get" action="/posts">
      <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="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
      <input type="search" name="q" value="eisiúint" placeholder="Cuardaigh postálacha" aria-label="Cuardaigh postálacha">
      <a rst-search-clear href="/posts?sort=newest" aria-label="Glan an cuardach">
        <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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
      </a>
      <input type="hidden" name="sort" value="newest">
      <button class="rst-sr-only" type="submit">Cuardaigh</button>
    </form>
  </search>
  <details rst-dropdown name="rst-menus">
    <summary rst-btn aria-label="Scag de réir stádais: Íoctha">
      Íoctha
      <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>
    </summary>
    <div rst-dropdown-menu>
      <a href="/posts">Uile</a>
      <a href="/posts?status=paid" aria-current="true">Íoctha <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="M20 6 9 17l-5-5"/></svg></a>
      <a href="/posts?status=free">Saor in aisce</a>
    </div>
  </details>
</div>

Cuir é seo taobh istigh de <div rst-list>.

{{template "list-bar" dict
    "Filter" (dict "Aria" "Scag de réir stádais: Íoctha" "Items" (list (dict "Href" "/posts" "Label" "Uile") (dict "Current" true "Href" "/posts?status=paid" "Label" "Íoctha") (dict "Href" "/posts?status=free" "Label" "Saor in aisce")) "Label" "Íoctha")
    "Hidden" (list (list "sort" "newest"))
    "Placeholder" "Cuardaigh postálacha"
    "Query" "eisiúint"
    "SearchAction" "/posts"}}

list-search-submit

Fíorchnaipe seolta na foirme cuardaigh: folaithe ó radharc, san ord táib, agus nochtann sé é féin nuair a fhaigheann sé fócas ón méarchlár.

Lipéad réamhshocraithe

Réamhamharc

Cuir é seo taobh istigh de <section rst-box>.

<button class="rst-sr-only" type="submit">Cuardaigh</button>

Cuir é seo taobh istigh de <section rst-box>.

{{template "list-search-submit" dict}}

Ní bhíonn aon rud le feiceáil anseo go dtí go mbogann tú isteach ann leis an eochair táib.

list-row-action

Ró liosta amháin: ainm an taifid mar an príomhnasc, líne mheiteashonraí, agus gníomh tánaisteach.

Marcóir tosaigh, stádas agus gníomh

Réamhamharc

Cuir é seo taobh istigh de <div rst-list>.

<div rst-row>
  <span rst-row-lead data-lead="accent" aria-hidden="true">RN</span>
  <span rst-row-main><a href="/posts/1">Nótaí eisiúna, Lúnasa</a>
    <small rst-row-sub>Foilsithe 2 Lúnasa · 4 nóiméad léitheoireachta</small>
  </span>
  <span rst-status rst-tone="positive">Foilsithe</span>
  <a rst-row-action href="/posts/1/edit" aria-label="Cuir in eagar: Nótaí eisiúna, Lúnasa">Cuir in eagar</a>
</div>

Cuir é seo taobh istigh de <div rst-list>.

{{template "list-row-action" dict
    "Href" "/posts/1"
    "Main" "Nótaí eisiúna, Lúnasa"
    "Sub" "Foilsithe 2 Lúnasa · 4 nóiméad léitheoireachta"
    "ActionHref" "/posts/1/edit"
    "ActionLabel" "Cuir in eagar"
    "ActionAria" "Cuir in eagar: Nótaí eisiúna, Lúnasa"
    "StatusTone" "positive"
    "StatusLabel" "Foilsithe"
    "Lead" "accent"
    "LeadInitial" "RN"}}

Ainm agus líne meiteashonraí amháin

Réamhamharc

Cuir é seo taobh istigh de <div rst-list>.

<div rst-row>
  <span rst-row-main><a href="/posts/2">Cén fáth ar éiríomar as an seanreathaí</a>
    <small rst-row-sub>Dréacht · sábháilte 20 nóiméad ó shin</small>
  </span>
</div>

Cuir é seo taobh istigh de <div rst-list>.

{{template "list-row-action" dict
    "Href" "/posts/2"
    "Main" "Cén fáth ar éiríomar as an seanreathaí"
    "Sub" "Dréacht · sábháilte 20 nóiméad ó shin"}}

row-menu

Gníomhartha eile an ró, taobh thiar de chnaipe ⋮. Nascann gníomh scriosach lena leathanach deimhnithe.

Naisc, foirm agus mír scriosach

Réamhamharc 
<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/edit">Cuir in eagar</a>
    <form method="post" action="/orders/AB3PX/archive">
      <input type="hidden" name="state" value="archived">
      <button type="submit">Cartlannaigh</button>
    </form>
    <hr>
    <a class="rst-danger" href="/orders/AB3PX/delete">Scrios an t-ordú…</a>
  </div>
</details>
{{template "row-menu" dict
    "Name" "Grace Hopper"
    "Items" (list
        (dict "Href" "/orders/AB3PX/edit" "Label" "Cuir in eagar")
        (dict "Action" "/orders/AB3PX/archive" "Hidden" (list (list "state" "archived")) "Label" "Cartlannaigh")
        (dict "Danger" true "Href" "/orders/AB3PX/delete" "Label" "Scrios an t-ordú…"))}}

Cuir an mhír scriosach ar deireadh agus cuir … ag deireadh a lipéid. Osclaíonn sí leathanach a fhiafraíonn sula scriostar aon rud.

Naisc amháin, do liosta taobh istigh d'fhoirm roghnúcháin

Réamhamharc 
<details rst-row-menu name="rst-menus">
  <summary aria-label="Gníomhartha do Alan Turing">
    <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/CD4QY/edit">Cuir in eagar</a>
    <hr>
    <a class="rst-danger" href="/orders/CD4QY/delete">Scrios an t-ordú…</a>
  </div>
</details>
{{template "row-menu" dict
    "Name" "Alan Turing"
    "Items" (list
        (dict "Href" "/orders/CD4QY/edit" "Label" "Cuir in eagar")
        (dict "Danger" true "Href" "/orders/CD4QY/delete" "Label" "Scrios an t-ordú…"))}}

Taobh istigh d'fhoirm, caithfidh gach mír a bheith ina nasc. Téann gníomh a phostálann trí leathanach dá chuid féin.

seg-tabs

Rialtán deighilte de naisc a rindreáiltear ar an bhfreastalaí. Is é aria-current ar nasc an cluaisín reatha.

Dhá rannóg

Réamhamharc 
<nav rst-seg-tabs aria-label="Ranna na postála">
  <a href="?tab=basics" aria-current="page">Bunrudaí</a>
  <a href="?tab=advanced">Ardleibhéal</a>
</nav>
{{template "seg-tabs" dict
    "Label" "Ranna na postála"
    "Items" (list
        (dict "Current" true "Href" "?tab=basics" "Label" "Bunrudaí")
        (dict "Href" "?tab=advanced" "Label" "Ardleibhéal"))}}

dropdown

Nochtadh gan aon JavaScript: cnaipe summary os cionn painéil de ghnáthnaisc.

Roghchlár scagtha agus rogha amháin i bhfeidhm

Réamhamharc 
<details rst-dropdown name="rst-menus">
  <summary rst-btn aria-label="Sórtáil postálacha: an ceann is nuaí ar dtús">
    Is nuaí
    <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>
  </summary>
  <div rst-dropdown-menu>
    <a href="/posts?sort=newest" aria-current="true">Is nuaí <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="M20 6 9 17l-5-5"/></svg></a>
    <a href="/posts?sort=oldest">Is sine</a>
    <a href="/posts?sort=title">De réir teidil</a>
  </div>
</details>
{{template "dropdown" dict
    "Label" "Is nuaí"
    "Aria" "Sórtáil postálacha: an ceann is nuaí ar dtús"
    "Items" (list
        (dict "Current" true "Href" "/posts?sort=newest" "Label" "Is nuaí")
        (dict "Href" "/posts?sort=oldest" "Label" "Is sine")
        (dict "Href" "/posts?sort=title" "Label" "De réir teidil"))}}

bulk-bar

Stiall cheanntáisc an mhodha roghnaithe, in ionad an bharra liosta: an líon, nasc leathnaithe, agus roghchlár na ngníomhartha.

Trí ró roghnaithe

Réamhamharc

Cuir é seo taobh istigh de <div rst-list>.

<div rst-bulkbar>
  <a rst-bulkbar-close href="/posts" aria-label="Roghnú críochnaithe">
    <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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
  </a>
  <span rst-bulkbar-selection><span rst-bulkbar-count>3 roghnaithe</span><a rst-bulkbar-escalate href="/posts?select=all">Roghnaigh na 412 ar fad a mheaitseálann</a></span>
  <details rst-dropdown name="rst-menus">
    <summary>
      Gníomhartha
      <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>
      <button type="submit" name="action" value="export">Easpórtáil</button>
      <button type="submit" name="action" value="unpublish">Dífhoilsigh</button>
      <button type="submit" name="action" value="delete" class="rst-danger">Scrios…</button>
    </div>
  </details>
</div>

Cuir é seo taobh istigh de <div rst-list>.

{{template "bulk-bar" dict
    "DoneHref" "/posts"
    "Count" "3 roghnaithe"
    "EscalateHref" "/posts?select=all"
    "EscalateLabel" "Roghnaigh na 412 ar fad a mheaitseálann"
    "Actions" (list
        (dict "Label" "Easpórtáil" "Value" "export")
        (dict "Label" "Dífhoilsigh" "Value" "unpublish")
        (dict "Danger" true "Label" "Scrios…" "Value" "delete"))
    "MenuLabel" "Gníomhartha"}}

Tagann an mhír mhillteach ar deireadh: is í an chéad iontráil réamhshocrú intuigthe Enter na foirme timpeall uirthi.

media-grid

Greille de thíleanna íomhá. Tá gach fráma 4:3, mar sin suíonn gabhálacha scáileáin arda agus meirgí leathana i ngreille chothrom amháin.

Gabhálacha scáileáin, lógó agus meirge

Réamhamharc

Cuir é seo taobh istigh de <div rst-list>.

<div rst-media>
  <div rst-media-tile>
    <div rst-media-frame>
      <img src="/images/checkout.png" alt="" loading="lazy" decoding="async" width="1280" height="3200">
    </div>
    <div rst-media-caption>
      <div rst-media-name>
        <a href="/images/1">Seiceáil amach, céim 2</a>
        <details rst-row-menu name="rst-menus">
          <summary aria-label="Gníomhartha do Seiceáil amach, céim 2">
            <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="/images/1/edit">Cuir in eagar</a>
            <hr>
            <a class="rst-danger" href="/images/1/delete">Scrios…</a>
          </div>
        </details>
      </div>
      <p rst-media-desc>Céim na híocaíochta, agus foirm an chárta ar oscailt.</p>
      <p rst-media-meta>1280 × 3200 · 412 KB</p>
    </div>
  </div>
  <div rst-media-tile>
    <div rst-media-frame>
      <img src="/images/pricing.png" alt="" loading="lazy" decoding="async" width="1280" height="2400">
    </div>
    <div rst-media-caption>
      <div rst-media-name>
        <a href="/images/2">Leathanach praghsanna</a>
        <details rst-row-menu name="rst-menus">
          <summary aria-label="Gníomhartha do Leathanach praghsanna">
            <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="/images/2/edit">Cuir in eagar</a>
            <hr>
            <a class="rst-danger" href="/images/2/delete">Scrios…</a>
          </div>
        </details>
      </div>
      <p rst-media-desc="none">Gan chur síos</p>
      <p rst-media-meta>1280 × 2400 · 318 KB</p>
    </div>
  </div>
  <div rst-media-tile>
    <div rst-media-frame="contain">
      <img src="/images/logo.svg" alt="Harbour" loading="lazy" decoding="async" width="240" height="240">
    </div>
    <div rst-media-caption>
      <div rst-media-name>
        <a href="/images/3">Lógó Harbour</a>
        <details rst-row-menu name="rst-menus">
          <summary aria-label="Gníomhartha do Lógó Harbour">
            <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="/images/3/edit">Cuir in eagar</a>
            <hr>
            <a class="rst-danger" href="/images/3/delete">Scrios…</a>
          </div>
        </details>
      </div>
      <p rst-media-desc>An marc leis féin, do chúlraí dorcha agus geala.</p>
      <p rst-media-meta>240 × 240 · 3 KB</p>
    </div>
  </div>
  <div rst-media-tile>
    <div rst-media-frame="contain">
      <img src="/images/banner.png" alt="" loading="lazy" decoding="async" width="1200" height="200">
    </div>
    <div rst-media-caption>
      <div rst-media-name>
        <a href="/images/4">Meirge an earraigh</a>
        <details rst-row-menu name="rst-menus">
          <summary aria-label="Gníomhartha do Meirge an earraigh">
            <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="/images/4/edit">Cuir in eagar</a>
            <hr>
            <a class="rst-danger" href="/images/4/delete">Scrios…</a>
          </div>
        </details>
      </div>
      <p rst-media-desc>An stiall ag barr an tsiopa i mí an Mhárta.</p>
      <p rst-media-meta>1200 × 200 · 64 KB</p>
    </div>
  </div>
</div>

Cuir é seo taobh istigh de <div rst-list>.

{{template "media-grid" dict
    "Items" (list
        (dict "Desc" "Céim na híocaíochta, agus foirm an chárta ar oscailt." "Height" 3200 "Href" "/images/1" "Menu" (list (dict "Href" "/images/1/edit" "Label" "Cuir in eagar") (dict "Danger" true "Href" "/images/1/delete" "Label" "Scrios…")) "Meta" "1280 × 3200 · 412 KB" "Name" "Seiceáil amach, céim 2" "Src" "/images/checkout.png" "Width" 1280)
        (dict "Desc" "" "Height" 2400 "Href" "/images/2" "Menu" (list (dict "Href" "/images/2/edit" "Label" "Cuir in eagar") (dict "Danger" true "Href" "/images/2/delete" "Label" "Scrios…")) "Meta" "1280 × 2400 · 318 KB" "Name" "Leathanach praghsanna" "Src" "/images/pricing.png" "Width" 1280)
        (dict "Alt" "Harbour" "Desc" "An marc leis féin, do chúlraí dorcha agus geala." "Fit" "contain" "Height" 240 "Href" "/images/3" "Menu" (list (dict "Href" "/images/3/edit" "Label" "Cuir in eagar") (dict "Danger" true "Href" "/images/3/delete" "Label" "Scrios…")) "Meta" "240 × 240 · 3 KB" "Name" "Lógó Harbour" "Src" "/images/logo.svg" "Width" 240)
        (dict "Desc" "An stiall ag barr an tsiopa i mí an Mhárta." "Fit" "contain" "Height" 200 "Href" "/images/4" "Menu" (list (dict "Href" "/images/4/edit" "Label" "Cuir in eagar") (dict "Danger" true "Href" "/images/4/delete" "Label" "Scrios…")) "Meta" "1200 × 200 · 64 KB" "Name" "Meirge an earraigh" "Src" "/images/banner.png" "Width" 1200))}}

Socraigh Fit go "contain" do lógó nó do mheirge. Coinníonn gabháil scáileáin an réamhshocrú agus taispeánann sí a barr. Deir tíl gan Desc "Gan chur síos".

Mód roghnúcháin, tíl amháin roghnaithe

Réamhamharc

Cuir é seo taobh istigh de <div rst-list>.

<div rst-media>
  <div rst-media-tile>
    <div rst-media-frame>
      <img src="/images/checkout.png" alt="" loading="lazy" decoding="async" width="1280" height="3200">
      <label rst-selbox>
        <input type="checkbox" name="id" value="1" checked aria-label="Roghnaigh Seiceáil amach, céim 2">
      </label>
    </div>
    <div rst-media-caption>
      <div rst-media-name>
        <a href="/images/1">Seiceáil amach, céim 2</a>
        <details rst-row-menu name="rst-menus">
          <summary aria-label="Gníomhartha do Seiceáil amach, céim 2">
            <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="/images/1/edit">Cuir in eagar</a>
            <hr>
            <a class="rst-danger" href="/images/1/delete">Scrios…</a>
          </div>
        </details>
      </div>
      <p rst-media-desc>Céim na híocaíochta, agus foirm an chárta ar oscailt.</p>
      <p rst-media-meta>1280 × 3200 · 412 KB</p>
    </div>
  </div>
  <div rst-media-tile>
    <div rst-media-frame>
      <img src="/images/pricing.png" alt="" loading="lazy" decoding="async" width="1280" height="2400">
      <label rst-selbox>
        <input type="checkbox" name="id" value="2" aria-label="Roghnaigh Leathanach praghsanna">
      </label>
    </div>
    <div rst-media-caption>
      <div rst-media-name>
        <a href="/images/2">Leathanach praghsanna</a>
        <details rst-row-menu name="rst-menus">
          <summary aria-label="Gníomhartha do Leathanach praghsanna">
            <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="/images/2/edit">Cuir in eagar</a>
            <hr>
            <a class="rst-danger" href="/images/2/delete">Scrios…</a>
          </div>
        </details>
      </div>
      <p rst-media-desc="none">Gan chur síos</p>
      <p rst-media-meta>1280 × 2400 · 318 KB</p>
    </div>
  </div>
</div>

Cuir é seo taobh istigh de <div rst-list>.

{{template "media-grid" dict
    "Items" (list
        (dict "Desc" "Céim na híocaíochta, agus foirm an chárta ar oscailt." "Height" 3200 "Href" "/images/1" "Menu" (list (dict "Href" "/images/1/edit" "Label" "Cuir in eagar") (dict "Danger" true "Href" "/images/1/delete" "Label" "Scrios…")) "Meta" "1280 × 3200 · 412 KB" "Name" "Seiceáil amach, céim 2" "Select" "1" "Selected" true "Src" "/images/checkout.png" "Width" 1280)
        (dict "Desc" "" "Height" 2400 "Href" "/images/2" "Menu" (list (dict "Href" "/images/2/edit" "Label" "Cuir in eagar") (dict "Danger" true "Href" "/images/2/delete" "Label" "Scrios…")) "Meta" "1280 × 2400 · 318 KB" "Name" "Leathanach praghsanna" "Select" "2" "Src" "/images/pricing.png" "Width" 1280))}}

Cuir an ghreille agus bulk-bar in aon fhoirm amháin. Postálann gach ticbhosca luach Select a thíle faoin ainm "id"; socraigh SelectName chun é a athrú. Taobh istigh den fhoirm, caithfidh míreanna an roghchláir a bheith ina naisc.

pagination

Stiall uimhrithe de ghnáthnaisc, ionas go maireann leathanú fiú agus JavaScript múchta.

I lár liosta fhada

Réamhamharc 
<nav rst-pagination aria-label="Leathanaigh na bpostálacha">
  <a href="/posts?page=3" rst-pagination-step="prev"><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 rst-pagination-word>Roimhe seo</span></a>
  <a href="/posts?page=1">1</a>
  <span rst-pagination-gap aria-hidden="true">…</span>
  <a href="/posts?page=3" rst-pagination-wide>3</a>
  <span aria-current="page">4</span>
  <a href="/posts?page=5" rst-pagination-wide>5</a>
  <span rst-pagination-gap aria-hidden="true">…</span>
  <a href="/posts?page=9">9</a>
  <a href="/posts?page=5" rst-pagination-step="next"><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 rst-pagination-word>Ar aghaidh</span></a>
</nav>
{{template "pagination" dict
    "Items" (list
        (dict "Href" "/posts?page=3" "Label" "Roimhe seo" "Rel" "prev")
        (dict "Href" "/posts?page=1" "Label" "1")
        (dict "Gap" true)
        (dict "Href" "/posts?page=3" "Label" "3")
        (dict "Current" true "Label" "4")
        (dict "Href" "/posts?page=5" "Label" "5")
        (dict "Gap" true)
        (dict "Href" "/posts?page=9" "Label" "9")
        (dict "Href" "/posts?page=5" "Label" "Ar aghaidh" "Rel" "next"))
    "Label" "Leathanaigh na bpostálacha"}}

An chéad leathanach, ainm inrochtana réamhshocraithe

Réamhamharc 
<nav rst-pagination aria-label="Leathanaigh">
  <span rst-pagination-disabled rst-pagination-step="prev"><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 rst-pagination-word>Roimhe seo</span></span>
  <span aria-current="page">1</span>
  <a href="/posts?page=2">2</a>
  <a href="/posts?page=2" rst-pagination-step="next"><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 rst-pagination-word>Ar aghaidh</span></a>
</nav>
{{template "pagination" dict
    "Items" (list
        (dict "Disabled" true "Label" "Roimhe seo" "Rel" "prev")
        (dict "Current" true "Label" "1")
        (dict "Href" "/posts?page=2" "Label" "2")
        (dict "Href" "/posts?page=2" "Label" "Ar aghaidh" "Rel" "next"))}}

Gan Label, mar sin tagann ainm inrochtana an nav ón gcatalóg.

empty-state

An cárta staid fholaimh. Staid fholamh a thaispeánann na chéad chéimeanna.

Le gairm gnímh POST

Réamhamharc 
<div rst-empty>
  <h2 rst-empty-title>Níl aon rud anseo fós</h2>
  <p rst-empty-body>Níl aon phostáil ann fós. Is maith an áit tosaithe an chéad cheann.</p>
  <form rst-empty-cta method="post" action="/posts/seed">
    <input type="hidden" name="csrf" value="tok-123">
    <button rst-btn="primary" type="submit">Cuir postálacha samplacha leis</button>
  </form>
</div>
{{template "empty-state" dict
    "Body" "Níl aon phostáil ann fós. Is maith an áit tosaithe an chéad cheann."
    "Title" "Níl aon rud anseo fós"
    "ActionLabel" "Cuir postálacha samplacha leis"
    "PostAction" "/posts/seed"
    "Hidden" (list (list "csrf" "tok-123"))}}

Abairt amháin

Réamhamharc 
<div rst-empty>
  <p rst-empty-body>Níl aon trácht ar an bpostáil seo fós.</p>
</div>
{{template "empty-state" dict "Body" "Níl aon trácht ar an bpostáil seo fós."}}