Element-React 教程

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

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

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

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

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

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

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

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

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

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

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

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

引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。 基础用法 简单的步骤条。 设置active属性，接受一个Number，表明步骤的 inde…

在保留当前页面状态的情况下，告知用户并承载相关操作。 基本用法 Dialog 弹出一个对话框，适合需要定制性更大的场景。 需要设置visible属性，它接收Boolean，当为tr…

基础用法 Popover 的属性与 Tooltip 很类似，它们都是基于Popper.js开发的，因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。 tri…

将信息聚合在卡片容器中展示。 基础用法 包含标题，内容和操作。 Card 组件包括header和body部分，header部分需要有显式具名 slot 分发，同时也是可选的。 re…

在有限空间内，循环播放同一类型的图片、文字等内容 基础用法 适用广泛的基础用法 结合使用Carousel和Carousel.Item标签就得到了一个走马灯。幻灯片的内容是任意的，需…

可同时展开多个面板，面板之间不影响 render() { const activeName = “1”; return ( <Collapse value={activeNa…