docs(Notify): update demo

This commit is contained in:
chenjiahan 2020-08-16 15:13:03 +08:00
parent 272a89423e
commit d069a0d0df
2 changed files with 53 additions and 71 deletions

View File

@ -1,52 +1,29 @@
<template> <template>
<demo-section> <demo-section>
<demo-block :title="t('basicUsage')"> <demo-block card :title="t('basicUsage')">
<van-button type="danger" :text="t('basicUsage')" @click="showNotify" /> <van-cell is-link :title="t('basicUsage')" @click="showNotify" />
</demo-block> </demo-block>
<demo-block :title="t('notifyType')"> <demo-block card :title="t('notifyType')">
<div style="margin-bottom: 15px;"> <van-cell is-link :title="t('primary')" @click="showType('primary')" />
<van-button <van-cell is-link :title="t('success')" @click="showType('success')" />
type="info" <van-cell is-link :title="t('danger')" @click="showType('danger')" />
:text="t('primary')" <van-cell is-link :title="t('warning')" @click="showType('warning')" />
@click="showType('primary')"
/>
<van-button
type="primary"
:text="t('success')"
@click="showType('success')"
/>
</div>
<van-button
type="danger"
:text="t('danger')"
@click="showType('danger')"
/>
<van-button
type="warning"
:text="t('warning')"
@click="showType('warning')"
/>
</demo-block> </demo-block>
<demo-block :title="t('customNotify')"> <demo-block card :title="t('customNotify')">
<van-button <van-cell is-link :title="t('customColor')" @click="showCustomColor" />
type="primary" <van-cell
:text="t('customColor')" is-link
@click="showCustomColor" :title="t('customDuration')"
/>
<van-button
type="primary"
:text="t('customDuration')"
@click="showCustomDuration" @click="showCustomDuration"
/> />
</demo-block> </demo-block>
<demo-block :title="t('componentCall')"> <demo-block card :title="t('componentCall')">
<van-button <van-cell
type="primary" is-link
:text="t('componentCall')" :title="t('componentCall')"
@click="showComponentCall" @click="showComponentCall"
/> />
@ -129,15 +106,3 @@ export default {
}, },
}; };
</script> </script>
<style lang="less">
@import '../../style/var';
.demo-notify {
background-color: @white;
.van-button {
margin-left: @padding-md;
}
}
</style>

View File

@ -2,28 +2,45 @@
exports[`renders demo correctly 1`] = ` exports[`renders demo correctly 1`] = `
<div> <div>
<div><button class="van-button van-button--danger van-button--normal">
<div class="van-button__content"><span class="van-button__text">基础用法</span></div>
</button></div>
<div> <div>
<div style="margin-bottom: 15px;"><button class="van-button van-button--info van-button--normal"> <div role="button" tabindex="0" class="van-cell van-cell--clickable">
<div class="van-button__content"><span class="van-button__text">主要通知</span></div> <div class="van-cell__title"><span>基础用法</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
</button> <button class="van-button van-button--primary van-button--normal"> <!----></i>
<div class="van-button__content"><span class="van-button__text">成功通知</span></div> </div>
</button></div> <button class="van-button van-button--danger van-button--normal">
<div class="van-button__content"><span class="van-button__text">危险通知</span></div>
</button> <button class="van-button van-button--warning van-button--normal">
<div class="van-button__content"><span class="van-button__text">警告通知</span></div>
</button>
</div> </div>
<div><button class="van-button van-button--primary van-button--normal"> <div>
<div class="van-button__content"><span class="van-button__text">自定义颜色</span></div> <div role="button" tabindex="0" class="van-cell van-cell--clickable">
</button> <button class="van-button van-button--primary van-button--normal"> <div class="van-cell__title"><span>主要通知</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
<div class="van-button__content"><span class="van-button__text">自定义时长</span></div> <!----></i>
</button></div> </div>
<div><button class="van-button van-button--primary van-button--normal"> <div role="button" tabindex="0" class="van-cell van-cell--clickable">
<div class="van-button__content"><span class="van-button__text">组件调用</span></div> <div class="van-cell__title"><span>成功通知</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
</button> <!----></i>
</div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>危险通知</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>警告通知</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
</div>
<div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>自定义颜色</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>自定义时长</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
</div>
<div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable">
<div class="van-cell__title"><span>组件调用</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
<!----></i>
</div>
<!----> <!---->
</div> </div>
</div> </div>