Element-React 教程

今天我们来学习下Element-React 教程。 Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。由…

Element 组件内部默认使用中文，若希望使用其他语言，则需要进行多语言设置。以英文为例，在 main.js 中： import { i18n } from element-re…

安装 推荐使用 npm 的方式安装，它能更好地和webpack打包工具配合使用。 npm i element-react –save yarn 安装： $ yarn add el…

Element 组件内部默认使用中文，若希望使用其他语言，则需要进行多语言设置。以英文为例，在 main.js 中： import { i18n } from element-re…

通过基础的 24 分栏，迅速简便地创建布局。 基础布局 使用单一分栏创建基础的栅格布局。 通过 Row 和 Col 组件，并通过 Col 组件的 span 属性我们就可以自由地组合…

Element 为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。 主色 Element 主要品牌颜色是鲜艳、友好的蓝色。 辅助色 除了…

我们对字体进行统一规范，力求在各个操作系统下都有最佳展示效果。 中文字体 英文／数字字体 Font-family 代码 font-family: “Helvetica Neue”,…

提供了一套常用的图标集合。 使用方法 直接通过设置类名为 el-icon-iconName 来使用即可。例如： render() { return ( <div> &l…

常用的操作按钮。 基础用法 基础的按钮用法。Button 组件默认提供7种主题，由type属性来定义，默认为default。 render() { return ( <div…

在一组备选项中进行单选 基础用法 由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。 要使用 Radio 组件，需要设置value绑定变量，可以通过check…

一组备选项中进行多选 基础用法 单独使用可以表示两种状态之间的切换。 简单的 Checkbox，使用checked切换选中状态。 render() { return <Che…

通过鼠标或键盘输入字符 基础用法 render() { return <Input placeholder=”请输入内容” /> } 禁用状态 通过 disabled …

仅允许输入标准的数字值，可定义范围 基础用法 要使用它，只需要在InputNumber元素中使用value绑定变量即可，defaultValue为默认值。 constructor(…

当选项过多时，使用下拉菜单展示并选择内容。 基础用法 适用广泛的基础单选 value的值为当前被选中的Option的 value 属性值 constructor(props) { …

当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。 基础用法 有两种触发子菜单的方式 只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选…

表示两种相互对立的状态间的切换，多用于触发「开/关」。 基本用法 绑定value到一个Boolean类型的变量。可以使用onText属性与offText属性来设置开关的文字描述，使…

通过拖动滑块在一个固定区间内进行选择 基础用法 在拖动滑块时，显示当前值 通过设置绑定值自定义滑块的初始值 constructor(props) { super(props); t…

用于选择或输入日期 固定时间点 提供几个固定的时间点供用户选择 使用 TimeSelect 标签，分别通过star、end和step指定可选的起始时间、结束时间和步长 constr…

用于选择或输入日期 选择日 以「日」为基本单位，基础的日期选择控件 基本单位由type属性指定。快捷选项需配置shortcuts，禁用日期通过 disabledDate 设置，传入…

在同一个选择器里选择日期和时间 日期和时间点 通过设置isShowTime，即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与 Date Picker 相同。 co…