SEMI DESIGN 源码学习(一)按钮

471 阅读1分钟

DouyinFE/semi-design

按钮代码位于 packages/semi-ui/button 文件夹,Button.tsx, buttonGroup.tsx, spiltButton.tsx 是组件文件。

image.png

Button.tsx 文件包含按钮的 ButtonProps 接口以及 Button 组件本身,static defaultProps 是默认属性,static propTypes 是属性类型。

组件 render 方法首先从 props 里获取用户传入的参数,然后声明一个 baseProps 常量用来合并按钮属性值,最后返回一个 HTML button 标签。

buttonGroup.tsx 是按钮组合文件,其核心方法是 getInnerWithLine,用来生成内部组件,判断是否需要添加分割线。

按钮组件的样式位于 packages/semi-foundation/button/button.scss

image.png

其中 $prefixpackages/semi-theme-default/scss/variables.scss 文件定义

image.png