CSS: alert

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

حالت شناور پیش‌فرض است، با یک سطح رنگی برجسته و عملیات هماهنگ با رنگ. -inline از یک سطح پاستلی، بدون سایه، نماد رنگی وضعیت، دکمهٔ بستهٔ استاندارد، عمل اصلی و یک عمل ثانویهٔ سوم استفاده می‌کند. یک دکمهٔ عمل مستقیم منفرد پس از متن بدون بسته‌بندی یک ردیف تشکیل می‌دهد؛ دو عمل را در .button-group بپیچید، جایی که ابتدا ثانویه سپس اصلی می‌شوند. هر تعدیل‌گر دکمه از این تخصیص خودکار نوع صرف‌نظر می‌کند. دکمهٔ بستن مستقیم به‌طور پیش‌فرض کوچک است؛ با افزودن یک تعدیل‌گر اندازه می‌توان آن را بازنویسی کرد.

Source: alert.css

TIP

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

دسترس‌پذیری

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

نحوه استفاده

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

نمونه‌ها

<div class="instui-alert -icon-megaphone --mb-md">
  یک هشدار با رنگ پیش‌فرض </div>
<div class="instui-alert -icon-megaphone -inline --mb-md">
  یک هشدار با رنگ پیش‌فرض </div>
<div class="instui-alert -color-success --mb-md">
  تبریک! شما از رنگ "success" استفاده می‌کنید.
  <button class="instui-button">باشه</button>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
<div class="instui-alert -color-success -inline --mb-md">
  تبریک! شما از رنگ "success" استفاده می‌کنید.
  <button class="instui-button">باشه</button>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
<div class="instui-alert -color-error --mb-md">
  تبریک! شما از رنگ "success" استفاده می‌کنید.
  <div class="button-group">
    <button class="instui-button">لغو</button>
    <button class="instui-button">باشه</button>
  </div>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
<div class="instui-alert -color-error -inline --mb-md">
  تبریک! شما از رنگ "success" استفاده می‌کنید.
  <div class="button-group">
    <button class="instui-button">لغو</button>
    <button class="instui-button">باشه</button>
  </div>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
<div class="instui-alert -color-warning --mb-md">
  تبریک! شما از رنگ "success" استفاده می‌کنید.
  <div class="button-group">
    <button class="instui-button">لغو</button>
    <button class="instui-button">باشه</button>
  </div>
  <button class="instui-close-button" aria-label="Close"></button>
</div>
<div class="instui-alert -color-warning -inline --mb-md">
  تبریک! شما از رنگ "success" استفاده می‌کنید.
  <div class="button-group">
    <button class="instui-button">لغو</button>
    <button class="instui-button">باشه</button>
  </div>
  <button class="instui-close-button" aria-label="Close"></button>
</div>

ساختار

.instui-alert
  ‹content›
  (choose one)
    bare-button
      button (component, 0..1)
    button-group
      .button-group
        button (component, 1..2)
  close-button (component, 0..1)

flowchart TD n0[".instui-alert"]:::cssdoc-root n1[/"‹content›"/]:::cssdoc-slot subgraph sg2 subgraph sg3 ["bare-button"] n4["@component button (0..1)"]:::cssdoc-root end subgraph sg5 ["button-group"] n6[".button-group"]:::cssdoc-root n7(["button"]):::cssdoc-component end end n8(["close-button"]):::cssdoc-component n0 --> n1 n6 -->|1..2| n7 n0 --> sg2 n0 -.->|0..1| n8 click n7 "/api/css/button.md" click n8 "/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-error	Alias — maps to .-color-danger.
.-color-info	اطلاع‌رسانی (پیش‌فرض).
.-color-success	یک پیام مثبت/تأییدی.
.-color-warning	یک پیام هشدارآمیز.
.-has-shadow-false	Alias — maps to .-without-shadow.
.-icon-*	شمای وضعیت را با یک آیکون سفارشی جایگزین کنید (مثلاً -icon-megaphone)، که روی نوار رنگی variant به رنگ سفید نگه داشته می‌شود.
.-inline	یک سطح پاستلی بدون برجستگی برای قرارگیری در جریان سند.
.-screen-reader-only	دیداری پنهان اما اعلان‌شده.
.-timeout	Interaction — 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	منسوخ — use .-inline.

قسمت‌ها

قسمت	توضیحات
.button-group	کانتینری برای نقل‌قول و ذکر منبع.

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

نیمه‌عنصر	توضیحات
::after	شمای سفید وضعیت، ماسک‌شده و در مرکز بالای نوار.
::before	—

حالت‌ها

وضعیت	توضیحات
[aria-disabled="true"]	—
:disabled	—

خواص سفارشی

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

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

Token	نوع	مقدار
--instui-color-background-interactive-action-primary-active	<color>	LightDarklight-dark(#061C30, #D5E2F6)
--instui-color-background-interactive-action-primary-base	<color>	LightDarklight-dark(#1D354F, #EEF4FD)
--instui-color-background-interactive-action-primary-hover	<color>	LightDarklight-dark(#234465, #ffffff)
--instui-color-drop-shadow-shadow-color1	<color>	LightDarklight-dark(rgba(35,68,101,0.15), rgba(0,0,0,0.3))
--instui-color-icon-base	<color>	LightDarklight-dark(#273540, #ffffff)
--instui-color-icon-error	<color>	LightDarklight-dark(#C51F22, #FA917F)
--instui-color-icon-info	<color>	LightDarklight-dark(#2369A4, #7FB4F1)
--instui-color-icon-on-color	<color>	#ffffff
--instui-color-icon-success	<color>	LightDarklight-dark(#017533, #61C378)
--instui-color-icon-warning	<color>	LightDarklight-dark(#664800, #E0A300)
--instui-color-stroke-interactive-action-primary-active	<color>	LightDarklight-dark(#061C30, #D5E2F6)
--instui-color-stroke-interactive-action-primary-base	<color>	LightDarklight-dark(#1D354F, #EEF4FD)
--instui-color-stroke-interactive-action-primary-hover	<color>	LightDarklight-dark(#234465, #ffffff)
--instui-color-text-base	<color>	LightDarklight-dark(#273540, #F2F4F5)
--instui-color-text-interactive-action-primary-base	<color>	LightDarklight-dark(#ffffff, #1D354F)
--instui-component-alert-border-radius	<length>	0.75rem
--instui-component-alert-border-style	—	solid
--instui-component-alert-border-width	<length>	0.0625rem
--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>	0.75rem
--instui-component-alert-content-padding-vertical	<length>	0.75rem
--instui-component-alert-danger-background	<color>	#E62429
--instui-component-alert-danger-background-inline	<color>	LightDarklight-dark(#FFE3DE, #750D0F)
--instui-component-alert-danger-border-color	<color>	#E62429
--instui-component-alert-danger-border-color-inline	—	color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--instui-component-alert-icon-padding-left	<length>	0.75rem
--instui-component-alert-icon-padding-vertical	<length>	1rem
--instui-component-alert-info-background	<color>	#2B7ABC
--instui-component-alert-info-background-inline	<color>	LightDarklight-dark(#DEEBFF, #123E62)
--instui-component-alert-info-border-color	<color>	#2B7ABC
--instui-component-alert-info-border-color-inline	—	color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--instui-component-alert-success-background	<color>	#03893D
--instui-component-alert-success-background-inline	<color>	LightDarklight-dark(#CAF4D0, #01451B)
--instui-component-alert-success-border-color	<color>	#03893D
--instui-component-alert-success-border-color-inline	—	color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--instui-component-alert-warning-background	<color>	LightDarklight-dark(#F0C16C, #8C6400)
--instui-component-alert-warning-background-inline	<color>	LightDarklight-dark(#F7E7CF, #4D3600)
--instui-component-alert-warning-border-color	<color>	LightDarklight-dark(#F0C16C, #8C6400)
--instui-component-alert-warning-border-color-inline	—	color-mix(in srgb, light-dark(#5F6E7A, #9EA6AD) 20%, transparent)
--instui-component-base-button-medium-height	<length>	2.5rem
--instui-component-base-button-primary-disabled-background-color	<color>	LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-base-button-primary-disabled-border-color	<color>	LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-base-button-primary-disabled-text-color	<color>	LightDarklight-dark(#F2F4F5, #273540)
--instui-component-base-button-primary-ghost-active-background	—	color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 20%, transparent)
--instui-component-base-button-primary-ghost-border-color	—	color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 40%, transparent)
--instui-component-base-button-primary-ghost-color	<color>	LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-base-button-primary-ghost-hover-background	—	color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 10%, transparent)
--instui-component-base-button-primary-inverse-active-background	<color>	#E2EAF7
--instui-component-base-button-primary-inverse-background	<color>	#ffffff
--instui-component-base-button-primary-inverse-border-color	<color>	#ffffff
--instui-component-base-button-primary-inverse-color	<color>	#213D5B
--instui-component-base-button-primary-inverse-ghost-active-background	<color>	rgba(255,255,255,0.1)
--instui-component-base-button-primary-inverse-ghost-border-color	<color>	#ffffff
--instui-component-base-button-primary-inverse-ghost-color	<color>	#ffffff
--instui-component-base-button-primary-inverse-ghost-hover-background	<color>	rgba(255,255,255,0.1)
--instui-component-base-button-primary-inverse-hover-background	<color>	#EEF4FD
--instui-component-base-button-primary-on-color-active-border-color	<color>	#B6CCEA
--instui-component-base-button-primary-on-color-active-text-color	<color>	#213D5B
--instui-component-base-button-primary-on-color-disabled-background-color	<color>	#8D959F
--instui-component-base-button-primary-on-color-disabled-border-color	<color>	#8D959F
--instui-component-base-button-primary-on-color-disabled-text-color	<color>	#4A5B68
--instui-component-base-button-primary-on-color-hover-border-color	<color>	#D5E2F6
--instui-component-base-button-primary-on-color-hover-text-color	<color>	#213D5B
--instui-component-base-button-secondary-on-color-active-border-color	<color>	#B6CCEA
--instui-component-base-button-secondary-on-color-active-text-color	<color>	#ffffff
--instui-component-base-button-secondary-on-color-disabled-border-color	<color>	#8D959F
--instui-component-base-button-secondary-on-color-disabled-text-color	<color>	#9EA6AD
--instui-component-base-button-small-font-size	<length>	0.875rem
--instui-component-base-button-small-height	<length>	2rem
--instui-component-base-button-small-padding-horizontal	<length>	0.75rem
--instui-component-base-button-tertiary-active-border-color	—	color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 30%, transparent)
--instui-component-base-button-tertiary-active-text-color	<color>	LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-base-button-tertiary-disabled-border-color	<color>	LightDarklight-dark(#C7CACD, #4A5B68)
--instui-component-base-button-tertiary-disabled-text-color	<color>	LightDarklight-dark(#AAB0B5, #4A5B68)
--instui-component-base-button-tertiary-hover-border-color	—	color-mix(in srgb, light-dark(#1D354F, #EEF4FD) 20%, transparent)
--instui-component-base-button-tertiary-hover-text-color	<color>	LightDarklight-dark(#1D354F, #EEF4FD)
--instui-component-shared-tokens-spacing-gap-buttons	<length>	0.75rem
--instui-component-shared-tokens-spacing-general-space-md	<length>	0.75rem
--instui-component-text-base-on-color	<color>	#ffffff
--instui-drop-shadow-blur-elevation4-dropshadow1	<length>	12px
--instui-drop-shadow-spread-elevation4-dropshadow1	<length>	6px
--instui-drop-shadow-y-elevation4-dropshadow1	<length>	8px
--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%22m16%209-5.5%205.5L8%2012%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-alert-icon-color	<color>	#ffffff
--pantoken-glyph	<url>	url("data:image/svg+xml

زیرمولفه‌ها

• button
• close-button

مرتبط

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