大家好,我是「前端实验室」
爱分享的了不起~
刚刚发现一个有趣的组件库,官方介绍是为了构建 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/ui'
import { Button } from 'antd'
export default () => (
<ThemeProvider>
<Button>Hello AIGC</Button>
</ThemeProvider>
)
好啦~怎么说它是用来构建AIGC
的呢?举个官方按钮组的例子。
右边有对按钮组的设定。下边是横排显示
下边是纵排显示
还有类型样式选择
当然每个组件可供选项不一样,且目前还只是简单AIGC
阶段,大家可以参阅官方地址参阅详情。
官方地址 https://ui.lobehub.com/
期待后续LobeUI
更多的更新!