返回顶部
首页 > 资讯 > 前端开发 > JavaScript >推荐一款简易的solid js消息UI库使用详解
  • 666
分享到

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

2024-04-02 19:04:59 666人浏览 八月长安
摘要

目录?? solid-msg快速开始调整配置自定义消息内容自定义消息卡片?? solid-msg 今天推荐一款简易的 solid-js 的消息 UI 库 View DEMO 特性:

?? 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库的资料请关注编程网其它相关文章!

--结束END--

本文标题: 推荐一款简易的solid js消息UI库使用详解

本文链接: https://lsjlt.com/news/166218.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作