Text
Merid'in tipografi ölçeğinde gövde metni. Hiyerarşi renkten değil, üç metin tonundan ve kalınlıktan gelir; bold'dan asla gelmez.
Merid bölgeleri kenarlıktan önce yüzeyle ayırır, etkileşim için tek bir accent kullanır ve hiyerarşiyi ton ile kalınlığa bırakır.
<Text prose>
Merid bölgeleri kenarlıktan önce yüzeyle ayırır, etkileşim için tek bir accent
kullanır ve hiyerarşiyi ton ile kalınlığa bırakır.
</Text>Import
import { Text } from "@merid/react";Örnekler
Boyutlar
lg 18px'lik giriş metnidir, md 16px'lik gövde metnidir (varsayılan); ölçek 12px'lik 3xs alt yazıya kadar iner.
lg: giriş paragrafı, 18px
md: gövde metni, 16px
sm: ikincil metin
xs: yoğun arayüz metni
2xs: meta
3xs: alt yazı, 12px
<Text size="lg">lg: giriş paragrafı, 18px</Text>
<Text size="md">md: gövde metni, 16px</Text>
<Text size="sm">sm: ikincil metin</Text>
<Text size="xs">xs: yoğun arayüz metni</Text>
<Text size="2xs">2xs: meta</Text>
<Text size="3xs">3xs: alt yazı, 12px</Text>Tonlar
ink, body (varsayılan) ve muted hiyerarşi tonlarıdır. accent ve danger, anlamını renkle taşıması gereken nadir metinler içindir.
ink: başlıklar ve güçlü metin
body: varsayılan akan metin
muted: yalnızca meta
accent: etkileşimli vurgu
danger: hata metni
<Text tone="ink">ink: başlıklar ve güçlü metin</Text>
<Text tone="body">body: varsayılan akan metin</Text>
<Text tone="muted">muted: yalnızca meta</Text>
<Text tone="accent">accent: etkileşimli vurgu</Text>
<Text tone="danger">danger: hata metni</Text>Kalınlıklar
Regular
Medium
Semibold
<Text weight="regular">Regular</Text>
<Text weight="medium">Medium</Text>
<Text weight="semibold">Semibold</Text>Sayılar ve diğer elemanlar
numeric tablo rakamlarını açar, böylece sayılar alt alta hizalanır. as başka bir eleman render'lar: satır içinde span, small, div.
1.204,50
987,10
span olarak render'landı<Text numeric>1.204,50</Text>
<Text numeric>987,10</Text>
<Text as="span" size="sm" tone="muted">span olarak render'landı</Text>API referansı
Text varsayılan olarak bir <p> render'lar, ref'ini iletir ve diğer HTML attribute'larını olduğu gibi geçirir.
| Prop | Tip | Varsayılan | Açıklama |
|---|---|---|---|
size | "lg" | "md" | "sm" | "xs" | "2xs" | "3xs" | "md" | Tipografi ölçeği adımı: 18px'lik lg giriş metninden 12px'lik 3xs alt yazıya kadar. |
tone | "ink" | "body" | "muted" | "accent" | "danger" | "body" | Metin tonu. |
weight | "regular" | "medium" | "semibold" | "regular" | Yazı kalınlığı. Bold yoktur. |
numeric | boolean | false | Tablo rakamlarını kullanır. |
prose | boolean | false | Satır uzunluğunu 720px'lik okuma genişliğiyle sınırlar. |
as | ElementType | "p" | Onun yerine render'lanacak eleman ya da component. |
Stil verme
| Seçici | Değerler |
|---|---|
.mrd-text | Kök eleman |
data-size | lg · md · sm · xs · 2xs · 3xs |
data-tone | ink · body · muted · accent · danger |
data-weight | regular · medium · semibold |
data-numeric | numeric verildiğinde bulunur |
data-prose | prose verildiğinde bulunur |
Text'e özel değişken yoktur; boyutlar ve tonlar global tipografi ve renk token'larını okur.
Erişilebilirlik
muted, açık temada sayfa arka planı üzerinde 4.5:1'in altında kalır. Yalnızca meta metin için kullan; okuyucunun anlaması gereken içerikte asla kullanma.- Anlamı yalnızca
accentya dadangerrengiyle verme; yanına bir ifade ya da ikon ekle.
Kullanım ilkeleri
Yap
Hiyerarşiyi ink / body / muted ve medium kalınlıkla kur.
Kaçın
Vurgu için metni maviye boyamak ya da semibold'dan daha kalın bir ağırlığa başvurmak.