PartoLogo

معرفی

PartoLogo نشان و لوگوتایپ پرتو را به‌صورت SVG درون‌خطی رندر می‌کند. هیچ فایلی در public/ لازم نیست و هیچ درخواست شبکه‌ای اضافه نمی‌شود.

چه زمانی استفاده کنیم

• در سربرگ محصول، از راه product.logo در ProductFrame: فقط نشان، در اندازهٔ 24 (نمونهٔ کد در بخش نام محصول)
• در صفحهٔ ورود، خطا، یا هر صفحهٔ مستقل بدون ناوبری
• بیرون از ProductFrame، وقتی نام محصول باید کنار برند بیاید (productName)

چه زمانی استفاده نکنیم

• برای favicon یا تصویر اشتراک‌گذاری اجتماعی — آن‌ها فایل واقعی می‌خواهند، نه کامپوننت
• روی سطح رنگی برند؛ نشان همیشه سبز است و در پس‌زمینهٔ سبز گم می‌شود (پایین را ببینید)
• به‌عنوان آیکون عمومی؛ برای آن Icons هست

استفاده

import { PartoLogo } from '@partodata/ui'

export function AppHeader() {
  return <PartoLogo variant="combined" size={28} />
}

حالت‌ها و انواع

سه واریانت

• combined (پیش‌فرض) — نشان و لوگوتایپ کنار هم، با همان نسبت‌های فایل لوگو: ارتفاع نشان size × 1.234، فاصلهٔ نشان تا لوگوتایپ size × 0.471، و لوگوتایپ size × 0.086 پایین‌تر از لبهٔ بالای نشان (دو جزء وسط‌چین نیستند). ترتیب اجزا ثابت است: ریشه dir="rtl" دارد و لوگو در صفحهٔ چپ‌به‌راست هم آینه نمی‌شود.
• logotype — فقط واژه‌نشان «پرتو»، برای جایی که نشان جداگانه در همان نما هست.
• icon — فقط نشان، برای فضای تنگ مثل نوار ناوبری جمع‌شده.

اندازه

size ارتفاع لوگوتایپ است (در icon، ارتفاع نشان)، نه عرض؛ عرض برای حفظ نسبت خودکار محاسبه می‌شود. پیش‌فرض 28.

کمترین اندازه: size دست‌کم 20 برای combined و logotype (در combined نشان 25 پیکسل و عرض کل حدود 78 پیکسل می‌شود)، و 24 برای icon. زیر این اندازه‌ها شیارهای نشان بسته می‌شوند؛ به‌جای کوچک کردن، به icon بروید. جدول کامل و اندازه‌های چاپی در لوگو در راهنمای برند آمده است.

نام محصول

<PartoLogo productName="پایش" />

فقط با واریانت combined معنا دارد و یک جداکنندهٔ عمودی به‌همراه نام اضافه می‌کند. این ترکیب برای سطح‌های بیرون از قاب محصول است: صفحهٔ ورود، سربرگ صفحهٔ بازاریابی یک محصول و سند. داخل ProductFrame آن را نگذارید: قاب نام محصول را از product.name خودش کنار نشان می‌نویسد و نام دو بار دیده می‌شود. product.name نام توصیفی محصول است («پایش»)، هرگز «پرتو». قاعدهٔ کامل در نام‌گذاری در راهنمای برند است.

// داخل قاب محصول: فقط نشان؛ نام را قاب می‌نویسد.
<ProductFrame product={{ name: 'پایش', logo: <PartoLogo variant="icon" size={24} /> }} nav={nav}>

راهنمای استفاده

Props

بقیهٔ propهای React.HTMLAttributes<HTMLSpanElement> روی <span> ریشه پخش می‌شوند و ref هم به همان می‌رسد.

دسترسی‌پذیری

• ریشهٔ لوگو یک نام دسترسی‌پذیر دارد: role="img" با aria-label="پرتو"، و با productName «پرتو، [نام محصول]». SVGهای درونی aria-hidden هستند، پس نام دو بار (و به دو زبان) خوانده نمی‌شود.
• برای نام دیگر aria-label بدهید؛ برای لوگوی تزئینی کنار متنی که همان را می‌گوید، aria-hidden="true".
• در هدری که لوگو به صفحهٔ اصلی پیوند می‌شود، نام پیوند مقصد را بگوید: aria-label="صفحهٔ اصلی پرتو" روی لوگو (وقتی لوگو تنها محتوای پیوند است، نام آن نام پیوند است)؛ خودِ «پرتو» مقصد را نمی‌رساند.

کامپوننت‌های مرتبط

• راهنمای برند: لوگو — ساختار، فضای آزاد، کمترین اندازه، رنگ و زمینه و گالری اشتباه‌ها؛ اگر دربارهٔ کاربرد برند تصمیم می‌گیرید نه دربارهٔ کد، آن‌جا شروع کنید
• ProductFrame — در قاب محصول، نشان را به product.logo آن بدهید (نسخهٔ icon در اندازهٔ 24)، نه اینکه دستی جای‌گذاری کنید
• Icons — برای آیکون‌های رابط؛ لوگو آیکون نیست