Y Lei'S Blog

Ant-design

2019-6-2 React Ant-design

Ant-design

button

按钮 可以通过 1type 2 shape 3 size 4 loading 5 disabled 来影响其样式状态 官方推荐从前到后来设置

type 属性

可以通过 primary danger default dashed link 来设置 主要 危险 默认 虚线 连接 按钮

shape 按钮形状

circle（圆形） round（椭圆） 或者不设置 按钮形状

size 属性

large small 和不设置（中）

其他的属性

disabled 按钮失效状态 可以接受 boolean 默认位 false

ghost 幽灵按钮 呈现背景颜色 boolean false

href 跳转连接地址 target href 存在时生效

loading 设置其加载状态 也可以设置延时开始显示转圈圈 {delay：毫秒}

block 宽度位父容器宽度

htmlType 原生 button 的 type 属性

icon 属性 可以加一个图标 默认图标在按钮的左边

按钮组

Button.Group 组件

回调函数

onClick 来执行

Icon

Icon 组件 或者 在元素上直接写 icon=“” 来引入 icon 图标

theme 'filled' 填充| 'outlined'边线风格 | 'twoTone'双色

spin 旋转动画 boolean

rotate 图标呈现出来旋转角度

twoToneColor 仅适用双色图标 设置双色图标的主要颜色

利用 icon 的 component 自己封装图标组件

const HeartSvg = () => (
  <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
    <path d="z" />
  </svg>
)
const HeartIcon = props => <Icon component={HeartSvg} {...props} />
;<PandaIcon style={{ fontSize: '32px' }} />
//即可使用
1
2
3
4
5
6
7
8

双色组件可以使用方法

Icon.setTwoToneColor('#eb2f96')
设置颜色
Icon.getTwoToneColor() // #eb2f96
1
2
3

创建自定义图标

const MyIcon = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成
});
//或者通过svg生成
webpack 中
{
  test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
  use: [
    {
      loader: 'babel-loader',
    },
    {
      loader: '@svgr/webpack',
      options: {
        babel: false,
        icon: true,
      },
    },
  ],
}
  icon 中 component={引入svg图标文件即可}
    intro tro duction
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Typography

引入方式

const {Title,Paragraph,Text} = Typography

文本呈现样式编辑

delete 删除先

disabled 禁用文本

mark 标记样式

underline 下划线

strong 加粗

文本类型

type secondary, warning, danger

文本 编辑属性

ellipsis 设置自动溢出省略

ellipsis={{ rows: 3, expandable: true ,onExpand: this.onExpand }}
onExpand 当点击 展开按钮的时候触发  可用于向后台发送请求
//或者
ellipsis={true}
1
2
3
4

editable 可编辑

state={
    text:"antd"
}
onchange=str=>{
    this.setState(
    text:str
    )
}
<Paragraph mark editable={{
      editing：true,
      onStart: this.onStart  //点解编辑按钮的时候触发
       onChange: this.onChange,//更改内容的时候触发  接受一个string类型的字符串
 }}>{this.state.text}
</Paragraph>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

copyable 可复制

 copyable={{ text: '111212', onCopy: this.onCopy }}
 text 点击copy 按钮的时候返回的字符串
  onCopy = () => { //点击copy 按钮的时候触发
    console.log('onCopy')
  }
1
2
3
4
5

栅格

通过 和 组件

import { Row, Col } from 'antd'
1

响应式布局

  <Col xs={2} sm={4} md={6} lg={8} xl={10} xxl={14}> 可以右6中响应尺寸
 <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}> 可以把span pull push offset order 属性内嵌到响应属性内部使用
1
2

列间隔

//通过gutter 来实现
 <Row gutter={16}> //{ xs: 8, sm: 16, md: 24, lg: 32 }   支持响应式
1
2

列偏移

 <Col span={6} offset={6}> //支持响应式 { xs: 8, sm: 16, md: 24, lg: 32 }
1

栅格排序

<Col span={18} push={6}> 向右推
 <Col span={6} pull={18}> 向左推
1
2

Flex 布局

<Row type="flex" justify="start"> 左对齐
<Row type="flex" justify="center">中间对齐
<Row type="flex" justify="end">右对齐
<Row type="flex" justify="space-between">两边到中间平均分散
<Row type="flex" justify="space-around">中间平均分散
<Row type="flex" justify="center" align="top"> 垂直顶端对齐 水平方向中间对齐
<Row type="flex" justify="space-around" align="middle"> 垂直方向按照中间对齐水平方向中间平均分散
<Row type="flex" justify="space-between" align="bottom"> 垂直方向底部对齐 水平方向 中间分散对齐

  <Row type="flex"> row 为 flex 布局 子元素可以通过order 来改变 布局位置 也就是布局顺序
      <Col span={6} order={4}>
1
2
3
4
5
6
7
8
9
10
11

分为 24 格 如何超过 24 会另起一行

支持 flex 布局 支持 order 阻止排列顺序

图钉

属性

target 图钉监控盒子滚动 默认监控的是 window 的滚动

<div style={{width:"400px",height:"300px"}}>
    <div style={{width:"398px",height:800px}} ref={node=>{this.container=node}}>
        hello world?
        </div>
    </div>
<Affix target={（）=>this.container}
            onChange={affixed=>{console.log(affixed)//true 或者false
				}}
            >
    <Button type=“primary”>
    跟随父盒子滚动而监听固定图钉
    </Button>
    </Affix>
1
2
3
4
5
6
7
8
9
10
11
12
13

offsetBottom ={距离底部固定距离}

offsetTop ={20} 距离上部多少距离的地方 固定主

onChange =affixed=>{console.log(affixed)//true 或 false}

注意：把Affix 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 Affix 为绝对定位

面包屑导航

属性

Breadcrumb

参数 说明 类型 默认值
itemRender 自定义链接函数，和 react-router 配置使用 (route, params, routes, paths) => ReactNode -
params 路由的参数 object -
routes router 的路由栈信息 [routes] -
separator z 自定义分隔符 string|ReactNode '/'

Breadcrumb.Item

参数 参数 类型 默认值
href 链接的目的地 string 不常用 最好是包裹 Link -
separator 自定义的分隔符 string|ReactNode 可以是组件 '/'
overlay 下拉菜单的内容 Menu | () => Menu Menu 组件 -
onClick 单击事件 (e:MouseEvent)=>void -