nili/ui
enfaartr
Tüm bileşenler

PlaceholderLogo

Genel görünüm
14 export2 varyant ekseni6 prop5 dosya
import { PlaceholderCompany, PlaceholderCompanyId, PlaceholderLogo, PlaceholderLogoVariant } 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.

Küme

PLACEHOLDER_COMPANIES içinde her biri ad, sektör ve konum taşıyan dokuz kurgusal şirket — çizme hakkınız olmayan gerçek bir markayı uydurmadan bir tabloyu doldurmaya yeter.

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

Boyutlar

Avatar ölçeğiyle eşleşen altı boyut — böylece bir logo satırıyla bir avatar satırı hizalanır.

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

Varyantlar

original marka rengini korur; black ve white tek renkli işaretlerdir — koyu bir şerit, bir baskı sayfası ya da rengin yüzeyle çatıştığı her yer için.

original
black
white (koyu bir yüzeyde)
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="" />
    </>
  )
}

Boş karo

Nötr disk için company vermeyin — bir kaydın gerçekten logosu yokken çizdiğiniz şey budur; böylece şirket listesi, verinin eksik olduğu yerde çökmek yerine bir disk ızgarası olarak kalır.

import { PlaceholderLogo } from "@nili/ui"

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