标签: antd

Menu

antd 中的 Menu 组件用于绘制菜单栏,其实现基于 rc-menu。本文第一部分介绍菜单栏实现的整体结构;第二部分介绍 rc-menu;第三部分介绍 Menu 组件。 需要声明的是,本文使用 RcMenu 指代 rc-menu 输出的 Menu 组件或其实例,使用 Menu 指代 antd 输出的 Menu 组件或其实例、或抽象意义的菜单栏组件,余同。 整体结构在视图上,菜单栏分为水平布局和

Radio, Checkbox

antd 中的 Radio, Checkbox 组件均基于 rc-checkbox 实现。本文第一部分将介绍 rc-checkbox,余下两部分再介绍 Radio, Checkbox 组件。 rc-checkboxrc-checkbox 输出 Checkbox 组件。其处理逻辑较为简单,包含样式类转换、多余 props 剔除等。元素层级上,rc-checkbox 使用 span 包裹 input

Grid 栅格

antd 提供的 24 栅格系统由 Row, Col 组件实现。 Row栅格布局组件 Row 用于设定整行 row 内各组 col 的布局风格。当 props.type 为 ‘flex’ 时,意味着整行采用 flex 布局。在 flex 布局的基础上,props.justify 通过 justify-content 样式影响各 col 元素的水平排列方式;props.align 通过 align-

Layout 布局

antd 提供 Layout, Header, Sider, Content, Footer 组件用于划定页面布局。实现上,侧边栏 Sider 组件比较特殊,将在第一部分加以介绍;其余组件均将在第一部分加以介绍。 Layout布局容器 Layout, 顶部布局 Header, 内容部分 Content, 底部布局 Footer 在实现上大体相当:都是通过 generator(props) = Ba

antd-Input 组件

Input 组件Input 组件只关乎布局,其余均为常规处理。props.addonBefore 为前置标签,props.addonAfter 为后置标签,props.prefix 前缀图标,props.suffix 后缀图标。参看官方图例: Input 组件在 render 方法执行阶段将绘制出 input 原生组件。鉴于 react 的实现机制,对于 input 原生组件的处理,有受控组件和

antd-Form 组件

ant design 中的 Form 组件基于 rc-form 实现。本文第一部分将介绍 rc-form 库;第二部分再介绍 ant design 中的 Form 组件。 rc-form常规收集表单数据并作校验,只需以 store 实时记录表单数据,校验后重绘表单。这样的思路以业务代码为例,就是,以数据模型 model 集成数据处理操作,再通过 setState 将 model 中的实时数据注入组