Mirrors/tachiyomi-website
2
0
Fork 0
mirror of https://github.com/tachiyomiorg/website.git synced 2024-12-22 16:11:57 +01:00
Code Issues Packages Projects Releases Wiki Activity
ab0102972c
tachiyomi-website/src/sandbox/element-ui.md
Soitora ce39645a58 Update dependencies and lint for errors (#426) 
* Update dependencies

* Update eslint-config-vuepress and fix warnings

* Linting

* Save webpack locally

Netlify gave an error for not having it but it wasn't needed before.

* Downgrade webpack

Some users have experienced the Netlify error when upgrading to recently released version 5, so downgrading to latest 4 release.

* Set 'htmlWhitespaceSensitivity' to 'ignore'
2020-10-27 18:35:33 +01:00

7.1 KiB
Raw Blame History

title description lang sitemap
Element-UI Demonstrations of different Element-UI features. en-US
exclude
true

Element-UI

View more by pressing the headers for the specified item.

Button

Plain Primary Success Info Warning Danger 
<ElRow>
  <ElButton plain>Plain</ElButton>
  <ElButton type="primary" plain>Primary</ElButton>
  <ElButton type="success" plain>Success</ElButton>
  <ElButton type="info" plain>Info</ElButton>
  <ElButton type="warning" plain>Warning</ElButton>
  <ElButton type="danger" plain>Danger</ElButton>
</ElRow>

Link

default primary success warning danger info 
<div>
  <ElLink href="/sandbox/" target="_blank">default</ElLink>
  <ElLink href="/download/" type="primary">primary</ElLink>
  <ElLink type="success">success</ElLink>
  <ElLink type="warning">warning</ElLink>
  <ElLink type="danger">danger</ElLink>
  <ElLink type="info">info</ElLink>
</div>

Tag

Neutral Success Info Warning Danger

<ElTag>Neutral</ElTag>
<ElTag type="success">Success</ElTag>
<ElTag type="info">Info</ElTag>
<ElTag type="warning">Warning</ElTag>
<ElTag type="danger">Danger</ElTag>

Alert

<ElAlert type="success" title="Success alert!" :closable="false"></ElAlert>
<ElAlert type="info" title="Info alert!" :closable="false"></ElAlert>
<ElAlert type="warning" title="Warning alert!" :closable="false"></ElAlert>
<ElAlert type="error" title="Error alert!" :closable="false"></ElAlert>
<ElAlert 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"></ElAlert>
<ElAlert type="info" title="Info alert!" description="Magna fringilla urna porttitor rhoncus dolor purus non." show-icon :closable="false"></ElAlert>
<ElAlert type="warning" title="Warning alert!" description="Non consectetur a erat nam at." show-icon :closable="false"></ElAlert>
<ElAlert type="error" title="Error alert!" description="Pellentesque habitant morbi tristique senectus et netus." show-icon :closable="false"></ElAlert>

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

:::: 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

Text

Single-line

Try hovering me!

<ElTooltip content="Tooltip content." placement="top"><span>Try hovering me!</span></ElTooltip>

Multi-line

<template #content>

Tooltip
content.
Try hovering me too!

<ElTooltip placement="top"><template #content><div>Tooltip<br/>content.</div></template><span>Try hovering me too!</span></ElTooltip>

Button

Single-line

Hover me!

<ElTooltip content="Tooltip content." placement="top"><ElButton type="primary" plain>Hover me!</ElButton></ElTooltip>

Multi-line

<template #content>

Tooltip
content.
Hover me too!

<ElTooltip placement="top"><template #content><div>Tooltip<br/>content.</div></template><ElButton type="info" plain>Hover me too!</ElButton></ElTooltip>

Steps

Step bar with icon

:::: el-steps :active="1" ::: el-step title="Step 1" icon="el-icon-edit" ::: ::: el-step title="Step 2" icon="el-icon-upload" ::: ::: el-step title="Step 3" icon="el-icon-picture" ::: ::::

:::: el-steps :active="1"
::: el-step title="Step 1" icon="el-icon-edit"
:::
::: el-step title="Step 2" icon="el-icon-upload"
:::
::: el-step title="Step 3" icon="el-icon-picture"
:::
::::

Step bar with description

:::: el-steps :active="2" finish-status="success" ::: el-step title="Step 1" description="First you do this" ::: ::: el-step title="Step 2" description="Then you do this" ::: ::: el-step title="Step 3" description="Then you do that" ::: ::::

:::: el-steps :active="2" finish-status="success"
::: el-step title="Step 1" description="First you do this"
:::
::: el-step title="Step 2" description="Then you do this"
:::
::: el-step title="Step 3" description="Then you do that"
:::
::::