非常好用的组件库【semi.design】

简介: 非常好用的组件库【semi.design】

前言

hello world欢迎来到前端的新世界


😜当前文章系列专栏:前端系列文章

🐱‍👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错误,感谢大家指出)🌹

💖感谢大家支持!您的观看就是作者创作的动力

semi.design是什么?

semi.design官网

官网是这样说的:

由抖音前端与 UED 团队维护,易于定制的现代化设计系统,帮助设计师与开发者打造高质量产品。

怎么使用?

安装


# 使用 npm
npm i @douyinfe/semi-ui
# 使用 yarn
yarn add @douyinfe/semi-ui
# 使用 pnpm
pnpm add @douyinfe/semi-ui


在 Webpack、create-react-app 或 Vite 项目中使用时,无需进行任何编译项配置,直接使用即可。构建时所有相关资源均会按需打包。


直接使用


import { Button,Toast } from '@douyinfe/semi-ui';
const View = ()=>{
    return(
        <div className="about">
            <p>
                <Button onClick={() => Toast.warning({ content: 'welcome' })}>Hello Semi</Button>
            </p>
        </div>
    )
}
export default View



设计稿转代码

Design to code(简称D2C) 是 Semi Design 提供的设计稿转代码功能,支持一键识别 Figma 页面中图层布局 + Semi 组件,像素级还原设计稿,转译为 JSX 和 CSS 代码,快捷预览, 无需从 0 开发。

从此,你可以将 UI 还原的工作交给工具,更专注于实现业务逻辑。

设计稿传代码

后言

创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力


目录
相关文章
|
16天前
|
缓存 Linux 开发者
Avalonia开源控件库强力推荐-Semi.Avalonia
【11月更文挑战第3天】Semi.Avalonia 是一个基于 Avalonia 的开源控件库,提供了丰富的自定义控件和扩展功能。它支持多种样式按钮、高级输入控件和灵活的布局容器,简化了属性设置,并提供了详细的文档支持。Semi.Avalonia 还支持多种内置主题和自定义主题,具备高效的渲染机制和合理的资源管理,适用于跨平台桌面应用程序开发。
|
4天前
|
开发框架 JavaScript 前端开发
MudBlazor:基于Material Design风格开源且强大的Blazor组件库
MudBlazor:基于Material Design风格开源且强大的Blazor组件库
|
3月前
|
小程序 前端开发 API
Ant Design Mini 问题之在微信小程序中,由于不支持slot特性,Ant Design Mini的什么组件功能受到了限制,如何解决
Ant Design Mini 问题之在微信小程序中,由于不支持slot特性,Ant Design Mini的什么组件功能受到了限制,如何解决
|
3月前
|
人工智能 小程序 编译器
Ant Design Mini 问题之Antd Mini 使用小程序函数式组件(functional-mini)来确保组件逻辑适配到双端,如何实现
Ant Design Mini 问题之Antd Mini 使用小程序函数式组件(functional-mini)来确保组件逻辑适配到双端,如何实现
|
3月前
|
开发者
Flutter笔记:Widgets Easier组件库(5)使用加减器
Flutter笔记:Widgets Easier组件库(5)使用加减器
78 2
|
3月前
|
开发者
Flutter笔记:Widgets Easier组件库(12)使用消息吐丝(Notify Toasts)
Flutter笔记:Widgets Easier组件库(12)使用消息吐丝(Notify Toasts)
74 0
|
3月前
|
开发者
Flutter笔记:Widgets Easier组件库 - 使用标签(Tag)
Flutter笔记:Widgets Easier组件库 - 使用标签(Tag)
110 0
|
前端开发
ant design锚点组件
ant design锚点组件
86 0
|
前端开发 数据安全/隐私保护
React高阶组件(Higher-Order Components)及其应用
React高阶组件(Higher-Order Components)及其应用
87 0