用于吸引用户注意力的简短消息。
您需要管理员权限才能安装和访问此应用程序。
<Callout.Root>
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
You will need admin privileges to install and access this application.
</Callout.Text>
</Callout.Root>
将图标和文本部分组合在一起。此组件基于 div
元素,并支持 通用 margin 属性。
属性 | 类型 | 默认值 |
---|---|---|
asChild | boolean | 无默认值 |
size | Responsive<"1" | "2" | "3"> | "2" |
variant | "soft" | "surface" | "outline" | "soft" |
color | enum | 无默认值 |
highContrast | boolean | 无默认值 |
为与提示信息关联的图标提供宽度和高度。此组件基于 div
元素。
渲染提示信息的文本。此组件基于 p
元素。
使用 size
属性控制尺寸。
您需要管理员权限才能安装和访问此应用程序。
您需要管理员权限才能安装和访问此应用程序。
您需要管理员权限才能安装和访问此应用程序。
<Flex direction="column" gap="3" align="start">
<Callout.Root size="1">
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
You will need admin privileges to install and access this application.
</Callout.Text>
</Callout.Root>
<Callout.Root size="2">
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
You will need admin privileges to install and access this application.
</Callout.Text>
</Callout.Root>
<Callout.Root size="3">
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
You will need admin privileges to install and access this application.
</Callout.Text>
</Callout.Root>
</Flex>
使用 variant
属性控制视觉样式。
<Flex direction="column" gap="3">
<Callout.Root variant="soft">
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
You will need <Link href="#">admin privileges</Link> to install and access
this application.
</Callout.Text>
</Callout.Root>
<Callout.Root variant="surface">
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
You will need <Link href="#">admin privileges</Link> to install and access
this application.
</Callout.Text>
</Callout.Root>
<Callout.Root variant="outline">
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
You will need <Link href="#">admin privileges</Link> to install and access
this application.
</Callout.Text>
</Callout.Root>
</Flex>
使用 color
属性分配特定颜色。
<Flex direction="column" gap="3">
<Callout.Root color="blue">
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
You will need <Link href="#">admin privileges</Link> to install and access
this application.
</Callout.Text>
</Callout.Root>
<Callout.Root color="green">
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
You will need <Link href="#">admin privileges</Link> to install and access
this application.
</Callout.Text>
</Callout.Root>
<Callout.Root color="red">
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
You will need <Link href="#">admin privileges</Link> to install and access
this application.
</Callout.Text>
</Callout.Root>
</Flex>
使用 HighContrast
属性添加额外的对比度。
Radix Themes 有可用更新。查看 3.2.0 版本的新功能。
Radix Themes 有可用更新。查看 3.2.0 版本的新功能。
<Flex direction="column" gap="3">
<Callout.Root color="gray" variant="soft">
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
An update to Radix Themes is available. See what’s new in version 3.2.0.
</Callout.Text>
</Callout.Root>
<Callout.Root color="gray" variant="soft" highContrast>
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
An update to Radix Themes is available. See what’s new in version 3.2.0.
</Callout.Text>
</Callout.Root>
</Flex>
当需要用户立即关注时,例如出现错误消息时,向提示信息添加原生 WAI-ARIA alert
角色 角色。屏幕阅读器将被中断,并立即播报新内容。
访问被拒绝。请联系网络管理员以查看此页面。
<Callout.Root color="red" role="alert">
<Callout.Icon>
<ExclamationTriangleIcon />
</Callout.Icon>
<Callout.Text>
Access denied. Please contact the network administrator to view this page.
</Callout.Text>
</Callout.Root>