CSS: alert ​

.instui-alert · stable — یک پیام درون‌خطی با نوار رنگی وضعیت و یک شمای وضعیت ماسک‌شده از مجموعه آیکون مشترک.

یک -icon-<name> سفارشی شمای وضعیت را عوض می‌کند اما نوار رنگی variant را حفظ می‌کند؛ پر شدن نوار با specificity بالاتر دوباره اعمال می‌شود تا painter آیکون مشترک آن را مصرف نکند. دکمه بستن مستقیم به‌صورت پیش‌فرض کوچک است؛ برای تغییر آن یک مودیفایر اندازه اضافه کنید.

Source: alert.css

TIP

افزایش JS — CSS این مؤلفه خودش رندر می‌شود و مستقل عمل می‌کند؛ آن را با @pantoken/interactions جفت کنید تا رفتار تعاملی اضافه شود. مودیفایر -timeout توسط آن رفتار کنترل می‌شود. جدول مودیفایرها را در جدول مودیفایر زیر ببینید.

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

برای یک پیام مهم، role="alert" یا یک ناحیه aria-live اضافه کنید تا فناوری کمکی آن را اعلان کند؛ کنترل بستن یک دکمه بسته‌بندی‌شده است (در مثال .instui-close-button دارای aria-label="Close" است).

نحوه استفاده ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/alert.css";

نمونه‌ها ​

html
<div class="instui-alert -icon-megaphone --mb-md">
  An alert with the default <code>info</code> color, and a custom icon.
</div>
<div class="instui-alert -color-success">
  Congratulations! You're using the "success" color.
  <button class="instui-close-button" aria-label="Close"></button>
</div>

ساختار ​

text
.instui-alert
  ‹content›
  close-button (component, 0..1)
flowchart TD n0[".instui-alert"]:::cssdoc-root n1[/"‹content›"/]:::cssdoc-slot n2(["close-button"]):::cssdoc-component n0 --> n1 n0 -.->|0..1| n2 click n2 "/api/css/close-button.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

شکاف‌ها (Slots) ​

شکافتوضیحات
contentمحتوای پیام هشدار؛ ممکن است شامل دکمه رد کردن باشد.

تعدیل‌کننده‌ها ​

تعدیل‌کنندهتوضیحات
.-color-dangerیک پیام خطا.
.-color-infoاطلاع‌رسانی (پیش‌فرض).
.-color-successیک پیام مثبت/تأییدی.
.-color-warningیک پیام هشدارآمیز.
.-has-shadow-falseAlias — maps to .-without-shadow.
.-icon-*شمای وضعیت را با یک آیکون سفارشی جایگزین کنید (مثلاً -icon-megaphone)، که روی نوار رنگی variant به رنگ سفید نگه داشته می‌شود.
.-render-custom-icon-*منسوخ — The former renderCustomIcon prop; still works as an alias, but use -icon-<name> (or override --pantoken-alert-glyph) instead.
.-screen-reader-onlyدیداری پنهان اما اعلان‌شده.
.-timeoutInteraction — The alert will automatically dismiss after a default of 5 seconds.
.-timeout-1یک ثانیه قبل از رد خودکار.
.-timeout-2دو ثانیه قبل از رد خودکار.
.-timeout-3سه ثانیه قبل از رد خودکار.
.-timeout-4چهار ثانیه قبل از رد خودکار.
.-timeout-5پنج ثانیه قبل از رد خودکار.
.-variant-errorمنسوخ — use .-color-danger.
.-variant-infoمنسوخ — use .-color-info.
.-variant-successمنسوخ — use .-color-success.
.-variant-warningمنسوخ — use .-color-warning.
.-without-shadowسایه elevation پیش‌فرض را حذف کنید (InstUI hasShadow={false}).

نیمه‌عناصر (Pseudo-elements) ​

نیمه‌عنصرتوضیحات
::afterشمای سفید وضعیت، ماسک‌شده و در مرکز بالای نوار.
::beforeنوار وضعیت با رنگ variantِ جامد، چسبیده به لبهٔ گرد شروع.

خواص سفارشی ​

خاصیتنوعپیش‌فرضتوضیحات
--pantoken-alert-glyph<url>—منبع سطح پایین شمای وضعیت؛ -icon-<name> آن را برای شما تنظیم می‌کند. برای آیکون سفارشی (یک SVG کدشده در URL) بازنویسی کنید.
--pantoken-alert-icon-bg<color>—پر کردن نوار وضعیت رنگی پشت شمای وضعیت؛ هر variant از -color-* مقدار خاص خود را تعیین می‌کند.
--timeout<integer>—میلی‌ثانیه‌ها قبل از رد خودکار؛ 0 آن را غیرفعال می‌کند. نیاز به بستهٔ تعامل هشدار دارد.

توکن‌های مصرف‌شده ​

Tokenنوعمقدار
--instui-component-alert-background<color>LightDarklight-dark(#ffffff, #171B21)
--instui-component-alert-border-radius<length>0.75rem
--instui-component-alert-border-style—solid
--instui-component-alert-border-width<length>0.125rem
--instui-component-alert-color<color>LightDarklight-dark(#273540, #ffffff)
--instui-component-alert-content-font-family[ <font-family-name> | <generic-font-family> ]#Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-alert-content-font-size<length>1rem
--instui-component-alert-content-font-weight<integer>400
--instui-component-alert-content-line-height<percentage>125%
--instui-component-alert-content-padding-horizontal<length>1.5rem
--instui-component-alert-content-padding-vertical<length>0.75rem
--instui-component-alert-danger-border-color<color>#E62429
--instui-component-alert-danger-icon-background<color>#E62429
--instui-component-alert-icon-color<color>#ffffff
--instui-component-alert-info-border-color<color>#2B7ABC
--instui-component-alert-info-icon-background<color>#2B7ABC
--instui-component-alert-success-border-color<color>#03893D
--instui-component-alert-success-icon-background<color>#03893D
--instui-component-alert-warning-border-color<color>#CF4A00
--instui-component-alert-warning-icon-background<color>#CF4A00
--instui-component-base-button-medium-height<length>2.5rem
--instui-component-base-button-small-height<length>2rem
--instui-elevation-abovenone | <shadow>#—
--instui-icon-circle-check<image>url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%2F%3E%3C%2Fsvg%3E')
--instui-icon-circle-x<image>url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m15%209-6%206%22%2F%3E%3Cpath%20d%3D%22m9%209%206%206%22%2F%3E%3C%2Fsvg%3E')
--instui-icon-info<image>url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%2016v-4%22%2F%3E%3Cpath%20d%3D%22M12%208h.01%22%2F%3E%3C%2Fsvg%3E')
--instui-icon-triangle-alert<image>url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3%22%2F%3E%3Cpath%20d%3D%22M12%209v4%22%2F%3E%3Cpath%20d%3D%22M12%2017h.01%22%2F%3E%3C%2Fsvg%3E')
--instui-spacing-space-xs<length>0.25rem
--pantoken-glyph<url>url("data:image/svg+xml

زیرمولفه‌ها ​

مرتبط ​

  • close-button — کنترل رد که یک هشدار ممکن است شامل آن باشد.