CSS: alert ​

.instui-alert · stable — رسالة داخلية بخانة حالة ملونة وصورة حالة مخفية من مجموعة الأيقونات المشتركة.

يستبدل -icon-<name> المخصص صورة الحالة لكنه يحتفظ بشريط اللون الخاص بالمُكوّن؛ يتم إعادة تطبيق تعبئة الشريط بخصوصية أعلى حتى لا يستهلكها رسام الأيقونات المشترك. زر الإغلاق المباشر يكون صغيرًا افتراضيًا؛ أضف مُعدِّل الحجم لتغييره.

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;

فتحات ​

فتحةالوصف
contentمحتوى رسالة التنبيه؛ قد يتضمن زر رفض.

المعدّلات ​

معدّلالوصف
.-color-dangerرسالة خطأ.
.-color-infoمعلوماتية (الافتراضي).
.-color-successرسالة إيجابية/تأكيدية.
.-color-warningرسالة تحذيرية.
.-has-shadow-falseAlias — maps to .-without-shadow.
.-icon-*استبدل صورة الحالة بأيقونة مخصصة (مثال -icon-megaphone)، تُترك بيضاء فوق شريط المتغير الملون.
.-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إزالة ظل الارتفاع الافتراضي (InstUI hasShadow={false}).

عناصر زائفة ​

عنصر زائفالوصف
::afterصورة الحالة البيضاء، مُقنعة ومُوسَّطة فوق الشريط.
::beforeشريط الحالة المتصلبلون الصلب للمتغير، ملتصق بحافة البداية المستديرة.

خصائص مخصّصة ​

خاصيةنوعافتراضيالوصف
--pantoken-alert-glyph<url>—مصدر صورة الحالة منخفض المستوى؛ -icon-<name> يضبطه لك. تجاوزه لأيقونة مخصصة (SVG مشفَّر كعنوان).
--pantoken-alert-icon-bg<color>—تعبئة شريط الحالة الملون خلف الصورة؛ كل متغير -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 — عنصر الرفض الذي قد يتضمنه التنبيه.