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