其它组件
如何自定义 Alert
封装 Alert 组件功能说明
前言
Alter 组件主要是为了 Message 和 Notification 组件使用，并且实现上仅仅涉及到样式的变化，而没有 javascript 部分。
所以这篇文章就分别封装 css 和 tailwindcss 版本的 Alert 组件。实际生产中，可以根据项目需求选择使用和改造。
CSS 版本 Alert
Alert
This is an alert message
Alert
This is an alert message
Alert
This is an alert message
Alert
This is an alert message
Alert
Alert
Alert
Alert
Css
编辑代码
以上代码对于大家来说应该没什么难度，这里就不展开讲了。以下是 Tailwindcss 版本:
Tailwindcss 版本 Alert
Alert
This is an alert message
Alert
This is an alert message
Alert
This is an alert message
Alert
This is an alert message
Alert
Alert
Alert
Alert
编辑代码
CSS 版本 Modal-alert
Alert
This is an alert message
Css
编辑代码
编辑信息
姓名
手机号
Css
编辑代码
Tailwindcss 版本 Modal-alert
Modal Alert
This is a message!
编辑代码
Modal Alert
姓名
手机号
编辑代码
CSS 版本 Drawer-alert
Drawer Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Css
编辑代码
Tailwindcss 版本 Drawer-alert
Drawer Alert
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
编辑代码
附录
因为 headless 组件是无样式的，所以Alert 组件并没有在 @t-headless-ui/react 中。
但是大家如果要想现成的，完全可以参考这篇文章的内容，拷贝到项目中改造。