推荐一款简易的solid js消息UI库使用详解

更新时间：2022年08月29日 08:37:25 作者：超级大柱子

这篇文章主要为大家介绍了推荐一款简易的solid-js消息UI库使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

🏂🏽 solid-msg

今天推荐一款简易的 solid-js 的消息 UI 库

View DEMO

特性:

使用 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库的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

详解vue-cli@2.x项目迁移日志
这篇文章主要介绍了详解vue-cli@2.x项目迁移日志，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-06-06
Vue下拉选择框Select组件使用详解(一)
这篇文章主要为大家详细介绍了Vue下拉选择框Select组件的使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
教你在Vue3中使用useStorage轻松实现localStorage功能
这篇文章主要给大家介绍了关于如何在Vue3中使用useStorage轻松实现localStorage功能的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或工作具有一定的参考学习价值,需要的朋友可以参考下
2023-06-06
详解服务端预渲染之Nuxt（介绍篇）
这篇文章主要介绍了详解服务端预渲染之Nuxt（介绍篇）,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-04-04
详解vue slot插槽的使用方法
本篇文章主要介绍了详解vue slot插槽的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
vue添加axios,并且指定baseurl的方法
今天小编就为大家分享一篇vue添加axios,并且指定baseurl的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Pinia简单使用以及数据持久化详解
最近正在使用Pinia进行状态管理,我希望在重新刷新页面时保持状态,下面这篇文章主要给大家介绍了关于Pinia简单使用以及数据持久化的相关资料,需要的朋友可以参考下
2022-05-05
在vue3中安装使用bootstrap过程
这篇文章主要介绍了在vue3中安装使用bootstrap过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue watch监听触发优化搜索框的性能防抖节流的比较
这篇文章主要为大家介绍了vue watch监听触发优化搜索框的性能防抖节流的比较,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-10-10
详解Vue实现链接生成二维码并支持下载
在现代 Web 应用中,快速分享链接是一项常见需求,二维码作为一种简洁的分享方式,受到了广泛欢迎,所以本文将介绍如何使用 Vue 纯前端技术实现动态生成链接二维码的方法,需要的可以参考下
2024-03-03