Typography

Genel görünüm

11 export1 varyant ekseni4 prop4 dosya

import { Typography, TypographyGroup, TypographySpec, TypographyVariant } from '@nili/ui';

Bu, kütüphanenin kendi genel görünüm sayfası — canlı olarak render ediliyor. Üstten dili veya temayı değiştirin, o da değişir.

Inter Display · Başlık

6 varyant. Öğe varyanttan seçilir — h1 bir <h1>, paragraph-* bir <p> üretir — böylece belge ana hattı sormadan doğru kalır.

Hızlı kahverengi tilki atlar

varyant: h1
boyut: 56/64
ağırlık: 500
harf aralığı: -0.4px

Hızlı kahverengi tilki atlar

varyant: h2
boyut: 48/56
ağırlık: 500
harf aralığı: -0.4px

Hızlı kahverengi tilki atlar

varyant: h3
boyut: 40/48
ağırlık: 500
harf aralığı: -0.4px

Hızlı kahverengi tilki atlar

varyant: h4
boyut: 32/40
ağırlık: 500
harf aralığı: -0.4px

Hızlı kahverengi tilki atlar

varyant: h5
boyut: 24/32
ağırlık: 500
harf aralığı: 0px

Hızlı kahverengi tilki atlar

varyant: h6
boyut: 20/28
ağırlık: 500
harf aralığı: 0px

import { Typography } from "@nili/ui"

export function Example() {
  return (
    <>
      <Typography variant="h1">The quick brown fox</Typography>
      <Typography variant="h2">The quick brown fox</Typography>
      <Typography variant="h3">The quick brown fox</Typography>
      <Typography variant="h4">The quick brown fox</Typography>
      <Typography variant="h5">The quick brown fox</Typography>
      <Typography variant="h6">The quick brown fox</Typography>
    </>
  )
}

Inter · Etiket

5 varyant. Öğe varyanttan seçilir — h1 bir <h1>, paragraph-* bir <p> üretir — böylece belge ana hattı sormadan doğru kalır.

Hızlı kahverengi tilki atlar

varyant: label-xlarge
boyut: 24/32
ağırlık: 500
harf aralığı: -0.4px

Hızlı kahverengi tilki atlar

varyant: label-large
boyut: 18/28
ağırlık: 500
harf aralığı: -0.4px

Hızlı kahverengi tilki atlar

varyant: label-medium
boyut: 16/24
ağırlık: 500
harf aralığı: 0px

Hızlı kahverengi tilki atlar

varyant: label-small
boyut: 14/20
ağırlık: 500
harf aralığı: 0px

Hızlı kahverengi tilki atlar

varyant: label-xsmall
boyut: 12/16
ağırlık: 500
harf aralığı: 0px

import { Typography } from "@nili/ui"

export function Example() {
  return (
    <>
      <Typography variant="label-xlarge">The quick brown fox</Typography>
      <Typography variant="label-large">The quick brown fox</Typography>
      <Typography variant="label-medium">The quick brown fox</Typography>
      <Typography variant="label-small">The quick brown fox</Typography>
      <Typography variant="label-xsmall">The quick brown fox</Typography>
    </>
  )
}

Inter · Paragraf

5 varyant. Öğe varyanttan seçilir — h1 bir <h1>, paragraph-* bir <p> üretir — böylece belge ana hattı sormadan doğru kalır.

Hızlı kahverengi tilki atlar

varyant: paragraph-xlarge
boyut: 24/32
ağırlık: 400
harf aralığı: -0.4px

Hızlı kahverengi tilki atlar

varyant: paragraph-large
boyut: 18/28
ağırlık: 400
harf aralığı: -0.4px

Hızlı kahverengi tilki atlar

varyant: paragraph-medium
boyut: 16/24
ağırlık: 400
harf aralığı: 0px

Hızlı kahverengi tilki atlar

varyant: paragraph-small
boyut: 14/20
ağırlık: 400
harf aralığı: 0px

Hızlı kahverengi tilki atlar

varyant: paragraph-xsmall
boyut: 12/16
ağırlık: 400
harf aralığı: 0px

import { Typography } from "@nili/ui"

export function Example() {
  return (
    <>
      <Typography variant="paragraph-xlarge">The quick brown fox</Typography>
      <Typography variant="paragraph-large">The quick brown fox</Typography>
      <Typography variant="paragraph-medium">The quick brown fox</Typography>
      <Typography variant="paragraph-small">The quick brown fox</Typography>
      <Typography variant="paragraph-xsmall">The quick brown fox</Typography>
    </>
  )
}

Inter · Alt başlık

4 varyant. Öğe varyanttan seçilir — h1 bir <h1>, paragraph-* bir <p> üretir — böylece belge ana hattı sormadan doğru kalır.

Hızlı kahverengi tilki

varyant: subheading-medium
boyut: 16/24
ağırlık: 500
harf aralığı: 0.8px

Hızlı kahverengi tilki

varyant: subheading-small
boyut: 14/20
ağırlık: 500
harf aralığı: 0.8px

Hızlı kahverengi tilki

varyant: subheading-xsmall
boyut: 12/16
ağırlık: 500
harf aralığı: 0.4px

Hızlı kahverengi tilki

varyant: subheading-2xsmall
boyut: 11/12
ağırlık: 500
harf aralığı: 0.4px

import { Typography } from "@nili/ui"

export function Example() {
  return (
    <>
      <Typography variant="subheading-medium">The quick brown fox</Typography>
      <Typography variant="subheading-small">The quick brown fox</Typography>
      <Typography variant="subheading-xsmall">The quick brown fox</Typography>
      <Typography variant="subheading-2xsmall">The quick brown fox</Typography>
    </>
  )
}

Inter · Gövde

3 varyant. Öğe varyanttan seçilir — h1 bir <h1>, paragraph-* bir <p> üretir — böylece belge ana hattı sormadan doğru kalır.

Hızlı kahverengi tilki atlar

varyant: body-large
boyut: 18/32
ağırlık: 400
harf aralığı: -0.4px

Hızlı kahverengi tilki atlar

varyant: body-medium
boyut: 16/28
ağırlık: 400
harf aralığı: 0px

Hızlı kahverengi tilki atlar

varyant: body-small
boyut: 14/24
ağırlık: 400
harf aralığı: 0px

import { Typography } from "@nili/ui"

export function Example() {
  return (
    <>
      <Typography variant="body-large">The quick brown fox</Typography>
      <Typography variant="body-medium">The quick brown fox</Typography>
      <Typography variant="body-small">The quick brown fox</Typography>
    </>
  )
}

Inter · Belgeler

2 varyant. Öğe varyanttan seçilir — h1 bir <h1>, paragraph-* bir <p> üretir — böylece belge ana hattı sormadan doğru kalır.

Hızlı kahverengi tilki atlar

varyant: docs-label
boyut: 18/32
ağırlık: 500
harf aralığı: -0.4px

Hızlı kahverengi tilki atlar

varyant: docs-paragraph
boyut: 18/32
ağırlık: 400
harf aralığı: -0.4px

import { Typography } from "@nili/ui"

export function Example() {
  return (
    <>
      <Typography variant="docs-label">The quick brown fox</Typography>
      <Typography variant="docs-paragraph">The quick brown fox</Typography>
    </>
  )
}

Öğeyi değiştirmek

Görsel ağırlıkla anlam ayrıştığında as kullanın — <h1> olmaması gereken bir bölüm başlığı ya da <span> üzerinde çizilen bir etiket.

Bölüm başlığı

Satır içi etiketYönergeleri okuyun

import { Typography } from "@nili/ui"

export function Example() {
  return (
    <>
      {/* Looks like H3, but is a section heading */}
      <Typography variant="h3" as="h2">Section title</Typography>

      {/* Label styling on an inline element */}
      <Typography variant="label-small" as="span">Inline label</Typography>

      {/* Any element, including a link */}
      <Typography variant="paragraph-small" as="a" href="#">
        Read the guidelines
      </Typography>
    </>
  )
}

Typography

extends TypographyVariantProps

Varyant eksenleri — bileşenin cva tanımından

Prop	Tip	Varsayılan	Notlar
variant	h1 \| h2 \| h3 \| h4 \| h5 \| h6 \| label-xlarge \| label-large \| label-medium \| label-small \| label-xsmall \| paragraph-xlarge \| paragraph-large \| paragraph-medium \| paragraph-small \| paragraph-xsmall \| subheading-medium \| subheading-small \| subheading-xsmall \| subheading-2xsmall \| body-large \| body-medium \| body-small \| docs-label \| docs-paragraph	paragraph-medium

Diğer proplar

Prop	Tip	Varsayılan	Notlar
children	ReactNode	—
as	ElementType	—	Override the rendered element. Defaults to a semantically sensible tag for the variant (`h1` renders `<h1>`, `paragraph-*` renders `<p>`) so document outline and screen-reader navigation stay correct by default.
className	string	—