Armada

Tipografi

Başlık, metin, link, klavye kısayolu.

Veri gösterimi VKbd · VHighlight 3 örnek

Başlıklar

Eyebrow

Display

Başlık 1 · xl

Başlık 2 · lg

Başlık 3 · md

Başlık 4 · sm

Başlık 5 · xs
Kodu göster
blade 
<div class="sc-col" style="gap:10px">
    <armada:eyebrow>Eyebrow</armada:eyebrow>
    <armada:heading level="1" size="display">Display</armada:heading>
    <armada:heading level="1">Başlık 1 · xl</armada:heading>
    <armada:heading level="2">Başlık 2 · lg</armada:heading>
    <armada:heading level="3">Başlık 3 · md</armada:heading>
    <armada:heading level="4">Başlık 4 · sm</armada:heading>
    <armada:heading level="5">Başlık 5 · xs</armada:heading>
</div>

Metin

Büyük giriş metni; sayfanın ilk paragrafı için.

Varsayılan gövde metni, uygulama içi okunabilirlik için 14px.

Soluk metin; açıklamalar için.

Küçük ve daha soluk; dipnotlar için.

Vurgulu metin

Tonlu metin

Tek satıra sığmayan uzun metinler üç nokta ile kesilir; bu satır bunun için yazılmış oldukça uzun bir cümledir.

İki satırla sınırlandırılmış metin. Kartlarda açıklama alanları için idealdir; uzun içerik ikinci satırın sonunda kesilir ve üç nokta ile biter. Bu cümle o yüzden uzun.

Kodu göster
blade 
<div class="sc-col" style="gap:10px;max-width:560px">
    <armada:text size="lg">Büyük giriş metni; sayfanın ilk paragrafı için.</armada:text>
    <armada:text>Varsayılan gövde metni, uygulama içi okunabilirlik için 14px.</armada:text>
    <armada:text variant="muted">Soluk metin; açıklamalar için.</armada:text>
    <armada:text size="sm" variant="subtle">Küçük ve daha soluk; dipnotlar için.</armada:text>
    <armada:text variant="strong">Vurgulu metin</armada:text>
    <armada:text tone="danger">Tonlu metin</armada:text>
    <armada:text truncate>Tek satıra sığmayan uzun metinler üç nokta ile kesilir; bu satır bunun için yazılmış oldukça uzun bir cümledir.</armada:text>
    <armada:text :lines="2">İki satırla sınırlandırılmış metin. Kartlarda açıklama alanları için idealdir; uzun içerik ikinci satırın sonunda kesilir ve üç nokta ile biter. Bu cümle o yüzden uzun.</armada:text>
</div>

Link ve klavye kısayolu

Belgeleri buradan oku veya Laravel sitesine git.

Sade link: Ayarlar

⌘ K Ctrl Shift Esc
Kodu göster
blade 
<div class="sc-col" style="gap:10px">
    <armada:text>Belgeleri <armada:link href="#">buradan</armada:link> oku veya <armada:link href="https://laravel.com" external>Laravel sitesine</armada:link> git.</armada:text>
    <armada:text>Sade link: <armada:link href="#" variant="subtle">Ayarlar</armada:link></armada:text>
    <div class="sc-row"><armada:kbd>⌘</armada:kbd><armada:kbd>K</armada:kbd><armada:kbd>Ctrl</armada:kbd><armada:kbd>Shift</armada:kbd><armada:kbd>Esc</armada:kbd></div>
</div>

Özellikler

<armada:heading>

Değerler: size: xs | sm | md | lg | xl | display

Prop Varsayılan Not
level 2
size null

<armada:text>

Değerler: size: sm | lg · variant: muted | subtle | strong

Prop Varsayılan Not
size null
variant null
tone null
truncate false
lines null
as 'p'

<armada:link>

Değerler: default | subtle

Prop Varsayılan Not
href '#'
variant 'default'
external false

<armada:kbd>

Değerler: hint: hidden on touch screens

Prop Varsayılan Not
hint false
Esc
Sonuç yok
↑↓ gezin ↵ aç Esc kapat