mirror of
https://github.com/tachiyomiorg/website.git
synced 2025-01-03 14:01:55 +01:00
190 lines
6.7 KiB
Markdown
190 lines
6.7 KiB
Markdown
|
---
|
||
|
|
title: Element-UI
|
||
|
|
description: Demonstrations of different Element-UI features.
|
||
|
|
lang: en-US
|
||
|
|
sitemap:
|
||
|
|
exclude: true
|
||
|
|
---
|
||
|
|
|
||
|
|
# Element-UI
|
||
|
|
View more by pressing the headers for the specified item.
|
||
|
|
|
||
|
|
## [Button](https://element.eleme.io/#/en-US/component/button)
|
||
|
|
<el-row>
|
||
|
|
<el-button plain>Plain</el-button>
|
||
|
|
<el-button type="primary" plain>Primary</el-button>
|
||
|
|
<el-button type="success" plain>Success</el-button>
|
||
|
|
<el-button type="info" plain>Info</el-button>
|
||
|
|
<el-button type="warning" plain>Warning</el-button>
|
||
|
|
<el-button type="danger" plain>Danger</el-button>
|
||
|
|
</el-row>
|
||
|
|
|
||
|
|
```html
|
||
|
|
<el-row>
|
||
|
|
<el-button plain>Plain</el-button>
|
||
|
|
<el-button type="primary" plain>Primary</el-button>
|
||
|
|
<el-button type="success" plain>Success</el-button>
|
||
|
|
<el-button type="info" plain>Info</el-button>
|
||
|
|
<el-button type="warning" plain>Warning</el-button>
|
||
|
|
<el-button type="danger" plain>Danger</el-button>
|
||
|
|
</el-row>
|
||
|
|
```
|
||
|
|
|
||
|
|
## [Link](https://element.eleme.io/#/en-US/component/link)
|
||
|
|
<div>
|
||
|
|
<el-link href="/sandbox/" target="_blank">default</el-link>
|
||
|
|
<el-link href="/download/" type="primary">primary</el-link>
|
||
|
|
<el-link type="success">success</el-link>
|
||
|
|
<el-link type="warning">warning</el-link>
|
||
|
|
<el-link type="danger">danger</el-link>
|
||
|
|
<el-link type="info">info</el-link>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
```html
|
||
|
|
<div>
|
||
|
|
<el-link href="/sandbox/" target="_blank">default</el-link>
|
||
|
|
<el-link href="/download/" type="primary">primary</el-link>
|
||
|
|
<el-link type="success">success</el-link>
|
||
|
|
<el-link type="warning">warning</el-link>
|
||
|
|
<el-link type="danger">danger</el-link>
|
||
|
|
<el-link type="info">info</el-link>
|
||
|
|
</div>
|
||
|
|
```
|
||
|
|
|
||
|
|
## [Tag](https://element.eleme.io/#/en-US/component/tag)
|
||
|
|
<el-tag>Neutral</el-tag>
|
||
|
|
<el-tag type="success">Success</el-tag>
|
||
|
|
<el-tag type="info">Info</el-tag>
|
||
|
|
<el-tag type="warning">Warning</el-tag>
|
||
|
|
<el-tag type="danger">Danger</el-tag>
|
||
|
|
|
||
|
|
```html
|
||
|
|
<el-tag>Neutral</el-tag>
|
||
|
|
<el-tag type="success">Success</el-tag>
|
||
|
|
<el-tag type="info">Info</el-tag>
|
||
|
|
<el-tag type="warning">Warning</el-tag>
|
||
|
|
<el-tag type="danger">Danger</el-tag>
|
||
|
|
```
|
||
|
|
|
||
|
|
## [Alert](https://element.eleme.io/#/en-US/component/alert)
|
||
|
|
<el-alert type="success" title="Success alert!" :closable="false"></el-alert>
|
||
|
|
<el-alert type="info" title="Info alert!" :closable="false"></el-alert>
|
||
|
|
<el-alert type="warning" title="Warning alert!" :closable="false"></el-alert>
|
||
|
|
<el-alert type="error" title="Error alert!" :closable="false"></el-alert>
|
||
|
|
<el-alert type="success" title="Success alert!" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." show-icon :closable="false"></el-alert>
|
||
|
|
<el-alert type="info" title="Info alert!" description="Magna fringilla urna porttitor rhoncus dolor purus non." show-icon :closable="false"></el-alert>
|
||
|
|
<el-alert type="warning" title="Warning alert!" description="Non consectetur a erat nam at." show-icon :closable="false"></el-alert>
|
||
|
|
<el-alert type="error" title="Error alert!" description="Pellentesque habitant morbi tristique senectus et netus." show-icon :closable="false"></el-alert>
|
||
|
|
|
||
|
|
```html
|
||
|
|
<el-alert type="success" title="Success alert!" :closable="false"></el-alert>
|
||
|
|
<el-alert type="info" title="Info alert!" :closable="false"></el-alert>
|
||
|
|
<el-alert type="warning" title="Warning alert!" :closable="false"></el-alert>
|
||
|
|
<el-alert type="error" title="Error alert!" :closable="false"></el-alert>
|
||
|
|
<el-alert type="success" title="Success alert!" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." show-icon :closable="false"></el-alert>
|
||
|
|
<el-alert type="info" title="Info alert!" description="Magna fringilla urna porttitor rhoncus dolor purus non." show-icon :closable="false"></el-alert>
|
||
|
|
<el-alert type="warning" title="Warning alert!" description="Non consectetur a erat nam at." show-icon :closable="false"></el-alert>
|
||
|
|
<el-alert type="error" title="Error alert!" description="Pellentesque habitant morbi tristique senectus et netus." show-icon :closable="false"></el-alert>
|
||
|
|
```
|
||
|
|
|
||
|
|
## [Tabs](https://element.eleme.io/#/en-US/component/tabs)
|
||
|
|
:::: el-tabs
|
||
|
|
::: el-tab-pane label="Lorem ipsum"
|
||
|
|
**Lorem ipsum** dolor sit amet, _consectetur_ adipiscing **elit**.
|
||
|
|
:::
|
||
|
|
::: el-tab-pane label="Pellentesque"
|
||
|
|
**Pellentesque** _habitant_ morbi tristique **senectus** et netus.
|
||
|
|
:::
|
||
|
|
::::
|
||
|
|
|
||
|
|
```
|
||
|
|
:::: el-tabs
|
||
|
|
::: el-tab-pane label="Lorem ipsum"
|
||
|
|
**Lorem ipsum** dolor sit amet, _consectetur_ adipiscing **elit**.
|
||
|
|
:::
|
||
|
|
::: el-tab-pane label="Pellentesque"
|
||
|
|
**Pellentesque** _habitant_ morbi tristique **senectus** et netus.
|
||
|
|
:::
|
||
|
|
::::
|
||
|
|
```
|
||
|
|
|
||
|
|
## [Collapse](https://element.eleme.io/#/en-US/component/collapse)
|
||
|
|
:::: el-collapse
|
||
|
|
::: el-collapse-item title="Lorem ipsum"
|
||
|
|
**Lorem ipsum** dolor sit amet, _consectetur_ adipiscing **elit**.
|
||
|
|
:::
|
||
|
|
::: el-collapse-item title="Pellentesque"
|
||
|
|
**Pellentesque** _habitant_ morbi tristique **senectus** et netus.
|
||
|
|
:::
|
||
|
|
::::
|
||
|
|
|
||
|
|
```
|
||
|
|
:::: el-collapse
|
||
|
|
::: el-collapse-item title="Lorem ipsum"
|
||
|
|
**Lorem ipsum** dolor sit amet, _consectetur_ adipiscing **elit**.
|
||
|
|
:::
|
||
|
|
::: el-collapse-item title="Pellentesque"
|
||
|
|
**Pellentesque** _habitant_ morbi tristique **senectus** et netus.
|
||
|
|
:::
|
||
|
|
::::
|
||
|
|
```
|
||
|
|
|
||
|
|
## [Tooltip](https://element.eleme.io/#/en-US/component/tooltip)
|
||
|
|
### Text
|
||
|
|
<el-tooltip placement="top">
|
||
|
|
<div slot="content">First line<br/>Second line</div>
|
||
|
|
<span>Try hovering me!</span>
|
||
|
|
</el-tooltip>
|
||
|
|
|
||
|
|
```html
|
||
|
|
<el-tooltip placement="top">
|
||
|
|
<div slot="content">First line<br/>Second line</div>
|
||
|
|
<span>Try hovering me!</span>
|
||
|
|
</el-tooltip>
|
||
|
|
```
|
||
|
|
|
||
|
|
### Button
|
||
|
|
<el-tooltip placement="top">
|
||
|
|
<div slot="content">First line<br/>Second line</div>
|
||
|
|
<el-button type="primary" plain>Hover me!</el-button>
|
||
|
|
</el-tooltip>
|
||
|
|
|
||
|
|
```html
|
||
|
|
<el-tooltip placement="top">
|
||
|
|
<div slot="content">First line<br/>Second line</div>
|
||
|
|
<el-button type="primary" plain>Hover me!</el-button>
|
||
|
|
</el-tooltip>
|
||
|
|
```
|
||
|
|
|
||
|
|
## [Steps](https://element.eleme.io/#/en-US/component/steps)
|
||
|
|
|
||
|
|
### Step bar with icon
|
||
|
|
<el-steps :active="1">
|
||
|
|
<el-step title="Step 1" icon="el-icon-edit"></el-step>
|
||
|
|
<el-step title="Step 2" icon="el-icon-upload"></el-step>
|
||
|
|
<el-step title="Step 3" icon="el-icon-picture"></el-step>
|
||
|
|
</el-steps>
|
||
|
|
|
||
|
|
```html
|
||
|
|
<el-steps :active="1">
|
||
|
|
<el-step title="Step 1" icon="el-icon-edit"></el-step>
|
||
|
|
<el-step title="Step 2" icon="el-icon-upload"></el-step>
|
||
|
|
<el-step title="Step 3" icon="el-icon-picture"></el-step>
|
||
|
|
</el-steps>
|
||
|
|
```
|
||
|
|
|
||
|
|
### Step bar with description
|
||
|
|
<el-steps :active="2" finish-status="success">
|
||
|
|
<el-step title="Step 1" description="First you do this"></el-step>
|
||
|
|
<el-step title="Step 2" description="Then you do this"></el-step>
|
||
|
|
<el-step title="Step 3" description="Then you do that"></el-step>
|
||
|
|
</el-steps>
|
||
|
|
|
||
|
|
```html
|
||
|
|
<el-steps :active="2" finish-status="success">
|
||
|
|
<el-step title="Step 1" description="Some description"></el-step>
|
||
|
|
<el-step title="Step 2" description="Some description"></el-step>
|
||
|
|
<el-step title="Step 3" description="Some description"></el-step>
|
||
|
|
</el-steps>
|
||
|
|
```
|