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