精选
警告提示Inline Alert
A static status message in four severities, sitting in the flow.
#alert#inline#status
6 个框架初级
Loading…
A "fix these first" summary over a real, semantic list of specifics.
<!--
The "fix these first" summary: a title plus a real <ul> of specifics. The list
is semantic, so a screen reader announces "list, 3 items" and lets the user
step through them. Each row is items-start with a flex-none marker and a
min-w-0 text cell, so a long line wraps under itself instead of shoving the
marker off-screen at 320px. role="alert" because this is an error blocking the
user right now.
-->
<div class="rounded-lg border border-red-200 bg-red-50 px-4 py-3.5 text-red-800 dark:border-red-900 dark:bg-red-950 dark:text-red-200" role="alert">
<div class="flex items-start gap-2.5">
<svg class="mt-px h-[1.125rem] w-[1.125rem] flex-none" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM7.7 7.7a1 1 0 0 1 1.4 0L10 8.6l.9-.9a1 1 0 1 1 1.4 1.4l-.9.9.9.9a1 1 0 0 1-1.4 1.4l-.9-.9-.9.9a1 1 0 0 1-1.4-1.4l.9-.9-.9-.9a1 1 0 0 1 0-1.4Z" />
</svg>
<p class="min-w-0 flex-1 text-sm font-semibold">Fix 3 issues before publishing</p>
</div>
<ul class="mt-2 space-y-1.5 pl-[1.625rem] text-sm">
<li class="flex items-start gap-2">
<span class="mt-1.5 h-1.5 w-1.5 flex-none rounded-full bg-current" aria-hidden="true"></span>
<span class="min-w-0 flex-1 leading-normal">The billing address is missing a postal code.</span>
</li>
<li class="flex items-start gap-2">
<span class="mt-1.5 h-1.5 w-1.5 flex-none rounded-full bg-current" aria-hidden="true"></span>
<span class="min-w-0 flex-1 leading-normal">Two line items reference a product that was archived.</span>
</li>
<li class="flex items-start gap-2">
<span class="mt-1.5 h-1.5 w-1.5 flex-none rounded-full bg-current" aria-hidden="true"></span>
<span class="min-w-0 flex-1 leading-normal">The purchase-order number is longer than the 20 characters your ERP accepts.</span>
</li>
</ul>
</div>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
title必填 | string | - | 卡片的标题文本。 |
items必填 | string[] | - | 要渲染的项目数组。 |
severity | 'info' | 'success' | 'warning' | 'error' | 'error' | 通知的语气，决定其颜色和图标。 |
className | string | - | 合并到根元素上的额外类名。 |
Keep the list a genuine <ul> so a screen reader announces the count and lets users step through it. Each row is items-start with a flex-none marker and a min-w-0 text cell, so long lines wrap under themselves instead of overflowing at 320px. role="alert" only while it blocks the user.