色彩搭配

一、思考Button存在的类型

1、默认状态
2、一般状态
3、警告状态
4、危险状态
5、成功状态
复制代码

二、根据类型选择对应的颜色

这里的颜色可以参考antd，链接如下：https://ant.design/docs/spec/colors-cn
1、默认：淡灰色
2、一般：淡蓝色或者蓝色
3、警告：橘色
4、危险：红色
5、成功：绿色
复制代码

样式编写要点

一、Button存在的形态

1、以Button的形式存在
2、以a标签的形式存在
复制代码

二、存在形态的共同设置点

• 大小

  1、正常大小
  2、比较小
  3、非常小
  4、比较大
  5、非常大
  复制代码

• 类型

  1、默认
  2、一般
  3、警告
  4、危险
  5、成功
  复制代码

• 是否禁用标签

  1、可以
  2、不可以
  复制代码

三、存在形态的不同点

• 禁用标签的写法

  1、Button直接在属性上面添加disabled即可
  2、a 标签需要在自定义disbaled的样式
  复制代码

• 默认点击事件

  1、Button标签的默认事件是提交
  2、a标签的默认事件是跳转到页面详情页
  复制代码

四、其他相关样式注意点：

 1、字体大小
 2、字体粗细
 3、hover、focus样式
 4、背景图片禁止设置
 5、鼠标光标
 6、边框属性
复制代码

事件&属性处理要点

一、不需手写罗列全部的事件和属性

不需要自己把事件和属性全部写出来，button和a标签的原生属性与事件高达200+，手写的话没有什么意义。
react提供了专门的api可以访问到原生的button以及a标签的所有属性与事件
button：ButtonHTMLAttributes<HTMLElement>
a: AnchorHTMLAttributes<HTMLElement>
复制代码

二、结合本地和原生

如果前面你自定义了button的属性与部分样式，那么将其全部结合起来使用。
此时：假设你本地的属性命名为IProps:(这里展示ts写法)
&：是ts的联合声明，将本地和原生的结合起来，取其并集，链接：https://www.tslang.cn/docs/handbook/advanced-types.html
Partial(修饰符)：将定义的接口变成可选的
type BottonNativeProps = IProp & ButtonHTMLAttributes<HTMLElement>
type BottonAnchorProps = IProp & AnchorHTMLAttributes<HTMLElement>
export type ButtonProps = Partial<BottonNativeProps & BottonAnchorProps>
复制代码

部分源码

声明：本人实现该技术的架构是TS+ React+SCSS。
样式代码：这里我将公共样式都抽离出来了，如果单单只写button部分就不用抽离出来。
https://github.com/verybeautyTang/design/tree/master
我只是写了一个逻辑以及不那么完美的样式，会慢慢完善！
复制代码