推薦一款簡易的solid?js消息UI庫使用詳解
更新時間:2022年08月29日 08:37:25 作者:超級大柱子
這篇文章主要為大家介紹了推薦一款簡易的solid-js消息UI庫使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
???? solid-msg
今天推薦一款簡易的 solid-js
的消息 UI 庫
特性:
- 使用 twind 處理 css
- 進度條 bar
- 易于使用
- 易于定制
- 輕量, 僅
1.5kb
in gzip
快速開始
安裝:
pnpm i "solid-msg"
在 Solid 工程中使用:
import { solidMsg } from "solid-msg"; solidMsg.light("hello solid-msg")
調整配置
import { solidMsg } from "solid-msg"; solidMsg.setOptions({ positon:"center", clickCardClose: true, closeButton: false, progress: false, width: "500px", padding: "20px", }); solidMsg.light("hello solid-msg")
自定義消息內容
import { solidMsg } from "solid-msg"; solidMsg.light( <div> <h2>the title</h2> <div>the message</div> </div> );
自定義消息卡片
import { solidMsg } from "solid-msg"; solidMsg.setOptions({ Component: MsgComponent, }); const MsgComponent: Component<{ id: string; msg: any; type: MsgType; duration: number; }> = (p) => { return ( <div> <div>Your custom message card</div> <div>{p.msg}</div> </div> ); };
以上就是推薦一款簡易的solid-js消息UI庫使用詳解的詳細內容,更多關于solid-js消息UI庫的資料請關注腳本之家其它相關文章!
相關文章
教你在Vue3中使用useStorage輕松實現localStorage功能
這篇文章主要給大家介紹了關于如何在Vue3中使用useStorage輕松實現localStorage功能的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或工作具有一定的參考學習價值,需要的朋友可以參考下2023-06-06vue?watch監(jiān)聽觸發(fā)優(yōu)化搜索框的性能防抖節(jié)流的比較
這篇文章主要為大家介紹了vue?watch監(jiān)聽觸發(fā)優(yōu)化搜索框的性能防抖節(jié)流的比較,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10