我写了一个专门用于桌面软件的前端组件库

thepoy

本组件库使用 solidjs 开发，应用于使用 tauri、electron 开发的桌面软件，所以当前未实现message、notification、modal等反馈组件，这些组件可通过桌面开发框架调用系统 API 或创建多窗口实现。

组件以精简为主，绝不添加复杂功能，对复杂功能有需要的应该使用 antd、element-plus 等全功能组件库。

参考了一些 React 组件库的实现，包括：

• antd
• mui

所以这个组件库没有自己的设计风格，一切为了效率，对设计有需求可以自己修改组件样式。

代码：https://github.com/alley-rs/alley-components

在线示例：https://codesandbox.io/p/devbox/github/alley-rs/alley-components/tree/release?file=%2Fsrc%2FApp.tsx

基于此组件库开发的小软件：https://github.com/alley-rs/alley-transfer

版规要求上传代码，下面是组件库使用的一段示例代码：

import { createSignal, lazy } from "solid-js";
import { Button, FloatButton, Layout, Toast } from "alley-components";  // 直接导入
import { Dynamic } from "solid-js/web";
import DarkSwitchButton from "./DarkSwitch";
import { AiOutlineClose, AiOutlineDelete } from "solid-icons/ai";

// 使用 Dynamic 而不是路由加载 Layout.Content
const children = [
  lazy(() => import("./components/buttons")),
  lazy(() => import("./components/inputs")),
  lazy(() => import("./components/tooltips")),
  lazy(() => import("./components/progresses")),
  lazy(() => import("./components/spinners")),
  lazy(() => import("./components/alerts")),
  lazy(() => import("./components/typographys")),
  lazy(() => import("./components/toast")),
  lazy(() => import("./components/list")),
];

const LazyMenu = lazy(() => import("alley-components/lib/components/menu"));  // 懒加载导入

const menus = [
  "按钮",
  "输入",
  "文字提示",
  "进度条",
  "加载中",
  "警告",
  "文本",
  "轻提示",
  "列表",
];

const App = () => {
  const [index, setIndex] = createSignal(0);

  const [toastOpen, setToastOpen] = createSignal(false);

  return (
    <>
      <Layout
        menu={
          <LazyMenu
            style={{ width: "160px" }}
            defaultSelectedIndex={0}
            items={menus.map((s, idx) => ({
              children: s,
              onClick: () => setIndex(idx),
            }))}
          />
        }
        content={<Dynamic component={children[index()]} />}
      />

      <Toast
        message="已清空"
        open={toastOpen()}
        onClose={() => setToastOpen(false)}
        action={
          <Button
            icon={<AiOutlineClose />}
            type="plain"
            shape="circle"
            onClick={() => setToastOpen(false)}
            danger
          />
        }
      />

      <FloatButton.Group>
        <FloatButton.BackTop visibilityHeight={100} />
        <DarkSwitchButton />
        <FloatButton
          danger
          icon={<AiOutlineDelete />}
          onClick={() => setToastOpen(true)}
        />
        <FloatButton />
      </FloatButton.Group>
    </>
  );
};

export default App;

爱飞的猫

感谢分享开发的前端库，但是也请在主贴放一些代码片段，例如从你的沙盒链接里选取部分代码贴进来展示如何集成。

参考版规：

发布帖子必须带上关键代码

thepoy

爱飞的猫 发表于 2024-3-12 22:03
[md]感谢分享开发的前端库，但是也请在主贴放一些代码片段，例如从你的沙盒链接里选取部分代码贴进来展示如 ...

组件库哪儿有关键代码啊，我随便上传一段也不合适啊

爱飞的猫

thepoy 发表于 2024-3-12 22:05
组件库哪儿有关键代码啊，我随便上传一段也不合适啊

随便挑一段就成
你之前更新的那段也可以

生命的插曲

请教一下，这个怎么用？

thepoy

生命的插曲 发表于 2024-3-13 06:19
请教一下，这个怎么用？

你指的是什么怎么用？

woawapj

进来学习一下

TobiasCN

进来就是学习，加油，加油。

ysjd22

进来学习一下代码

Corgibro

不得不说真厉害，虽然不是干这个的，看不懂