Element-React 教程

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

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

用于颜色选择，支持多种格式。 基础用法 通过value属性控制当前显示的颜色。 render() { const color1 = #20a0ff; const color2 = …

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

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

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。 基础表格 基础的表格展示用法。 当Table元素中注入data和columns 对象数组后，在colum…

用于标记和选择。 基础用法 由type属性来选择tag的类型，也可以通过color属性来自定义背景色。 render() { return ( <div> <Ta…

用于展示操作进度，告知用户当前状态和预期。 线形进度条 — 百分比外显 Progress 组件设置percentage属性即可，表示进度条对应的百分比，必填，必须在 0-100。 …

用清晰的层级结构展示信息，可展开或折叠。 基础用法 基础的树形结构展示。 constructor(props) { super(props); this.state = { dat…

当数据量过多时，使用分页分解数据。 基础用法 设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。prev表示上一页，next为上一页，pager表示页码列表，除…

出现在按钮、图标旁的数字或状态标记。 基础用法 展示新消息数量。 定义value属性，它接受Number或者String。 render() { return ( <div&…

用于页面中展示重要的提示信息。 基本用法 页面中的非浮层元素，不会自动消失。 Alert 组件提供四种主题，由type属性指定，默认值为info。 render() { retur…

加载数据时显示动效。 区域加载 在表格等容器中加载数据时显示。 constructor(props) { super(props); this.table = { columns:…

常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。 基础用法 从顶部出现，3 秒后自动消失。 Message 在配置上与 Noti…

模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、成功提示、错误提示、询问信息。 消息提示 当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。…

悬浮出现在页面右上角，显示全局的通知提醒消息。 基本用法 适用性广泛的通知栏 Notification 组件提供通知功能，Element 注册了Notification方法，接收一…

为网站提供导航功能的菜单。 顶栏 适用广泛的基础用法。 render() { return ( <div> <Menu theme=”dark” defaultA…

分隔内容上有关联但属于不同类别的数据集合。 基础用法 基础的、简洁的标签页。 Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 value 属性来指定当前选中的标…

显示当前页面的路径，快速返回之前的任意页面。 基础用法 适用广泛的基础用法。 在Breadcrumb中使用Breadcrumb.Item标签表示从首页开始的每一级。Element …

将动作或菜单折叠到下拉菜单中。 基础用法 移动到下拉菜单上，展开更多操作。 显示下拉菜单，默认情况下，下拉按钮只要hover即可，无需点击。 render() { return (…