火星网校
Antd 的 AIGC 组件库 LobeUI 了解一下
发布时间：2024-07-23 18:44:38 浏览量：168次
大家好，很高兴再次与大家见面，我是"高级前端进阶"，在这里会带领大家关注前端前沿、深入前端底层技术，共同进步。欢迎大家关注、点赞、收藏、转发！
什么是 LobeUI
LobeUI是一个开源的UI组件库，用于快速搭建AIGC Web应用程序。
LobeUI组件基于Antd组件开发，完全兼容Antd组件，推荐使用antd-style作为默认的css-in-js样式解决方案。
LobeUI的特点包括：
- 主题化：提供了一种简单方法来自定义默认主题，开发者可以轻松更改颜色、字体等。
- 快速：避免不必要的样式属性，性能高于其他UI库。
- 支持浅色和深色用户界面：自动暗模式识别，可自动更改主题。
目前LobeUI在Github上通过MIT协议开源，是一个值得关注的前端AIGC项目。
如何使用 LobeUI
LobeUI软件包目前仅适用于ESM。要安装LobeUI，请运行以下命令：
$ bun add @lobehub/ui
如果要在NextJS中使用，并需要正确使用nextjs ssr，可以将transpilePackages: ['@lobehub/ui']添加到next.config.js。例如：
// next.config.jsconst nextConfig = { // ...other config transpilePackages: ['@lobehub/ui'],};
建议使用antd-style作为默认的css-in-js样式解决方案，可以通过ThemeProvider方式使用样式：
import {ThemeProvider, Button} from '@lobehub/ui'import {Button} from 'antd'export default () => ( )
如果想使用styled-components的css-in-js方案，可以参考以下示例：
import styled from 'styled-component';import {List} from 'xxx';// Create a styled componentconst StyledList = styled(List)` border: 1px solid ${(p) => p.theme.colorPrimary}; border-radius: 2px; box-shadow: 0 8px 20px ${(p) => p.theme.colorShadow};`;const App: FC = ({list}) => { return ( // Reference the component
除了LobeUI外，还可以使用以下开源项目快速开发AIGC项目：
- Lobe Chat：一个开源、高性能的聊天机器人框架，支持私人ChatGPT/LLM Web应用程序部署。
- Lobe Theme：现代主题，稳定的扩散webui、精美的界面设计、高度可定制的UI和效率提升功能。
- Lobe i18n ：用于i18n（国际化）翻译的自动化工具，支持大文件自动拆分、增量更新等功能。
- Lobe Commit：CLI工具，生成基于Gitmoji的提交消息。
参考资料
https://github.com/lobehub/lobe-ui
https://styled-components.com/
https://github.com/lobehub/lobe-chat
想要了解更多关于数字艺术教育方面的内容？欢迎点击点击咨询哦！
热门课程推荐
热门资讯
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
9. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
10. 武汉UI设计培训班费用怎么样？想学UI设计要多少钱？
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
