blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

docs: add poetry, haiku and words (#9971)

Browse Source 
* docs: add poetry, haiku and words

* chore: update snapshot
This commit is contained in:
neverland 2021-11-30 20:42:07 +08:00 committed by GitHub
parent a60673013b
commit 1d3735280e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 130 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/vant/src/collapse/README.md
View File

@ -25,9 +25,9 @@ Use `v-model` to control the name of active panels.
```html ```html
<van-collapse v-model="activeNames"> <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">Content</van-collapse-item> <van-collapse-item title="Title2" name="2">Content 2</van-collapse-item>
<van-collapse-item title="Title3" name="3">Content</van-collapse-item> <van-collapse-item title="Title3" name="3">Content 3</van-collapse-item>
</van-collapse> </van-collapse>
``` ```
@ -48,9 +48,9 @@ In accordion mode, only one panel can be expanded at the same time.
```html ```html
<van-collapse v-model="activeName" accordion> <van-collapse v-model="activeName" accordion>
<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">Content</van-collapse-item> <van-collapse-item title="Title2" name="2">Content 2</van-collapse-item>
<van-collapse-item title="Title3" name="3">Content</van-collapse-item> <van-collapse-item title="Title3" name="3">Content 3</van-collapse-item>
</van-collapse> </van-collapse>
``` ```
@ -71,12 +71,12 @@ Use the `disabled` prop to disable CollapseItem.
```html ```html
<van-collapse v-model="activeNames"> <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> <van-collapse-item title="Title2" name="2" disabled>
Content Content 2
</van-collapse-item> </van-collapse-item>
<van-collapse-item title="Title3" name="3" disabled> <van-collapse-item title="Title3" name="3" disabled>
Content Content 3
</van-collapse-item> </van-collapse-item>
</van-collapse> </van-collapse>
``` ```
@ -89,10 +89,10 @@ Use the `disabled` prop to disable CollapseItem.
<template #title> <template #title>
<div>Title1 <van-icon name="question-o" /></div> <div>Title1 <van-icon name="question-o" /></div>
</template> </template>
Content Content 1
</van-collapse-item> </van-collapse-item>
<van-collapse-item title="Title2" name="2" icon="shop-o"> <van-collapse-item title="Title2" name="2" icon="shop-o">
Content Content 2
</van-collapse-item> </van-collapse-item>
</van-collapse> </van-collapse>
``` ```

40
packages/vant/src/collapse/README.zh-CN.md
View File

@ -25,9 +25,15 @@ app.use(CollapseItem);
```html ```html
<van-collapse v-model="activeNames"> <van-collapse v-model="activeNames">
<van-collapse-item title="标题1" name="1">内容</van-collapse-item> <van-collapse-item title="标题1" name="1">
<van-collapse-item title="标题2" name="2">内容</van-collapse-item> 代码是写出来给人看的，附带能在机器上运行。
<van-collapse-item title="标题3" name="3">内容</van-collapse-item> </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> </van-collapse>
``` ```
@ -48,9 +54,15 @@ export default {
```html ```html
<van-collapse v-model="activeName" accordion> <van-collapse v-model="activeName" accordion>
<van-collapse-item title="标题1" name="1">内容</van-collapse-item> <van-collapse-item title="标题1" name="1">
<van-collapse-item title="标题2" name="2">内容</van-collapse-item> 代码是写出来给人看的，附带能在机器上运行。
<van-collapse-item title="标题3" name="3">内容</van-collapse-item> </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> </van-collapse>
``` ```
@ -71,9 +83,15 @@ export default {
```html ```html
<van-collapse v-model="activeNames"> <van-collapse v-model="activeNames">
<van-collapse-item title="标题1" name="1">内容</van-collapse-item> <van-collapse-item title="标题1" name="1">
<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>
<van-collapse-item title="标题2" name="2" disabled>
技术无非就是那些开发它的人的共同灵魂。
</van-collapse-item>
<van-collapse-item title="标题3" name="3" disabled>
在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。
</van-collapse-item>
</van-collapse> </van-collapse>
``` ```
@ -87,10 +105,10 @@ export default {
<template #title> <template #title>
<div>标题1 <van-icon name="question-o" /></div> <div>标题1 <van-icon name="question-o" /></div>
</template> </template>
内容 代码是写出来给人看的，附带能在机器上运行。
</van-collapse-item> </van-collapse-item>
<van-collapse-item title="标题2" name="2" icon="shop-o"> <van-collapse-item title="标题2" name="2" icon="shop-o">
内容 技术无非就是那些开发它的人的共同灵魂。
</van-collapse-item> </van-collapse-item>
</van-collapse> </van-collapse>
``` ```

30
packages/vant/src/collapse/demo/index.vue
View File

@ -7,14 +7,18 @@ import { useTranslate } from '../../../docs/site/use-translate';
const t = useTranslate({ const t = useTranslate({
'zh-CN': { 'zh-CN': {
text1: '代码是写出来给人看的，附带能在机器上运行。',
text2: '技术无非就是那些开发它的人的共同灵魂。',
text3: '在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。',
accordion: '手风琴', accordion: '手风琴',
titleSlot: '自定义标题内容', titleSlot: '自定义标题内容',
text: '代码是写出来给人看的，附带能在机器上运行',
}, },
'en-US': { 'en-US': {
text1: 'Content 1',
text2: 'Content 2',
text3: 'Content 3',
accordion: 'Accordion', accordion: 'Accordion',
titleSlot: 'Custom title', titleSlot: 'Custom title',
text: 'Content',
}, },
}); });
@ -28,13 +32,13 @@ const active4 = ref([]);
<demo-block :title="t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-collapse v-model="active1"> <van-collapse v-model="active1">
<van-collapse-item :title="t('title') + 1"> <van-collapse-item :title="t('title') + 1">
{{ t('text') }} {{ t('text1') }}
</van-collapse-item> </van-collapse-item>
<van-collapse-item :title="t('title') + 2"> <van-collapse-item :title="t('title') + 2">
{{ t('text') }} {{ t('text2') }}
</van-collapse-item> </van-collapse-item>
<van-collapse-item :title="t('title') + 3"> <van-collapse-item :title="t('title') + 3">
{{ t('text') }} {{ t('text3') }}
</van-collapse-item> </van-collapse-item>
</van-collapse> </van-collapse>
</demo-block> </demo-block>
@ -42,13 +46,13 @@ const active4 = ref([]);
<demo-block :title="t('accordion')"> <demo-block :title="t('accordion')">
<van-collapse v-model="active2" accordion> <van-collapse v-model="active2" accordion>
<van-collapse-item :title="t('title') + 1"> <van-collapse-item :title="t('title') + 1">
{{ t('text') }} {{ t('text1') }}
</van-collapse-item> </van-collapse-item>
<van-collapse-item :title="t('title') + 2"> <van-collapse-item :title="t('title') + 2">
{{ t('text') }} {{ t('text2') }}
</van-collapse-item> </van-collapse-item>
<van-collapse-item :title="t('title') + 3"> <van-collapse-item :title="t('title') + 3">
{{ t('text') }} {{ t('text3') }}
</van-collapse-item> </van-collapse-item>
</van-collapse> </van-collapse>
</demo-block> </demo-block>
@ -56,13 +60,13 @@ const active4 = ref([]);
<demo-block :title="t('disabled')"> <demo-block :title="t('disabled')">
<van-collapse v-model="active3"> <van-collapse v-model="active3">
<van-collapse-item :title="t('title') + 1"> <van-collapse-item :title="t('title') + 1">
{{ t('text') }} {{ t('text1') }}
</van-collapse-item> </van-collapse-item>
<van-collapse-item :title="t('title') + 2" disabled> <van-collapse-item :title="t('title') + 2" disabled>
{{ t('text') }} {{ t('text2') }}
</van-collapse-item> </van-collapse-item>
<van-collapse-item :title="t('title') + 3" disabled> <van-collapse-item :title="t('title') + 3" disabled>
{{ t('text') }} {{ t('text3') }}
</van-collapse-item> </van-collapse-item>
</van-collapse> </van-collapse>
</demo-block> </demo-block>
@ -73,14 +77,14 @@ const active4 = ref([]);
<template #title> <template #title>
{{ t('title') + 1 }}<van-icon name="question-o" /> {{ t('title') + 1 }}<van-icon name="question-o" />
</template> </template>
{{ t('text') }} {{ t('text1') }}
</van-collapse-item> </van-collapse-item>
<van-collapse-item <van-collapse-item
:title="t('title') + 2" :title="t('title') + 2"
:value="t('content')" :value="t('content')"
icon="shop-o" icon="shop-o"
> >
{{ t('text') }} {{ t('text2') }}
</van-collapse-item> </van-collapse-item>
</van-collapse> </van-collapse>
</demo-block> </demo-block>

4
packages/vant/src/collapse/test/__snapshots__/demo.spec.ts.snap
View File

@ -19,7 +19,7 @@ exports[`should render demo and match snapshot 1`] = `
</div> </div>
<div class="van-collapse-item__wrapper"> <div class="van-collapse-item__wrapper">
<div class="van-collapse-item__content"> <div class="van-collapse-item__content">
Content Content 1
</div> </div>
</div> </div>
</div> </div>
@ -73,7 +73,7 @@ exports[`should render demo and match snapshot 1`] = `
</div> </div>
<div class="van-collapse-item__wrapper"> <div class="van-collapse-item__wrapper">
<div class="van-collapse-item__content"> <div class="van-collapse-item__content">
Content Content 1
</div> </div>
</div> </div>
</div> </div>

14
packages/vant/src/dialog/README.zh-CN.md
View File

@ -58,13 +58,13 @@ export default {
```js ```js
Dialog.alert({ Dialog.alert({
title: '标题', title: '标题',
message: '弹窗内容', message: '代码是写出来给人看的，附带能在机器上运行。',
}).then(() => { }).then(() => {
// on close // on close
}); });
Dialog.alert({ Dialog.alert({
message: '弹窗内容', message: '生命远不止连轴转和忙到极限，人类的体验远比这辽阔、丰富得多。',
}).then(() => { }).then(() => {
// on close // on close
}); });
@ -77,7 +77,8 @@ Dialog.alert({
```js ```js
Dialog.confirm({ Dialog.confirm({
title: '标题', title: '标题',
message: '弹窗内容', message:
'如果解决方法是丑陋的，那就肯定还有更好的解决方法，只是还没有发现而已。',
}) })
.then(() => { .then(() => {
// on confirm // on confirm
@ -94,14 +95,14 @@ Dialog.confirm({
```js ```js
Dialog.alert({ Dialog.alert({
title: '标题', title: '标题',
message: '弹窗内容', message: '代码是写出来给人看的，附带能在机器上运行。',
theme: 'round-button', theme: 'round-button',
}).then(() => { }).then(() => {
// on close // on close
}); });
Dialog.alert({ Dialog.alert({
message: '弹窗内容', message: '生命远不止连轴转和忙到极限，人类的体验远比这辽阔、丰富得多。',
theme: 'round-button', theme: 'round-button',
}).then(() => { }).then(() => {
// on close // on close
@ -127,7 +128,8 @@ const beforeClose = (action) =>
Dialog.confirm({ Dialog.confirm({
title: '标题', title: '标题',
message: '弹窗内容', message:
'如果解决方法是丑陋的，那就肯定还有更好的解决方法，只是还没有发现而已。',
beforeClose, beforeClose,
}); });
``` ```

22
packages/vant/src/dialog/demo/index.vue
View File

@ -3,7 +3,7 @@ import VanCell from '../../cell';
import { Dialog } from '..'; import { Dialog } from '..';
import { ref } from 'vue'; import { ref } from 'vue';
import { useTranslate } from '../../../docs/site/use-translate'; import { useTranslate } from '../../../docs/site/use-translate';
import type { DialogAction } from '../Dialog'; import type { DialogAction } from '../types';
const VanDialog = Dialog.Component; const VanDialog = Dialog.Component;
@ -13,16 +13,22 @@ const t = useTranslate({
alert1: '提示弹窗', alert1: '提示弹窗',
alert2: '提示弹窗（无标题）', alert2: '提示弹窗（无标题）',
confirm: '确认弹窗', confirm: '确认弹窗',
content1: '代码是写出来给人看的，附带能在机器上运行。',
content2: '生命远不止连轴转和忙到极限，人类的体验远比这辽阔、丰富得多。',
content3:
'如果解决方法是丑陋的，那就肯定还有更好的解决方法，只是还没有发现而已。',
beforeClose: '异步关闭', beforeClose: '异步关闭',
roundButton: '圆角按钮样式', roundButton: '圆角按钮样式',
componentCall: '组件调用', componentCall: '组件调用',
content: '代码是写出来给人看的，附带能在机器上运行',
}, },
'en-US': { 'en-US': {
title: 'Title', title: 'Title',
alert1: 'Alert', alert1: 'Alert',
alert2: 'Alert without title', alert2: 'Alert without title',
confirm: 'Confirm dialog', confirm: 'Confirm dialog',
content1: 'Content',
content2: 'Content',
content3: 'Content',
beforeClose: 'Before Close', beforeClose: 'Before Close',
roundButton: 'Round Button Style', roundButton: 'Round Button Style',
componentCall: 'Component Call', componentCall: 'Component Call',
@ -35,13 +41,13 @@ const image = 'https://img.yzcdn.cn/vant/apple-3.jpg';
const onClickAlert = () => { const onClickAlert = () => {
Dialog.alert({ Dialog.alert({
title: t('title'), title: t('title'),
message: t('content'), message: t('content1'),
}); });
}; };
const onClickAlert2 = () => { const onClickAlert2 = () => {
Dialog.alert({ Dialog.alert({
message: t('content'), message: t('content2'),
}); });
}; };
@ -49,21 +55,21 @@ const onClickRound = () => {
Dialog.alert({ Dialog.alert({
theme: 'round-button', theme: 'round-button',
title: t('title'), title: t('title'),
message: t('content'), message: t('content1'),
}); });
}; };
const onClickRound2 = () => { const onClickRound2 = () => {
Dialog.alert({ Dialog.alert({
theme: 'round-button', theme: 'round-button',
message: t('content'), message: t('content2'),
}); });
}; };
const onClickConfirm = () => { const onClickConfirm = () => {
Dialog.confirm({ Dialog.confirm({
title: t('title'), title: t('title'),
message: t('content'), message: t('content3'),
}); });
}; };
@ -75,7 +81,7 @@ const onClickBeforeClose = () => {
Dialog.confirm({ Dialog.confirm({
title: t('title'), title: t('title'),
message: t('content'), message: t('content3'),
beforeClose, beforeClose,
}); });
}; };

17
packages/vant/src/notice-bar/README.md
View File

@ -21,14 +21,17 @@ app.use(NoticeBar);
### Basic Usage ### Basic Usage
```html ```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 ### Scrollable
```html ```html
<!-- Enable scroll when text is short --> <!-- 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 --> <!-- Disable scroll when text is long -->
<van-notice-bar <van-notice-bar
@ -40,22 +43,24 @@ app.use(NoticeBar);
### Wrapable ### Wrapable
```html ```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 ### Mode
```html ```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 ### Custom Style
```html ```html
<van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o"> <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">
Notice Content Short Content
</van-notice-bar> </van-notice-bar>
``` ```

22
packages/vant/src/notice-bar/README.zh-CN.md
View File

@ -25,7 +25,7 @@ app.use(NoticeBar);
```html ```html
<van-notice-bar <van-notice-bar
left-icon="volume-o" left-icon="volume-o"
text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。" text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。"
/> />
``` ```
@ -35,12 +35,12 @@ app.use(NoticeBar);
```html ```html
<!-- 文字较短时，通过设置 scrollable 属性开启滚动播放 --> <!-- 文字较短时，通过设置 scrollable 属性开启滚动播放 -->
<van-notice-bar scrollable text="技术是开发它的人的共同灵魂。" /> <van-notice-bar scrollable text="米袋虽空——樱花开哉！" />
<!-- 文字较长时，通过禁用 scrollable 属性关闭滚动播放 --> <!-- 文字较长时，通过禁用 scrollable 属性关闭滚动播放 -->
<van-notice-bar <van-notice-bar
:scrollable="false" :scrollable="false"
text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。" text="不会回头的东西有四件：说出口的话、离弦的箭、逝去的生活和失去的机会。"
/> />
``` ```
@ -52,7 +52,7 @@ app.use(NoticeBar);
<van-notice-bar <van-notice-bar
wrapable wrapable
:scrollable="false" :scrollable="false"
text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。" text="不会回头的东西有四件：说出口的话、离弦的箭、逝去的生活和失去的机会。"
/> />
``` ```
@ -62,10 +62,10 @@ app.use(NoticeBar);
```html ```html
<!-- closeable 模式，在右侧显示关闭按钮 --> <!-- closeable 模式，在右侧显示关闭按钮 -->
<van-notice-bar mode="closeable">技术是开发它的人的共同灵魂。</van-notice-bar> <van-notice-bar mode="closeable">米袋虽空——樱花开哉！</van-notice-bar>
<!-- link 模式，在右侧显示链接箭头 --> <!-- 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 ```html
<van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o"> <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">
技术是开发它的人的共同灵魂。 米袋虽空——樱花开哉！
</van-notice-bar> </van-notice-bar>
``` ```
### 垂直滚动 ### 垂直滚动
搭配 NoticeBar 和 Swipe 组件可以实现垂直滚动的效果。 搭配 NoticeBar 和 Swipe 组件，可以实现垂直滚动的效果。
```html ```html
<van-notice-bar left-icon="volume-o" :scrollable="false"> <van-notice-bar left-icon="volume-o" :scrollable="false">
@ -90,9 +90,9 @@ app.use(NoticeBar);
:autoplay="3000" :autoplay="3000"
:show-indicators="false" :show-indicators="false"
> >
<van-swipe-item>内容 1</van-swipe-item> <van-swipe-item>明月直入，无心可猜。</van-swipe-item>
<van-swipe-item>内容 2</van-swipe-item> <van-swipe-item>仙人抚我顶，结发受长生。</van-swipe-item>
<van-swipe-item>内容 3</van-swipe-item> <van-swipe-item>今人不见古时月，今月曾经照古人。</van-swipe-item>
</van-swipe> </van-swipe>
</van-notice-bar> </van-notice-bar>

39
packages/vant/src/notice-bar/demo/index.vue
View File

@ -6,21 +6,28 @@ import { useTranslate } from '../../../docs/site/use-translate';
const t = useTranslate({ const t = useTranslate({
'zh-CN': { 'zh-CN': {
text: '在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。',
mode: '通知栏模式', mode: '通知栏模式',
content: '内容', text1: '无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。',
text2:
'不会回头的东西有四件：说出口的话、离弦的箭、逝去的生活和失去的机会。',
haiku: '米袋虽空——樱花开哉！',
poetry1: '明月直入，无心可猜。',
poetry2: '仙人抚我顶，结发受长生。',
poetry3: '今人不见古时月，今月曾经照古人。',
wrapable: '多行展示', wrapable: '多行展示',
shortText: '技术是开发它的人的共同灵魂。',
scrollable: '滚动播放', scrollable: '滚动播放',
customStyle: '自定义样式', customStyle: '自定义样式',
verticalScroll: '垂直滚动', verticalScroll: '垂直滚动',
}, },
'en-US': { 'en-US': {
text: 'Technology is the common soul of the people who developed it.',
mode: 'Mode', 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', wrapable: 'Wrapable',
shortText: 'Some short text.',
customStyle: 'Custom Style', customStyle: 'Custom Style',
scrollable: 'Scrollable', scrollable: 'Scrollable',
verticalScroll: 'Vertical Scroll', verticalScroll: 'Vertical Scroll',
@ -30,26 +37,26 @@ const t = useTranslate({
<template> <template>
<demo-block :title="t('basicUsage')"> <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>
<demo-block :title="t('scrollable')"> <demo-block :title="t('scrollable')">
<van-notice-bar scrollable :text="t('shortText')" /> <van-notice-bar scrollable :text="t('haiku')" />
<van-notice-bar :scrollable="false" :text="t('text')" /> <van-notice-bar :scrollable="false" :text="t('text2')" />
</demo-block> </demo-block>
<demo-block :title="t('wrapable')"> <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>
<demo-block :title="t('mode')"> <demo-block :title="t('mode')">
<van-notice-bar mode="closeable" :text="t('shortText')" /> <van-notice-bar mode="closeable" :text="t('haiku')" />
<van-notice-bar mode="link" :text="t('shortText')" /> <van-notice-bar mode="link" :text="t('haiku')" />
</demo-block> </demo-block>
<demo-block :title="t('customStyle')"> <demo-block :title="t('customStyle')">
<van-notice-bar <van-notice-bar
:text="t('shortText')" :text="t('haiku')"
color="#1989fa" color="#1989fa"
background="#ecf9ff" background="#ecf9ff"
left-icon="info-o" left-icon="info-o"
@ -64,9 +71,9 @@ const t = useTranslate({
:autoplay="3000" :autoplay="3000"
:show-indicators="false" :show-indicators="false"
> >
<van-swipe-item>{{ t('content') }} 1</van-swipe-item> <van-swipe-item>{{ t('poetry1') }}</van-swipe-item>
<van-swipe-item>{{ t('content') }} 2</van-swipe-item> <van-swipe-item>{{ t('poetry2') }}</van-swipe-item>
<van-swipe-item>{{ t('content') }} 3</van-swipe-item> <van-swipe-item>{{ t('poetry3') }}</van-swipe-item>
</van-swipe> </van-swipe>
</van-notice-bar> </van-notice-bar>
</demo-block> </demo-block>

8
packages/vant/src/notice-bar/test/__snapshots__/demo.spec.ts.snap
View File

@ -28,7 +28,7 @@ exports[`should render demo and match snapshot 1`] = `
<div style="transition-duration: 0s;" <div style="transition-duration: 0s;"
class="van-notice-bar__content" class="van-notice-bar__content"
> >
Some short text. Short Content
</div> </div>
</div> </div>
</div> </div>
@ -71,7 +71,7 @@ exports[`should render demo and match snapshot 1`] = `
<div style="transition-duration: 0s;" <div style="transition-duration: 0s;"
class="van-notice-bar__content" class="van-notice-bar__content"
> >
Some short text. Short Content
</div> </div>
</div> </div>
<i class="van-badge__wrapper van-icon van-icon-cross van-notice-bar__right-icon"> <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;" <div style="transition-duration: 0s;"
class="van-notice-bar__content" class="van-notice-bar__content"
> >
Some short text. Short Content
</div> </div>
</div> </div>
<i class="van-badge__wrapper van-icon van-icon-arrow van-notice-bar__right-icon"> <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;" <div style="transition-duration: 0s;"
class="van-notice-bar__content" class="van-notice-bar__content"
> >
Some short text. Short Content
</div> </div>
</div> </div>
</div> </div>