大家注意:因为微信最近又改了推送机制,经常有小伙伴说错过了之前被删的文章,或者一些限时福利,错过了就是错过了。所以建议大家加个星标,就能第一时间收到推送。大家好,我是「前端实验室」爱分享的了不起~
刚刚发现一个有趣的组件库,官方介绍是为了构建 AIGC 网页应用而生的组件库。这不~就赶紧和大家一起分享!
简介
LobeHub UI 是一个基于Antd组件开发,完全兼容Antd组件的,可以快速构建 AIGC 项目的组件库。
推荐使用 antd-style 作为默认的 css-in-js 样式解决方案。
LobeHub UI 只是Lobe产品系列中的一个。它是如何用于 AIGC 应用的呢?我们接着来看。
安装和使用
安装LobeHub 目前仅支持 ESM 模块化规范。我们可以直接通过以下命令进行安装
bun add @lobehub/ui
—-
npm install @lobehub/ui
如果希望在使用Next.js进行编译,同时正确使用Next.js的SSR(服务器端渲染),可以在next.config.js文件中添加transpilePackages: [@lobehub/ui]。
// next.config.js
const nextConfig = {
// …other config
transpilePackages: [@lobehub/ui],
};
使用刚才说了,LobeUI 组件是基于 Antd 开发的,完全兼容 Antd 组件。可以一起使用。
import { ThemeProvider, Button } from @lobehub/uiimport { Button } from antdexportdefault () => (
)
好啦~怎么说它是用来构建AIGC的呢?举个官方按钮组的例子。
右边有对按钮组的设定。下边是横排显示下边是纵排显示还有类型样式选择
当然每个组件可供选项不一样,且目前还只是简单AIGC阶段,大家可以参阅官方地址参阅详情。
官方地址
https://ui.lobehub.com/期待后续LobeUI更多的更新!
最后
欢迎加入前端实验室读者交流群,分享交流优秀的技术和资料。
如果这篇文章对你有用的话,请大家多多 [点赞],给一个小小的鼓励吧~