mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
docs: add poetry, haiku and words (#9971)
* docs: add poetry, haiku and words * chore: update snapshot
This commit is contained in:
neverland
GitHub
parent
a60673013b
commit
1d3735280e
@ -25,9 +25,9 @@ Use `v-model` to control the name of active panels.
|
||||
|
||||
```html
|
||||
<van-collapse v-model="activeNames">
|
||||
<van-collapse-item title="Title1" name="1">Content</van-collapse-item>
|
||||
<van-collapse-item title="Title2" name="2">Content</van-collapse-item>
|
||||
<van-collapse-item title="Title3" name="3">Content</van-collapse-item>
|
||||
<van-collapse-item title="Title1" name="1">Content 1</van-collapse-item>
|
||||
<van-collapse-item title="Title2" name="2">Content 2</van-collapse-item>
|
||||
<van-collapse-item title="Title3" name="3">Content 3</van-collapse-item>
|
||||
</van-collapse>
|
||||
```
|
||||
|
||||
@ -48,9 +48,9 @@ In accordion mode, only one panel can be expanded at the same time.
|
||||
|
||||
```html
|
||||
<van-collapse v-model="activeName" accordion>
|
||||
<van-collapse-item title="Title1" name="1">Content</van-collapse-item>
|
||||
<van-collapse-item title="Title2" name="2">Content</van-collapse-item>
|
||||
<van-collapse-item title="Title3" name="3">Content</van-collapse-item>
|
||||
<van-collapse-item title="Title1" name="1">Content 1</van-collapse-item>
|
||||
<van-collapse-item title="Title2" name="2">Content 2</van-collapse-item>
|
||||
<van-collapse-item title="Title3" name="3">Content 3</van-collapse-item>
|
||||
</van-collapse>
|
||||
```
|
||||
|
||||
@ -71,12 +71,12 @@ Use the `disabled` prop to disable CollapseItem.
|
||||
|
||||
```html
|
||||
<van-collapse v-model="activeNames">
|
||||
<van-collapse-item title="Title1" name="1">Content</van-collapse-item>
|
||||
<van-collapse-item title="Title1" name="1">Content 1</van-collapse-item>
|
||||
<van-collapse-item title="Title2" name="2" disabled>
|
||||
Content
|
||||
Content 2
|
||||
</van-collapse-item>
|
||||
<van-collapse-item title="Title3" name="3" disabled>
|
||||
Content
|
||||
Content 3
|
||||
</van-collapse-item>
|
||||
</van-collapse>
|
||||
```
|
||||
@ -89,10 +89,10 @@ Use the `disabled` prop to disable CollapseItem.
|
||||
<template #title>
|
||||
<div>Title1 <van-icon name="question-o" /></div>
|
||||
</template>
|
||||
Content
|
||||
Content 1
|
||||
</van-collapse-item>
|
||||
<van-collapse-item title="Title2" name="2" icon="shop-o">
|
||||
Content
|
||||
Content 2
|
||||
</van-collapse-item>
|
||||
</van-collapse>
|
||||
```
|
||||
|
||||
@ -25,9 +25,15 @@ app.use(CollapseItem);
|
||||
|
||||
```html
|
||||
<van-collapse v-model="activeNames">
|
||||
<van-collapse-item title="标题1" name="1">内容</van-collapse-item>
|
||||
<van-collapse-item title="标题2" name="2">内容</van-collapse-item>
|
||||
<van-collapse-item title="标题3" name="3">内容</van-collapse-item>
|
||||
<van-collapse-item title="标题1" name="1">
|
||||
代码是写出来给人看的，附带能在机器上运行。
|
||||
</van-collapse-item>
|
||||
<van-collapse-item title="标题2" name="2">
|
||||
技术无非就是那些开发它的人的共同灵魂。
|
||||
</van-collapse-item>
|
||||
<van-collapse-item title="标题3" name="3">
|
||||
在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
|
||||
</van-collapse-item>
|
||||
</van-collapse>
|
||||
```
|
||||
|
||||
@ -48,9 +54,15 @@ export default {
|
||||
|
||||
```html
|
||||
<van-collapse v-model="activeName" accordion>
|
||||
<van-collapse-item title="标题1" name="1">内容</van-collapse-item>
|
||||
<van-collapse-item title="标题2" name="2">内容</van-collapse-item>
|
||||
<van-collapse-item title="标题3" name="3">内容</van-collapse-item>
|
||||
<van-collapse-item title="标题1" name="1">
|
||||
代码是写出来给人看的，附带能在机器上运行。
|
||||
</van-collapse-item>
|
||||
<van-collapse-item title="标题2" name="2">
|
||||
技术无非就是那些开发它的人的共同灵魂。
|
||||
</van-collapse-item>
|
||||
<van-collapse-item title="标题3" name="3">
|
||||
在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
|
||||
</van-collapse-item>
|
||||
</van-collapse>
|
||||
```
|
||||
|
||||
@ -71,9 +83,15 @@ export default {
|
||||
|
||||
```html
|
||||
<van-collapse v-model="activeNames">
|
||||
<van-collapse-item title="标题1" name="1">内容</van-collapse-item>
|
||||
<van-collapse-item title="标题2" name="2" disabled>内容</van-collapse-item>
|
||||
<van-collapse-item title="标题3" name="3" disabled>内容</van-collapse-item>
|
||||
<van-collapse-item title="标题1" name="1">
|
||||
代码是写出来给人看的，附带能在机器上运行。
|
||||
</van-collapse-item>
|
||||
<van-collapse-item title="标题2" name="2" disabled>
|
||||
技术无非就是那些开发它的人的共同灵魂。
|
||||
</van-collapse-item>
|
||||
<van-collapse-item title="标题3" name="3" disabled>
|
||||
在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
|
||||
</van-collapse-item>
|
||||
</van-collapse>
|
||||
```
|
||||
|
||||
@ -87,10 +105,10 @@ export default {
|
||||
<template #title>
|
||||
<div>标题1 <van-icon name="question-o" /></div>
|
||||
</template>
|
||||
内容
|
||||
代码是写出来给人看的，附带能在机器上运行。
|
||||
</van-collapse-item>
|
||||
<van-collapse-item title="标题2" name="2" icon="shop-o">
|
||||
内容
|
||||
技术无非就是那些开发它的人的共同灵魂。
|
||||
</van-collapse-item>
|
||||
</van-collapse>
|
||||
```
|
||||
|
||||
@ -7,14 +7,18 @@ import { useTranslate } from '../../../docs/site/use-translate';
|
||||
|
||||
const t = useTranslate({
|
||||
'zh-CN': {
|
||||
text1: '代码是写出来给人看的，附带能在机器上运行。',
|
||||
text2: '技术无非就是那些开发它的人的共同灵魂。',
|
||||
text3: '在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。',
|
||||
accordion: '手风琴',
|
||||
titleSlot: '自定义标题内容',
|
||||
text: '代码是写出来给人看的，附带能在机器上运行',
|
||||
},
|
||||
'en-US': {
|
||||
text1: 'Content 1',
|
||||
text2: 'Content 2',
|
||||
text3: 'Content 3',
|
||||
accordion: 'Accordion',
|
||||
titleSlot: 'Custom title',
|
||||
text: 'Content',
|
||||
},
|
||||
});
|
||||
|
||||
@ -28,13 +32,13 @@ const active4 = ref([]);
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-collapse v-model="active1">
|
||||
<van-collapse-item :title="t('title') + 1">
|
||||
{{ t('text') }}
|
||||
{{ t('text1') }}
|
||||
</van-collapse-item>
|
||||
<van-collapse-item :title="t('title') + 2">
|
||||
{{ t('text') }}
|
||||
{{ t('text2') }}
|
||||
</van-collapse-item>
|
||||
<van-collapse-item :title="t('title') + 3">
|
||||
{{ t('text') }}
|
||||
{{ t('text3') }}
|
||||
</van-collapse-item>
|
||||
</van-collapse>
|
||||
</demo-block>
|
||||
@ -42,13 +46,13 @@ const active4 = ref([]);
|
||||
<demo-block :title="t('accordion')">
|
||||
<van-collapse v-model="active2" accordion>
|
||||
<van-collapse-item :title="t('title') + 1">
|
||||
{{ t('text') }}
|
||||
{{ t('text1') }}
|
||||
</van-collapse-item>
|
||||
<van-collapse-item :title="t('title') + 2">
|
||||
{{ t('text') }}
|
||||
{{ t('text2') }}
|
||||
</van-collapse-item>
|
||||
<van-collapse-item :title="t('title') + 3">
|
||||
{{ t('text') }}
|
||||
{{ t('text3') }}
|
||||
</van-collapse-item>
|
||||
</van-collapse>
|
||||
</demo-block>
|
||||
@ -56,13 +60,13 @@ const active4 = ref([]);
|
||||
<demo-block :title="t('disabled')">
|
||||
<van-collapse v-model="active3">
|
||||
<van-collapse-item :title="t('title') + 1">
|
||||
{{ t('text') }}
|
||||
{{ t('text1') }}
|
||||
</van-collapse-item>
|
||||
<van-collapse-item :title="t('title') + 2" disabled>
|
||||
{{ t('text') }}
|
||||
{{ t('text2') }}
|
||||
</van-collapse-item>
|
||||
<van-collapse-item :title="t('title') + 3" disabled>
|
||||
{{ t('text') }}
|
||||
{{ t('text3') }}
|
||||
</van-collapse-item>
|
||||
</van-collapse>
|
||||
</demo-block>
|
||||
@ -73,14 +77,14 @@ const active4 = ref([]);
|
||||
<template #title>
|
||||
{{ t('title') + 1 }}<van-icon name="question-o" />
|
||||
</template>
|
||||
{{ t('text') }}
|
||||
{{ t('text1') }}
|
||||
</van-collapse-item>
|
||||
<van-collapse-item
|
||||
:title="t('title') + 2"
|
||||
:value="t('content')"
|
||||
icon="shop-o"
|
||||
>
|
||||
{{ t('text') }}
|
||||
{{ t('text2') }}
|
||||
</van-collapse-item>
|
||||
</van-collapse>
|
||||
</demo-block>
|
||||
|
||||
@ -19,7 +19,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div class="van-collapse-item__wrapper">
|
||||
<div class="van-collapse-item__content">
|
||||
Content
|
||||
Content 1
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -73,7 +73,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
</div>
|
||||
<div class="van-collapse-item__wrapper">
|
||||
<div class="van-collapse-item__content">
|
||||
Content
|
||||
Content 1
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -58,13 +58,13 @@ export default {
|
||||
```js
|
||||
Dialog.alert({
|
||||
title: '标题',
|
||||
message: '弹窗内容',
|
||||
message: '代码是写出来给人看的，附带能在机器上运行。',
|
||||
}).then(() => {
|
||||
// on close
|
||||
});
|
||||
|
||||
Dialog.alert({
|
||||
message: '弹窗内容',
|
||||
message: '生命远不止连轴转和忙到极限，人类的体验远比这辽阔、丰富得多。',
|
||||
}).then(() => {
|
||||
// on close
|
||||
});
|
||||
@ -77,7 +77,8 @@ Dialog.alert({
|
||||
```js
|
||||
Dialog.confirm({
|
||||
title: '标题',
|
||||
message: '弹窗内容',
|
||||
message:
|
||||
'如果解决方法是丑陋的，那就肯定还有更好的解决方法，只是还没有发现而已。',
|
||||
})
|
||||
.then(() => {
|
||||
// on confirm
|
||||
@ -94,14 +95,14 @@ Dialog.confirm({
|
||||
```js
|
||||
Dialog.alert({
|
||||
title: '标题',
|
||||
message: '弹窗内容',
|
||||
message: '代码是写出来给人看的，附带能在机器上运行。',
|
||||
theme: 'round-button',
|
||||
}).then(() => {
|
||||
// on close
|
||||
});
|
||||
|
||||
Dialog.alert({
|
||||
message: '弹窗内容',
|
||||
message: '生命远不止连轴转和忙到极限，人类的体验远比这辽阔、丰富得多。',
|
||||
theme: 'round-button',
|
||||
}).then(() => {
|
||||
// on close
|
||||
@ -127,7 +128,8 @@ const beforeClose = (action) =>
|
||||
|
||||
Dialog.confirm({
|
||||
title: '标题',
|
||||
message: '弹窗内容',
|
||||
message:
|
||||
'如果解决方法是丑陋的，那就肯定还有更好的解决方法，只是还没有发现而已。',
|
||||
beforeClose,
|
||||
});
|
||||
```
|
||||
|
||||
@ -3,7 +3,7 @@ import VanCell from '../../cell';
|
||||
import { Dialog } from '..';
|
||||
import { ref } from 'vue';
|
||||
import { useTranslate } from '../../../docs/site/use-translate';
|
||||
import type { DialogAction } from '../Dialog';
|
||||
import type { DialogAction } from '../types';
|
||||
|
||||
const VanDialog = Dialog.Component;
|
||||
|
||||
@ -13,16 +13,22 @@ const t = useTranslate({
|
||||
alert1: '提示弹窗',
|
||||
alert2: '提示弹窗（无标题）',
|
||||
confirm: '确认弹窗',
|
||||
content1: '代码是写出来给人看的，附带能在机器上运行。',
|
||||
content2: '生命远不止连轴转和忙到极限，人类的体验远比这辽阔、丰富得多。',
|
||||
content3:
|
||||
'如果解决方法是丑陋的，那就肯定还有更好的解决方法，只是还没有发现而已。',
|
||||
beforeClose: '异步关闭',
|
||||
roundButton: '圆角按钮样式',
|
||||
componentCall: '组件调用',
|
||||
content: '代码是写出来给人看的，附带能在机器上运行',
|
||||
},
|
||||
'en-US': {
|
||||
title: 'Title',
|
||||
alert1: 'Alert',
|
||||
alert2: 'Alert without title',
|
||||
confirm: 'Confirm dialog',
|
||||
content1: 'Content',
|
||||
content2: 'Content',
|
||||
content3: 'Content',
|
||||
beforeClose: 'Before Close',
|
||||
roundButton: 'Round Button Style',
|
||||
componentCall: 'Component Call',
|
||||
@ -35,13 +41,13 @@ const image = 'https://img.yzcdn.cn/vant/apple-3.jpg';
|
||||
const onClickAlert = () => {
|
||||
Dialog.alert({
|
||||
title: t('title'),
|
||||
message: t('content'),
|
||||
message: t('content1'),
|
||||
});
|
||||
};
|
||||
|
||||
const onClickAlert2 = () => {
|
||||
Dialog.alert({
|
||||
message: t('content'),
|
||||
message: t('content2'),
|
||||
});
|
||||
};
|
||||
|
||||
@ -49,21 +55,21 @@ const onClickRound = () => {
|
||||
Dialog.alert({
|
||||
theme: 'round-button',
|
||||
title: t('title'),
|
||||
message: t('content'),
|
||||
message: t('content1'),
|
||||
});
|
||||
};
|
||||
|
||||
const onClickRound2 = () => {
|
||||
Dialog.alert({
|
||||
theme: 'round-button',
|
||||
message: t('content'),
|
||||
message: t('content2'),
|
||||
});
|
||||
};
|
||||
|
||||
const onClickConfirm = () => {
|
||||
Dialog.confirm({
|
||||
title: t('title'),
|
||||
message: t('content'),
|
||||
message: t('content3'),
|
||||
});
|
||||
};
|
||||
|
||||
@ -75,7 +81,7 @@ const onClickBeforeClose = () => {
|
||||
|
||||
Dialog.confirm({
|
||||
title: t('title'),
|
||||
message: t('content'),
|
||||
message: t('content3'),
|
||||
beforeClose,
|
||||
});
|
||||
};
|
||||
|
||||
@ -21,14 +21,17 @@ app.use(NoticeBar);
|
||||
### Basic Usage
|
||||
|
||||
```html
|
||||
<van-notice-bar text="Notice Content" left-icon="volume-o" />
|
||||
<van-notice-bar
|
||||
text="Technology is the common soul of the people who developed it."
|
||||
left-icon="volume-o"
|
||||
/>
|
||||
```
|
||||
|
||||
### Scrollable
|
||||
|
||||
```html
|
||||
<!-- Enable scroll when text is short -->
|
||||
<van-notice-bar scrollable text="Notice Content" />
|
||||
<van-notice-bar scrollable text="Short Content" />
|
||||
|
||||
<!-- Disable scroll when text is long -->
|
||||
<van-notice-bar
|
||||
@ -40,22 +43,24 @@ app.use(NoticeBar);
|
||||
### Wrapable
|
||||
|
||||
```html
|
||||
<van-notice-bar wrapable :scrollable="false">Notice Content</van-notice-bar>
|
||||
<van-notice-bar wrapable :scrollable="false">
|
||||
Technology is the common soul of the people who developed it.
|
||||
</van-notice-bar>
|
||||
```
|
||||
|
||||
### Mode
|
||||
|
||||
```html
|
||||
<van-notice-bar mode="closeable">Notice Content</van-notice-bar>
|
||||
<van-notice-bar mode="closeable">Short Content</van-notice-bar>
|
||||
|
||||
<van-notice-bar mode="link">Notice Content</van-notice-bar>
|
||||
<van-notice-bar mode="link">Short Content</van-notice-bar>
|
||||
```
|
||||
|
||||
### Custom Style
|
||||
|
||||
```html
|
||||
<van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">
|
||||
Notice Content
|
||||
Short Content
|
||||
</van-notice-bar>
|
||||
```
|
||||
|
||||
|
||||
@ -25,7 +25,7 @@ app.use(NoticeBar);
|
||||
```html
|
||||
<van-notice-bar
|
||||
left-icon="volume-o"
|
||||
text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
|
||||
text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。"
|
||||
/>
|
||||
```
|
||||
|
||||
@ -35,12 +35,12 @@ app.use(NoticeBar);
|
||||
|
||||
```html
|
||||
<!-- 文字较短时，通过设置 scrollable 属性开启滚动播放 -->
|
||||
<van-notice-bar scrollable text="技术是开发它的人的共同灵魂。" />
|
||||
<van-notice-bar scrollable text="米袋虽空——樱花开哉！" />
|
||||
|
||||
<!-- 文字较长时，通过禁用 scrollable 属性关闭滚动播放 -->
|
||||
<van-notice-bar
|
||||
:scrollable="false"
|
||||
text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
|
||||
text="不会回头的东西有四件：说出口的话、离弦的箭、逝去的生活和失去的机会。"
|
||||
/>
|
||||
```
|
||||
|
||||
@ -52,7 +52,7 @@ app.use(NoticeBar);
|
||||
<van-notice-bar
|
||||
wrapable
|
||||
:scrollable="false"
|
||||
text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
|
||||
text="不会回头的东西有四件：说出口的话、离弦的箭、逝去的生活和失去的机会。"
|
||||
/>
|
||||
```
|
||||
|
||||
@ -62,10 +62,10 @@ app.use(NoticeBar);
|
||||
|
||||
```html
|
||||
<!-- closeable 模式，在右侧显示关闭按钮 -->
|
||||
<van-notice-bar mode="closeable">技术是开发它的人的共同灵魂。</van-notice-bar>
|
||||
<van-notice-bar mode="closeable">米袋虽空——樱花开哉！</van-notice-bar>
|
||||
|
||||
<!-- link 模式，在右侧显示链接箭头 -->
|
||||
<van-notice-bar mode="link">技术是开发它的人的共同灵魂。</van-notice-bar>
|
||||
<van-notice-bar mode="link">米袋虽空——樱花开哉！</van-notice-bar>
|
||||
```
|
||||
|
||||
### 自定义样式
|
||||
@ -74,13 +74,13 @@ app.use(NoticeBar);
|
||||
|
||||
```html
|
||||
<van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">
|
||||
技术是开发它的人的共同灵魂。
|
||||
米袋虽空——樱花开哉！
|
||||
</van-notice-bar>
|
||||
```
|
||||
|
||||
### 垂直滚动
|
||||
|
||||
搭配 NoticeBar 和 Swipe 组件可以实现垂直滚动的效果。
|
||||
搭配 NoticeBar 和 Swipe 组件，可以实现垂直滚动的效果。
|
||||
|
||||
```html
|
||||
<van-notice-bar left-icon="volume-o" :scrollable="false">
|
||||
@ -90,9 +90,9 @@ app.use(NoticeBar);
|
||||
:autoplay="3000"
|
||||
:show-indicators="false"
|
||||
>
|
||||
<van-swipe-item>内容 1</van-swipe-item>
|
||||
<van-swipe-item>内容 2</van-swipe-item>
|
||||
<van-swipe-item>内容 3</van-swipe-item>
|
||||
<van-swipe-item>明月直入，无心可猜。</van-swipe-item>
|
||||
<van-swipe-item>仙人抚我顶，结发受长生。</van-swipe-item>
|
||||
<van-swipe-item>今人不见古时月，今月曾经照古人。</van-swipe-item>
|
||||
</van-swipe>
|
||||
</van-notice-bar>
|
||||
|
||||
|
||||
@ -6,21 +6,28 @@ import { useTranslate } from '../../../docs/site/use-translate';
|
||||
|
||||
const t = useTranslate({
|
||||
'zh-CN': {
|
||||
text: '在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。',
|
||||
mode: '通知栏模式',
|
||||
content: '内容',
|
||||
text1: '无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。',
|
||||
text2:
|
||||
'不会回头的东西有四件：说出口的话、离弦的箭、逝去的生活和失去的机会。',
|
||||
haiku: '米袋虽空——樱花开哉！',
|
||||
poetry1: '明月直入，无心可猜。',
|
||||
poetry2: '仙人抚我顶，结发受长生。',
|
||||
poetry3: '今人不见古时月，今月曾经照古人。',
|
||||
wrapable: '多行展示',
|
||||
shortText: '技术是开发它的人的共同灵魂。',
|
||||
scrollable: '滚动播放',
|
||||
customStyle: '自定义样式',
|
||||
verticalScroll: '垂直滚动',
|
||||
},
|
||||
'en-US': {
|
||||
text: 'Technology is the common soul of the people who developed it.',
|
||||
mode: 'Mode',
|
||||
content: 'Content',
|
||||
text1: 'Technology is the common soul of the people who developed it.',
|
||||
text2: 'Technology is the common soul of the people who developed it.',
|
||||
haiku: 'Short Content',
|
||||
poetry1: 'Content 1',
|
||||
poetry2: 'Content 2',
|
||||
poetry3: 'Content 3',
|
||||
wrapable: 'Wrapable',
|
||||
shortText: 'Some short text.',
|
||||
customStyle: 'Custom Style',
|
||||
scrollable: 'Scrollable',
|
||||
verticalScroll: 'Vertical Scroll',
|
||||
@ -30,26 +37,26 @@ const t = useTranslate({
|
||||
|
||||
<template>
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-notice-bar :text="t('text')" scrollable left-icon="volume-o" />
|
||||
<van-notice-bar :text="t('text1')" scrollable left-icon="volume-o" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('scrollable')">
|
||||
<van-notice-bar scrollable :text="t('shortText')" />
|
||||
<van-notice-bar :scrollable="false" :text="t('text')" />
|
||||
<van-notice-bar scrollable :text="t('haiku')" />
|
||||
<van-notice-bar :scrollable="false" :text="t('text2')" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('wrapable')">
|
||||
<van-notice-bar wrapable :scrollable="false" :text="t('text')" />
|
||||
<van-notice-bar wrapable :scrollable="false" :text="t('text2')" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('mode')">
|
||||
<van-notice-bar mode="closeable" :text="t('shortText')" />
|
||||
<van-notice-bar mode="link" :text="t('shortText')" />
|
||||
<van-notice-bar mode="closeable" :text="t('haiku')" />
|
||||
<van-notice-bar mode="link" :text="t('haiku')" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="t('customStyle')">
|
||||
<van-notice-bar
|
||||
:text="t('shortText')"
|
||||
:text="t('haiku')"
|
||||
color="#1989fa"
|
||||
background="#ecf9ff"
|
||||
left-icon="info-o"
|
||||
@ -64,9 +71,9 @@ const t = useTranslate({
|
||||
:autoplay="3000"
|
||||
:show-indicators="false"
|
||||
>
|
||||
<van-swipe-item>{{ t('content') }} 1</van-swipe-item>
|
||||
<van-swipe-item>{{ t('content') }} 2</van-swipe-item>
|
||||
<van-swipe-item>{{ t('content') }} 3</van-swipe-item>
|
||||
<van-swipe-item>{{ t('poetry1') }}</van-swipe-item>
|
||||
<van-swipe-item>{{ t('poetry2') }}</van-swipe-item>
|
||||
<van-swipe-item>{{ t('poetry3') }}</van-swipe-item>
|
||||
</van-swipe>
|
||||
</van-notice-bar>
|
||||
</demo-block>
|
||||
|
||||
@ -28,7 +28,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div style="transition-duration: 0s;"
|
||||
class="van-notice-bar__content"
|
||||
>
|
||||
Some short text.
|
||||
Short Content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -71,7 +71,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div style="transition-duration: 0s;"
|
||||
class="van-notice-bar__content"
|
||||
>
|
||||
Some short text.
|
||||
Short Content
|
||||
</div>
|
||||
</div>
|
||||
<i class="van-badge__wrapper van-icon van-icon-cross van-notice-bar__right-icon">
|
||||
@ -86,7 +86,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div style="transition-duration: 0s;"
|
||||
class="van-notice-bar__content"
|
||||
>
|
||||
Some short text.
|
||||
Short Content
|
||||
</div>
|
||||
</div>
|
||||
<i class="van-badge__wrapper van-icon van-icon-arrow van-notice-bar__right-icon">
|
||||
@ -106,7 +106,7 @@ exports[`should render demo and match snapshot 1`] = `
|
||||
<div style="transition-duration: 0s;"
|
||||
class="van-notice-bar__content"
|
||||
>
|
||||
Some short text.
|
||||
Short Content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user