初探ant-design(web版本)

第一步安装ant-design插件
初探ant-design(web版本)
第二步查看项目目录
初探ant-design(web版本)
第三步运行项目
初探ant-design(web版本)
初探ant-design(web版本)
我们查看index.js文件
这个其实是Datepicker组件的展示效果
初探ant-design(web版本)
第四步我们按照下面的代码代替Index.js中的内容
我们用到了两个组件,一个是Message.info,一个是Datepicker
初探ant-design(web版本)
查看效果图
初探ant-design(web版本)
Message.info还可以写上消失的时间,比如50ms
Message.info(“点击成功”,50)
react中的setState就是一个很大的状态机,我们很多的数据都会在state中声明出来,通过setState进行存储状态。
从我阅读官网来看,我发现这种方式使用ant其实是不能够修改主题色的,所以其实这种方式使用ant-design其实是很少的。
接下来我们就按照这种方式去将所有的react组件在我们的demo
button组件
按钮类型
按钮有四种类型:主按钮、次按钮、虚线按钮、危险按钮。主按钮在同一个操作区域最多出现一次。
初探ant-design(web版本)
图标按钮
当需要在 Button 内嵌入 Icon 时,可以设置 icon 属性,或者直接在 Button 内使用 Icon 组件。
如果想控制 Icon 具体的位置,只能直接使用 Icon 组件,而非 icon 属性。
初探ant-design(web版本)
按钮尺寸
按钮有大、中、小三种尺寸。
通过设置 size 为 large small 分别把按钮设为大、小尺寸。若不设置 size,则尺寸为中。
初探ant-design(web版本)
不可用状态
添加 disabled 属性即可让按钮处于不可用状态,同时按钮样式也会改变。
初探ant-design(web版本)
加载中状态
添加 loading 属性即可让按钮处于加载状态,最后两个按钮演示点击后进入加载状态。
初探ant-design(web版本)
多个按钮组合
按钮组合使用时,推荐使用1个主操作 + n 个次操作,3个以上操作时把更多操作放到 Dropdown.Button 中组合使用
没有实现效果
初探ant-design(web版本)
按钮组合
可以将多个 Button 放入 Button.Group 的容器中。
通过设置 size 为 large small 分别把按钮组合设为大、小尺寸。若不设置 size,则尺寸为中。
初探ant-design(web版本)
初探ant-design(web版本)
幽灵按钮
幽灵按钮将其他按钮的内容反色,背景变为透明,常用在有色背景上。
初探ant-design(web版本)
官网很赞,直接复制内容即可
初探ant-design(web版本)
layout
其实同bootstrap类似
总份数24份,选择你需要的份数大小进行分配即可
基础栅格
从堆叠到水平排列。
使用单一的一组 Row 和 Col 栅格组件,就可以创建一个基本的栅格系统,所有列(Col)必须放在 Row 内。
初探ant-design(web版本)
区块间隔
栅格常常需要和间隔进行配合,你可以使用 Row 的 gutter 属性,我们推荐使用 (16+8n)px 作为栅格间隔。
初探ant-design(web版本)
左右偏移
列偏移。
使用 offset 可以将列向右侧偏。例如,offset={4} 将元素向右侧偏移了 4 个列(column)的宽度。
初探ant-design(web版本)
栅格排序
列排序。
通过使用 push 和 pull 类就可以很容易的改变列(column)的顺序。
初探ant-design(web版本)
Flex 布局
Flex 布局基础。
使用 row-flex 定义 flex 布局,其子元素根据不同的值 start,center,end,space-between,space-around,分别定义其在父节点里面的排版方式。
初探ant-design(web版本)
初探ant-design(web版本)
初探ant-design(web版本)
初探ant-design(web版本)
初探ant-design(web版本)
Flex 对齐
Flex 子元素垂直对齐。
demo我没有还原

Flex 排序
通过 Flex 布局的 Order 来改变元素的排序。
初探ant-design(web版本)
响应式布局
参照 Bootstrap 的 响应式设计,预设五个响应尺寸:xs sm md lg xl。
初探ant-design(web版本)
栅格配置器
可以简单配置几种等分栅格和间距
基本结构
典型的页面布局。
初探ant-design(web版本)
初探ant-design(web版本)
初探ant-design(web版本)
关于tab切换页
Tabs标签页,在tabpane上面改变的其实是里面的内容哟

初探ant-design(web版本)
初探ant-design(web版本)
初探ant-design(web版本)

关于禁用某一项,直接使用disabled即可
初探ant-design(web版本)
图标
有图标的标签。
初探ant-design(web版本)
滑动
可以左右滑动,容纳更多标签。
代码很简单很朴素哟
初探ant-design(web版本)
初探ant-design(web版本)
初探ant-design(web版本)
切换页改变方向的动态tabs切换页
初探ant-design(web版本)
初探ant-design(web版本)
卡片式的
初探ant-design(web版本)
Affix固钉
初次见到这个我还挺惊讶的,不知道这个怎么用,不过直接上demo的话,我感觉就很形象了
初探ant-design(web版本)
初探ant-design(web版本)
固定状态改变的回调
可以获得是否固定的状态。
初探ant-design(web版本)
滚动容器
用 target 设置 Affix 需要监听其滚动事件的元素,默认为 window。
初探ant-design(web版本)
初探ant-design(web版本)
Breadcrumb面包屑
基本
最简单的用法。
初探ant-design(web版本)
带有图标的
图标放在文字前面。
初探ant-design(web版本)
未完待续。。。

上一篇:程序中使用事务来管理sql语句的执行,执行失败时,可以达到回滚的要求。


下一篇:MySQL编码问题(无法插入中文)