نشان

برچسب به شما امکان می‌دهد وضعیت‌های مختلفی را به سربرگ‌های خود اضافه کنید. به عنوان مثال، می‌تواند مفید باشد تا نوع بخش را مشخص کنید یا نسخه‌های پشتیبانی شده را نشان دهید.

استفاده

شما می‌توانید از کامپوننت Badge که به صورت جهانی در دسترس است، استفاده کنید.

### عنوان <Badge type="info" text="پیش‌فرض" />
### عنوان <Badge type="tip" text="^1.9.0" />
### عنوان <Badge type="warning" text="بتا" />
### عنوان <Badge type="danger" text="هشدار" />

کد بالا به صورت زیر نمایش داده می‌شود:

عنوان پیش‌فرض

عنوان ^1.9.0

عنوان بتا

عنوان هشدار

ارائه دادن محتوای دلخواه

<Badge> می‌پذیرد children که در برچسب نمایش داده خواهد شد.

### عنوان <Badge type="info">عنصر سفارشی</Badge>

عنوان عنصر سفارشی

سفارشی‌سازی رنگ نوع

شما می‌توانید استایل برچسب‌ها را با دوباره‌نویسی متغیرهای css سفارشی کنید. مقادیر پیش‌فرض به شرح زیر هستند:

:root {
  --vp-badge-info-border: transparent;
  --vp-badge-info-text: var(--vp-c-text-2);
  --vp-badge-info-bg: var(--vp-c-default-soft);

  --vp-badge-tip-border: transparent;
  --vp-badge-tip-text: var(--vp-c-brand-1);
  --vp-badge-tip-bg: var(--vp-c-brand-soft);

  --vp-badge-warning-border: transparent;
  --vp-badge-warning-text: var(--vp-c-warning-1);
  --vp-badge-warning-bg: var(--vp-c-warning-soft);

  --vp-badge-danger-border: transparent;
  --vp-badge-danger-text: var(--vp-c-danger-1);
  --vp-badge-danger-bg: var(--vp-c-danger-soft);
}

<Badge>

کامپوننت <Badge> پراپ‌های زیر را می‌پذیرد:

interface Props {
  // وقتی `<slot>` ارسال می‌شود، این مقدار نادیده گرفته می‌شود.
  text?: string

  // پیش‌فرض به `tip`.
  type?: 'info' | 'tip' | 'warning' | 'danger'
}