forked from Tencent/tdesign-mobile-vue
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(notice-bar): new notice-bar (Tencent#654)
* feat: update api * refactor: new notice-bar * test: update snap * docs: update docs * docs: update docs * fix: 修复图标&补充content点击事件 --------- Co-authored-by: anlyyao <anly_yaw@163.com>
- Loading branch information
1 parent
c8fbdbd
commit fa5ec94
Showing
18 changed files
with
1,484 additions
and
1,523 deletions.
There are no files selected for viewing
2,587 changes: 1,261 additions & 1,326 deletions
2,587
src/notice-bar/__test__/__snapshots__/demo.test.jsx.snap
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,11 +1,3 @@ | ||
<template> | ||
<div class="noticebar-demo"> | ||
<t-notice-bar :visible="visible" :content="content" :prefix-icon="false" /> | ||
</div> | ||
<t-notice-bar visible content="这是一条普通的通知信息" :prefix-icon="false" /> | ||
</template> | ||
<script lang="ts" setup> | ||
import { ref } from 'vue'; | ||
const content = ref<string>('提示文字描述提示文字描述提示文字描述'); | ||
const visible = ref<boolean>(true); | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,25 +1,26 @@ | ||
<template> | ||
<div class="noticebar-demo"> | ||
<t-notice-bar class="cover-class" visible content="提示文字描述提示文字描述提示文字描述"> | ||
<template #prefixIcon> | ||
<sound-icon /> | ||
</template> | ||
</t-notice-bar> | ||
</div> | ||
<t-notice-bar class="cover-class" visible content="提示文字描述提示文字描述提示文字描述"> | ||
<template #prefixIcon> | ||
<SoundIcon /> | ||
</template> | ||
<template #suffixIcon> | ||
<ChevronRightIcon /> | ||
</template> | ||
</t-notice-bar> | ||
</template> | ||
|
||
<script lang="ts" setup> | ||
import { SoundIcon } from 'tdesign-icons-vue-next'; | ||
import { SoundIcon, ChevronRightIcon } from 'tdesign-icons-vue-next'; | ||
</script> | ||
|
||
<style lang="less"> | ||
// 覆盖组件内部样式 | ||
.cover-class { | ||
.t-icon { | ||
color: #ffffff !important; | ||
color: rgba(0, 0, 0, 0.9) !important; | ||
} | ||
.t-notice-bar__text { | ||
color: #ffffff !important; | ||
} | ||
background-color: #a6a6a6; | ||
background-color: rgba(243, 243, 243, 1); | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,52 +1,14 @@ | ||
<template> | ||
<div> | ||
<t-notice-bar | ||
visible | ||
:prefix-icon="false" | ||
content="提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述" | ||
/> | ||
<t-notice-bar | ||
visible | ||
content="提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述" | ||
@click="handleClick" | ||
/> | ||
<t-notice-bar | ||
visible | ||
content="提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述" | ||
extra="详情" | ||
:suffix-icon="arrowRight" | ||
@click="handleClick" | ||
/> | ||
<!-- slot实现自定义content内容 --> | ||
<t-notice-bar visible> | ||
<template #content> | ||
提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述 | ||
<text class="extra" @click="clickDetail"> 详情 </text> | ||
</template> | ||
<template #suffixIcon> | ||
<CloseIcon /> | ||
</template> | ||
</t-notice-bar> | ||
</div> | ||
<t-notice-bar visible content="提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述提示文字描述"> | ||
<template #operation> | ||
<t-link style="margin-left: 2px" theme="primary">详情</t-link> | ||
</template> | ||
<template #suffixIcon> | ||
<CloseIcon /> | ||
</template> | ||
</t-notice-bar> | ||
</template> | ||
<script lang="ts" setup> | ||
import { h } from 'vue'; | ||
import { CloseIcon, ChevronRightIcon } from 'tdesign-icons-vue-next'; | ||
import { Toast } from 'tdesign-mobile-vue'; | ||
|
||
const closeIcon = () => h(CloseIcon); | ||
const arrowRight = () => h(ChevronRightIcon); | ||
const handleClick = (context: string) => { | ||
Toast(`click:${context}`); | ||
}; | ||
const clickDetail = () => { | ||
Toast(`click detail text`); | ||
}; | ||
<script lang="ts" setup> | ||
import { CloseIcon } from 'tdesign-icons-vue-next'; | ||
</script> | ||
|
||
<style lang="less"> | ||
.extra { | ||
font-weight: 700; | ||
text-decoration: underline; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
<template> | ||
<t-notice-bar visible content="提示文字描述提示文字描述提示文字描述" /> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,35 +1,54 @@ | ||
<template> | ||
<div class="noticebar-demo"> | ||
<tdesign-demo-block title="01 类型" summary="静态消息公告栏"> | ||
<div class="tdesign-mobile-demo"> | ||
<h1 class="title">NoticeBar 公告栏</h1> | ||
<p class="summary">在导航栏下方,用于给用户显示提示消息。</p> | ||
<tdesign-demo-block title="01 组件类型" summary="纯文字的公告栏"> | ||
<baseDemo /> | ||
</tdesign-demo-block> | ||
<tdesign-demo-block summary="带图标静态公告栏"> | ||
<tdesign-demo-block summary="带图标的公告栏"> | ||
<iconDemo /> | ||
</tdesign-demo-block> | ||
<tdesign-demo-block summary="带操作公告栏"> | ||
<eventDemo /> | ||
<tdesign-demo-block summary="带关闭的公告栏"> | ||
<suffixIcon /> | ||
</tdesign-demo-block> | ||
<tdesign-demo-block summary="滚动公告栏"> | ||
<scrollDemo /> | ||
<tdesign-demo-block summary="带入口的公告栏"> | ||
<event /> | ||
</tdesign-demo-block> | ||
<tdesign-demo-block summary="自定义样式"> | ||
<tdesign-demo-block summary="自定样式的公告栏"> | ||
<customDemo /> | ||
</tdesign-demo-block> | ||
<tdesign-demo-block title="02 状态"> | ||
<tdesign-demo-block summary="自定义内容的公告栏"> | ||
<customizationDemo /> | ||
</tdesign-demo-block> | ||
<tdesign-demo-block | ||
title="02 组件状态" | ||
summary="公告栏类型有普通(info)、警示(warning)、成功(success)、错误(error)" | ||
> | ||
<themeDemo /> | ||
</tdesign-demo-block> | ||
<tdesign-demo-block title="03 多行文字公告栏"> | ||
<customizationDemo /> | ||
<tdesign-demo-block title="03 可滚动的公告栏" summary="可滚动公告栏有水平 (horizontal) 和垂直 (vertical)"> | ||
<scrollDemo /> | ||
</tdesign-demo-block> | ||
</div> | ||
</template> | ||
|
||
<script lang="ts" setup> | ||
import baseDemo from './base.vue'; | ||
import iconDemo from './icon.vue'; | ||
import eventDemo from './event.vue'; | ||
import scrollDemo from './scrolling.vue'; | ||
import iconDemo from './iconDemo.vue'; | ||
import suffixIcon from './suffixIcon.vue'; | ||
import event from './event.vue'; | ||
import customDemo from './custom.vue'; | ||
import themeDemo from './theme.vue'; | ||
import customizationDemo from './customization.vue'; | ||
import themeDemo from './theme.vue'; | ||
import scrollDemo from './scrolling.vue'; | ||
</script> | ||
|
||
<style> | ||
.tdesign-mobile-demo { | ||
background-color: #fff; | ||
} | ||
.notice-bar-demo-block { | ||
margin-bottom: 16px; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,15 +1,18 @@ | ||
<template> | ||
<div class="noticebar-demo"> | ||
<!-- 不带静态图标 --> | ||
<t-notice-bar :visible="visible" :prefix-icon="false" marquee :content="content" /> | ||
<!-- 默认带静态图标 --> | ||
<t-notice-bar :visible="visible" marquee :content="content" /> | ||
</div> | ||
<t-notice-bar class="notice-bar-demo-block" visible :prefix-icon="false" marquee :content="content" /> | ||
<t-notice-bar class="notice-bar-demo-block" visible marquee :content="content" /> | ||
<t-notice-bar visible marquee :content="content1" direction="vertical"> | ||
<template #prefixIcon> | ||
<SoundIcon /> | ||
</template> | ||
</t-notice-bar> | ||
</template> | ||
|
||
<script lang="ts" setup> | ||
import { ref } from 'vue'; | ||
import { SoundIcon } from 'tdesign-icons-vue-next'; | ||
const content = ref<string>('提示文字描述提示文字描述提示文字描述'); | ||
const content = ref<string>('提示文字描述提示文字描述提示文字描述提示文字描述文'); | ||
const content1 = ref(['君不见', '高堂明镜悲白发', '朝如青丝暮成雪', '人生得意须尽欢', '莫使金樽空对月']); | ||
const visible = ref<boolean>(true); | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
<template> | ||
<t-notice-bar visible content="这是一条普通的通知信息"> | ||
<template #suffixIcon> | ||
<CloseIcon /> | ||
</template> | ||
</t-notice-bar> | ||
</template> | ||
|
||
<script lang="ts" setup> | ||
import { CloseIcon } from 'tdesign-icons-vue-next'; | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,16 @@ | ||
<template> | ||
<div class="noticebar-demo"> | ||
<t-notice-bar visible content="默认状态公告栏默认状态公告栏"></t-notice-bar> | ||
<t-notice-bar visible theme="success" content="成功状态公告栏成功状态公告栏"></t-notice-bar> | ||
<t-notice-bar visible theme="warning" content="警示状态公告栏警示状态公告栏"></t-notice-bar> | ||
<t-notice-bar visible theme="error" content="错误状态公告栏错误状态公告栏"></t-notice-bar> | ||
</div> | ||
<t-notice-bar class="notice-bar-demo-block" visible content="默认状态公告栏默认状态公告栏"></t-notice-bar> | ||
<t-notice-bar | ||
class="notice-bar-demo-block" | ||
visible | ||
theme="success" | ||
content="成功状态公告栏成功状态公告栏" | ||
></t-notice-bar> | ||
<t-notice-bar | ||
class="notice-bar-demo-block" | ||
visible | ||
theme="warning" | ||
content="警示状态公告栏警示状态公告栏" | ||
></t-notice-bar> | ||
<t-notice-bar visible theme="error" content="错误状态公告栏错误状态公告栏"></t-notice-bar> | ||
</template> | ||
|
||
<script lang="ts" setup></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
:: BASE_DOC :: | ||
|
||
## API | ||
### NoticeBar Props | ||
|
||
name | type | default | description | required | ||
-- | -- | -- | -- | -- | ||
content | String / Array / Slot / Function | - | Typescript:`string \| string[] \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N | ||
direction | String | horizontal | options:horizontal/vertical | N | ||
marquee | Boolean / Object | false | Typescript:`boolean \| DrawMarquee` `interface DrawMarquee { speed?: number; loop?: number; delay?: number }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/notice-bar/type.ts) | N | ||
operation | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N | ||
prefixIcon | Boolean / Slot / Function | - | Typescript:`Boolean \ | TNode \| Function`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N | ||
suffixIcon | Slot / Function | - | Typescript:`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N | ||
theme | String | info | options:info/success/warning/error | N | ||
visible | Boolean | false | `v-model` and `v-model:visible` is supported | N | ||
defaultVisible | Boolean | false | uncontrolled property | N | ||
onClick | Function | | Typescript:`(trigger: NoticeBarTrigger) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/notice-bar/type.ts)。<br/>`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`<br/> | N | ||
|
||
### NoticeBar Events | ||
|
||
name | params | description | ||
-- | -- | -- | ||
click | `(trigger: NoticeBarTrigger)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/notice-bar/type.ts)。<br/>`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`<br/> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.