nili/ui
enfaartr
كل المكوّنات

PlaceholderLogo

عرض شامل
١٤ تصدير٢ محور تنويع٦ خاصيّة٥ ملف
import { PlaceholderCompany, PlaceholderCompanyId, PlaceholderLogo, PlaceholderLogoVariant } from '@nili/ui';

هذه صفحة العرض الشامل الخاصة بالمكتبة، معروضة حيّة. غيّر اللغة أو السمة من الأعلى وسَتتبعك.

المجموعة

تسع شركات متخيّلة، لكلٍّ اسم وقطاع وموقع في PLACEHOLDER_COMPANIES — ما يكفي لملء جدول دون اختلاق علامة تجارية حقيقية لا تملك حق رسمها.

Apex Financial

Finance & Banking

Aurora Solutions

Environment

Catalyst Marketing

Sales & Marketing

Horizon Tutoring

Education

Orandis Tech

Technology

Phoenix Marketplace

E-commerce

Pulse Medical

Medical & Healthcare

Solaris Energy

Energy & Utilities

Synergy HR

Human Resources and Staffing

import { PlaceholderLogo, PLACEHOLDER_COMPANIES } from "@nili/ui"

export function Example() {
  return (
    <>
      {PLACEHOLDER_COMPANIES.map((company) => (
        <span key={company.id} className="flex items-center gap-2">
          <PlaceholderLogo company={company.id} size="md" label="" />
          {company.name}
        </span>
      ))}
    </>
  )
}

الأحجام

ستة أحجام مطابقة لمقياس Avatar كي يتحاذى صفّ الشعارات مع صفّ الصور الرمزية.

xs
sm
md
lg
xl
2xl
import { PlaceholderLogo } from "@nili/ui"

export function Example() {
  return (
    <>
      <PlaceholderLogo company="apex-financial" size="xs" label="" />
      <PlaceholderLogo company="apex-financial" size="sm" label="" />
      <PlaceholderLogo company="apex-financial" size="md" label="" />
      <PlaceholderLogo company="apex-financial" size="lg" label="" />
      <PlaceholderLogo company="apex-financial" size="xl" label="" />
      <PlaceholderLogo company="apex-financial" size="2xl" label="" />
    </>
  )
}

التنويعات

يحتفظ original بلون العلامة؛ أما black وwhite فهما النسختان أحاديتا اللون — لشريط داكن أو ورقة طباعة أو أي سطح يتنازع مع اللون.

original
black
white (على سطح داكن)
import { PlaceholderLogo } from "@nili/ui"

export function Example() {
  return (
    <>
      <PlaceholderLogo company="apex-financial" variant="original" label="" />
      <PlaceholderLogo company="apex-financial" variant="black" label="" />
      <PlaceholderLogo company="apex-financial" variant="white" label="" />
    </>
  )
}

البلاطة الفارغة

احذف company للحصول على القرص المحايد — وهو ما ترسمه حين لا يملك السجل شعارًا فعلًا، فتبقى قائمة الشركات شبكة أقراص بدل أن تنهار حيث تغيب البيانات.

import { PlaceholderLogo } from "@nili/ui"

export function Example() {
  return <PlaceholderLogo size="lg" label="No logo" />
}