nili/ui
enfaartr
Tüm bileşenler

CountryFlag

Genel görünüm
14 export2 varyant ekseni8 prop5 dosya
import { CountryCode, CountryFlag, FlagEntry } 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.

Boyutlar

On altı pikselden kırk sekize altı boyut. Görseller satır içi değil, durağan SVG olarak sunulur — pakete konan 444 bayrak, bayrak çizsin çizmesin her tüketicinin ayrıştırdığı yaklaşık 320 KB JavaScript demektir.

xs · 16px
sm · 20px
md · 24px
lg · 32px
xl · 40px
2xl · 48px
import { CountryFlag } from "@nili/ui"

export function Example() {
  return (
    <>
      <CountryFlag code="ir" size="xs" />
      <CountryFlag code="ir" size="sm" />
      <CountryFlag code="ir" size="md" />
      <CountryFlag code="ir" size="lg" />
      <CountryFlag code="ir" size="xl" />
      <CountryFlag code="ir" size="2xl" />
    </>
  )
}

Kenarlıklı

bordered ince bir halka ekler — çoğu beyaz olan ve aksi hâlde sayfaya karışan bayraklar için değer.

sade
kenarlıklı
import { CountryFlag } from "@nili/ui"

export function Example() {
  return (
    <>
      <CountryFlag code="jp" size="lg" />
      <CountryFlag code="jp" size="lg" bordered />
    </>
  )
}

Etiketler

label vermezseniz bayrak süs olur — ülke adı zaten yanındaysa istediğiniz budur. Satırı tanımlayan tek şey bayraksa bir ad verin.

İranTürkiyeBirleşik Arap EmirlikleriSuudi ArabistanAlmanyaFransaJaponyaAmerika Birleşik DevletleriBirleşik KrallıkBrezilya
import { CountryFlag } from "@nili/ui"

export function Example() {
  return (
    <>
      {/* decorative: the name is right there */}
      <span>
        <CountryFlag code="de" size="sm" /> Germany
      </span>

      {/* named: nothing else says which country this is */}
      <CountryFlag code="de" size="sm" label="Germany" />
    </>
  )
}

Alt bölümler, bölgeler ve bilinmeyen kodlar

Kodlar büyük/küçük harfe duyarsızdır. Alt bölümler ve birkaç ülke dışı bayrak daha uzun bir kod kullanır. Tanınmayan bir kod, satırda boşluk bırakmak yerine nötr bir disk çizer.

İngilteregb-eng
İskoçyagb-sct
Katalonyaes-ct
Birleşmiş Milletlerx-un
zz (bilinmiyor)
import { CountryFlag } from "@nili/ui"

export function Example() {
  return (
    <>
      <CountryFlag code="gb-eng" size="lg" label="England" />
      <CountryFlag code="es-ct" size="lg" label="Catalonia" />
      <CountryFlag code="x-un" size="lg" label="United Nations" />

      {/* not a real code — renders the neutral disc */}
      <CountryFlag code="zz" size="lg" />
    </>
  )
}