Element-React 教程

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

通过点击或者拖拽上传文件 点击上传 通过 tip属性 你可以传入自定义的上传按钮类型和文字提示。 render() { const fileList = [ {name: food…

评分组件 基本用法 评分被分为三个等级，可以利用颜色对分数及情感倾向进行分级（默认情况下不区分颜色）。三个等级所对应的颜色用过colors属性设置，而它们对应的两个阈值则通过 lo…

基础用法 Transfer 的数据通过 data 属性传入。数据需要是一个对象数组，每个对象有以下属性：key 为数据的唯一性标识，label 为显示文本，disabled 表示该…

由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据 典型表单 包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。 在 Form 组件中，每一个表单域由一…