ReactWheels11-02form组件

Input组件

input.tsx

  • Props 继承 InputHTMLAttributes
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import * as React from "react";
import {InputHTMLAttributes} from "react";
import classes from "../helpers/classes";
import './input.scss';

interface Props extends InputHTMLAttributes<HTMLInputElement>{
    
}

const Input: React.FunctionComponent<Props> = (props) => {
    const {className , ...rest} = props
    return (
        <input className={classes('fui-input', className)} type="text" {...rest}/>
    )
}

export default Input;

input.scss

  • 实现 类似 ant-design 的 border过渡效果
  • 不要上来就写 width/height 绝对有bug
1
2
3
4
5
6
7
8
9
10
11
12
13
14
@import "../helper";
.fui-input{
  border:1px solid #ddd;
  line-height: 22px;
  padding:4px 8px;
  border-radius: 4px;
  box-shadow: 0 0 0 2px fade_out($main-color,1);
  transition: box-shadow 1s;
  &:focus{
    outline: none;
    border-color: $main-color;
    box-shadow: 0 0 0 2px fade_out($main-color,0.5);
  }
}

如何让form表单不写样式就对齐呢？

table布局
table布局
table布局

它虽然渲染速度慢，但是它会自动计算宽度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table>
    <tr>
        <td>用户名</td>
        <td>aaa</td>
    </tr>
    <tr>
        <td>用户名xxxxxxxxx</td>
        <td>aaa</td>
    </tr>
</table>

// table 会把整个列宽都算一遍 
// 找到最大宽度的 td 以它的宽度去渲染td 对应 column
// 所以才会慢

只有中国人才需要的字段对齐

实现任意长度的两端字对齐

1
2
3
4
用  户  名
密      码

// 这个只有中国人才会这样

table 的td

  • 不接受 margin
  • 接受 padding

button

button.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import * as React from "react";
import {ButtonHTMLAttributes} from "react";
import classes from "../helpers/classes";
import './button.scss';

interface Props extends ButtonHTMLAttributes<HTMLButtonElement>{
    level?: 'important' | 'danger' | 'normal'
}

const Button: React.FunctionComponent<Props> = (props) => {
    const {className ,children,level, ...rest} = props
    return (
        <button
            className={classes('fui-button',`fui-button-${level}`,className)}
            {...rest}>
            {children}
        </button>
    )
}

Button.defaultProps = {
    level: 'normal'
}

export default Button;

button.scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
@import "../helper";

.fui-button{
  padding:4px 16px;
  line-height: 22px;
  transition: all 250ms;
  cursor:pointer;
  &:focus{
    outline: none;
  }

  &-normal{
    color: #333;
    border:1px solid lighten(#333,50%);
    background: white;
    &:hover , &:focus{
      border-color: $main-color;
      color:$main-color;
    }
  }
  &-important{
    color: white;
    border:1px solid $main-color;
    background: $main-color;
    &:hover , &:focus{
      background: lighten($main-color,10%);
      border-color: lighten($main-color,10%);
    }
  }
}