nili/ui
enfaartr
همه‌ی کامپوننت‌ها

CountryFlag

نمای کلی
۱۴ اکسپورت۲ محور واریانت۸ پراپ۵ فایل
import { CountryCode, CountryFlag, FlagEntry } from '@nili/ui';

این همان صفحه‌ی نمای کلیِ خود کتابخانه است که زنده رندر می‌شود. زبان یا تم را از هدر عوض کنید، همراهش می‌آید.

اندازه‌ها

شش اندازه، از ۱۶ تا ۴۸ پیکسل. تصویر به‌صورت SVG ایستا سرو می‌شود نه درون‌خطی — ۴۴۴ پرچم داخل باندل یعنی حدود ۳۲۰ کیلوبایت جاوااسکریپت که هر مصرف‌کننده پارسش می‌کند، چه پرچمی رندر کند چه نکند.

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" />
    </>
  )
}

با حاشیه

bordered یک حلقه‌ی مویی اضافه می‌کند — برای پرچم‌هایی که بیشترشان سفید است و وگرنه در صفحه حل می‌شوند، می‌ارزد.

ساده
با حاشیه
import { CountryFlag } from "@nili/ui"

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

برچسب‌ها

اگر label را ندهید پرچم تزئینی می‌شود — و وقتی نام کشور همان کنارش نوشته شده، همین را می‌خواهید. وقتی پرچم تنها چیزی است که ردیف را مشخص می‌کند، برچسب بدهید.

ایرانترکیهامارات متحده عربیعربستان سعودیآلمانفرانسهژاپنایالات متحدهبریتانیابرزیل
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" />
    </>
  )
}

تقسیمات، مناطق و کدهای ناشناخته

کدها به بزرگی و کوچکی حروف حساس نیستند. تقسیمات کشوری و چند پرچم غیرکشوری از یک اسلاگ بلندتر استفاده می‌کنند. کد ناشناخته یک دایره‌ی خنثی می‌کشد، نه اینکه در ردیف سوراخ بگذارد.

انگلستانgb-eng
اسکاتلندgb-sct
کاتالونیاes-ct
سازمان ملل متحدx-un
zz (ناشناخته)
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" />
    </>
  )
}