earsyUI

1/24/2020

# Preview

:::: el-tabs
::: el-tab-pane label=markdown
* vue
  * vue-cli
  * nuxt
  * vuepress
* react
  * create-react-app
  * nest
:::
::: el-tab-pane label=javascript
``` javascript
() => {
  console.log('Javascript code example')
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

::: ::::


:::: el-tabs
::: el-tab-pane label=markdown
* vue
  * vue-cli
  * nuxt
  * vuepress
* react
  * create-react-app
  * nest
:::
::: el-tab-pane label=javascript
``` javascript
() => {
  console.log('Javascript code example')
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# ::: ::::

# el-collapses

:::: el-collapse
::: el-collapse-item title="一致性 Consistency"
与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;
在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。
:::
::: el-collapse-item title="反馈 Feedback"
控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作;
页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。
:::
::: el-collapse-item title="效率 Efficiency"
简化流程:设计简洁直观的操作流程;
清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;
帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。
:::
::: el-collapse-item title="可控 Controllability"
用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;
结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。
:::
::::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

:::: el-collapse ::: el-collapse-item title="一致性 Consistency" 与现实生活一致:与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念; 在界面中一致:所有的元素和结构需保持一致,比如:设计样式、图标和文本、元素的位置等。 ::: ::: el-collapse-item title="反馈 Feedback" 控制反馈:通过界面样式和交互动效让用户可以清晰的感知自己的操作; 页面反馈:操作后,通过页面元素的变化清晰地展现当前状态。 ::: ::: el-collapse-item title="效率 Efficiency" 简化流程:设计简洁直观的操作流程; 清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策; 帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。 ::: ::: el-collapse-item title="可控 Controllability" 用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策; 结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操作等。 ::: ::::


# el-steps

:::: el-steps
::: el-step title="步骤 11" icon="el-icon-edit"
:::
::: el-step title="步骤 2" icon="el-icon-upload"
:::
::: el-step title="步骤 3" icon="el-icon-picture"
:::
::::
1
2
3
4
5
6
7
8

# :::: el-steps ::: el-step title="步骤 11" icon="el-icon-edit" ::: ::: el-step title="步骤 2" icon="el-icon-upload" ::: ::: el-step title="步骤 3" icon="el-icon-picture" ::: ::::

# All Componenets

'el-collapse-transition', 'el-pagination',      'el-dialog',
  'el-autocomplete',        'el-dropdown',        'el-dropdown-menu',
  'el-dropdown-item',       'el-menu',            'el-submenu',
  'el-menu-item',           'el-menu-item-group', 'el-input',
  'el-input-number',        'el-radio',           'el-radio-group',
  'el-radio-button',        'el-checkbox',        'el-checkbox-button',
  'el-checkbox-group',      'el-switch',          'el-select',
  'el-option',              'el-option-group',    'el-button',
  'el-button-group',        'el-table',           'el-table-column',
  'el-date-picker',         'el-time-select',     'el-time-picker',
  'el-popover',             'el-tooltip',         'el-breadcrumb',
  'el-breadcrumb-item',     'el-form',            'el-form-item',
  'el-tabs',                'el-tab-pane',        'el-tag',
  'el-tree',                'el-alert',           'el-slider',
  'el-icon',                'el-row',             'el-col',
  'el-upload',              'el-progress',        'el-spinner',
  'el-badge',               'el-card',            'el-rate',
  'el-steps',               'el-step',            'el-carousel',
  'el-scrollbar',           'el-carousel-item',   'el-collapse',
  'el-collapse-item',       'el-cascader',        'el-color-picker',
  'el-transfer',            'el-container',       'el-header',
  'el-aside',               'el-main',            'el-footer',
  'el-timeline',            'el-timeline-item',   'el-link',
  'el-divider',             'el-image',           'el-calendar',
  'el-backtop',             'el-page-header',     'el-cascader-panel',
  'el-avatar',              'el-drawer',          'el-popconfirm'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# element tag

<el-tag>标签一</el-tag>
<el-tag type="success">标签二</el-tag>
<el-tag type="info">标签三</el-tag>
<el-tag type="warning">标签四</el-tag>
<el-tag type="danger">标签五</el-tag>
1
2
3
4
5
标签一 标签二 标签三 标签四 标签五
Last Updated: 11/26/2022, 9:22:37 PM