59 lines
1.3 KiB
Vue
59 lines
1.3 KiB
Vue
|
<script>
|
|||
|
|
import CustomIndicator from './custom-indicator'
|
|||
|
|
import Basic from './basic'
|
|||
|
|
import DelayAndDebounce from './delayAndDebounce'
|
|||
|
|
import Inside from './inside'
|
|||
|
|
import Nested from './nested'
|
|||
|
|
import Size from './size'
|
|||
|
|
import Tip from './tip'
|
|||
|
|
import CN from '../index.zh-CN.md'
|
|||
|
|
import US from '../index.en-US.md'
|
|||
|
|
|
|||
|
|
const md = {
|
|||
|
|
cn: `# Spin 加载中
|
|||
|
|
|
|||
|
|
用于页面和区块的加载中状态。
|
|||
|
|
|
|||
|
|
## 何时使用
|
|||
|
|
|
|||
|
|
页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。
|
|||
|
|
## 代码演示`,
|
|||
|
|
us: `# Spin
|
|||
|
|
|
|||
|
|
A spinner for displaying loading state of a page or a section.
|
|||
|
|
|
|||
|
|
# When To Use
|
|||
|
|
|
|||
|
|
When part of the page is waiting for asynchronous data or during a rendering process, an appropriate loading animation can effectively alleviate users' inquietude.`,
|
|||
|
|
}
|
|||
|
|
export default {
|
|||
|
|
render () {
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
<md cn={md.cn} us={md.us}/>
|
|||
|
|
<Basic />
|
|||
|
|
<br/>
|
|||
|
|
<Size />
|
|||
|
|
<br/>
|
|||
|
|
<Inside />
|
|||
|
|
<br/>
|
|||
|
|
<Nested />
|
|||
|
|
<br/>
|
|||
|
|
<Tip />
|
|||
|
|
<br/>
|
|||
|
|
<DelayAndDebounce />
|
|||
|
|
<br/>
|
|||
|
|
<CustomIndicator />
|
|||
|
|
<br/>
|
|||
|
|
<api>
|
|||
|
|
<template slot='cn'>
|
|||
|
|
<CN/>
|
|||
|
|
</template>
|
|||
|
|
<US/>
|
|||
|
|
</api>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
</script>
|