New Huajishe Check ChaoXing
This commit is contained in:
@@ -0,0 +1,53 @@
|
||||
:: BASE_DOC ::
|
||||
|
||||
## API
|
||||
|
||||
### NoticeBar Props
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
style | Object | - | CSS(Cascading Style Sheets) | N
|
||||
custom-style | Object | - | CSS(Cascading Style Sheets),used to set style on virtual component | N
|
||||
content | String / Array / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
|
||||
direction | String | horizontal | options: horizontal/vertical | N
|
||||
interval | Number | 2000 | \- | N
|
||||
marquee | Boolean / Object | false | Typescript:`boolean \| NoticeBarMarquee` `interface NoticeBarMarquee { speed?: number; loop?: number; delay?: number }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts) | N
|
||||
operation | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
|
||||
prefix-icon | String / Boolean / Object / Slot | true | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
|
||||
suffix-icon | String / Object / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
|
||||
theme | String | info | options: info/success/warning/error | N
|
||||
visible | Boolean | false | \- | N
|
||||
default-visible | Boolean | undefined | uncontrolled property | N
|
||||
|
||||
### NoticeBar Events
|
||||
|
||||
name | params | description
|
||||
-- | -- | --
|
||||
change | `(current: number, source: '' \| 'autoplay' \| 'touch')` | \-
|
||||
click | `(trigger: NoticeBarTrigger)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts)。<br/>`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`<br/>
|
||||
### NoticeBar External Classes
|
||||
|
||||
className | Description
|
||||
-- | --
|
||||
t-class | \-
|
||||
t-class-content | \-
|
||||
t-class-operation | \-
|
||||
t-class-prefix-icon | \-
|
||||
t-class-suffix-icon | \-
|
||||
|
||||
### CSS Variables
|
||||
|
||||
The component provides the following CSS variables, which can be used to customize styles.
|
||||
Name | Default Value | Description
|
||||
-- | -- | --
|
||||
--td-notice-bar-error-bg-color | @error-color-1 | -
|
||||
--td-notice-bar-error-color | @error-color | -
|
||||
--td-notice-bar-font-color | @text-color-primary | -
|
||||
--td-notice-bar-info-bg-color | @brand-color-light | -
|
||||
--td-notice-bar-info-color | @brand-color | -
|
||||
--td-notice-bar-operation-font-color | @brand-color | -
|
||||
--td-notice-bar-success-bg-color | @success-color-1 | -
|
||||
--td-notice-bar-success-color | @success-color | -
|
||||
--td-notice-bar-suffix-icon-color | @text-color-placeholder | -
|
||||
--td-notice-bar-warning-bg-color | @warning-color-1 | -
|
||||
--td-notice-bar-warning-color | @warning-color | -
|
||||
@@ -0,0 +1,124 @@
|
||||
---
|
||||
title: NoticeBar 公告栏
|
||||
description: 在导航栏下方,用于给用户显示提示消息。
|
||||
spline: message
|
||||
isComponent: true
|
||||
---
|
||||
|
||||
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-94%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-94%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-88%25-blue" /></span>
|
||||
|
||||
<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
|
||||
<svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
|
||||
<path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
|
||||
</svg>
|
||||
该组件于 0.9.0 版本上线,请留意版本。
|
||||
</div>
|
||||
|
||||
## 引入
|
||||
|
||||
全局引入,在 miniprogram 根目录下的`app.json`中配置,局部引入,在需要引入的页面或组件的`index.json`中配置。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
"t-notice-bar": "tdesign-miniprogram/notice-bar/notice-bar"
|
||||
}
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
<a href="https://developers.weixin.qq.com/s/ul8DximQ79SB" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
|
||||
|
||||
<blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
|
||||
<p>Tips: 请确保开发者工具为打开状态。导入开发者工具后,依次执行:npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p>
|
||||
</blockquote>
|
||||
|
||||
### 01 组件类型
|
||||
|
||||
纯文字的公告栏
|
||||
|
||||
{{ base }}
|
||||
|
||||
带图标的公告栏
|
||||
|
||||
{{ iconDemo }}
|
||||
|
||||
带关闭的公告栏
|
||||
|
||||
{{ suffixIcon }}
|
||||
|
||||
带入口的公告栏
|
||||
|
||||
{{ event }}
|
||||
|
||||
自定义样式的公告栏
|
||||
|
||||
{{ custom }}
|
||||
|
||||
自定义内容的公告栏
|
||||
|
||||
{{ customization }}
|
||||
|
||||
### 02 组件状态
|
||||
|
||||
公告栏类型有普通(info)、警示(warning)、成功(success)、错误(error)
|
||||
|
||||
{{ theme }}
|
||||
|
||||
### 03 可滚动公告栏
|
||||
|
||||
可滚动公告栏有水平(horizontal)和垂直(vertical)
|
||||
|
||||
{{ scrolling }}
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### NoticeBar Props
|
||||
|
||||
名称 | 类型 | 默认值 | 描述 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
style | Object | - | 样式 | N
|
||||
custom-style | Object | - | 样式,一般用于开启虚拟化组件节点场景 | N
|
||||
content | String / Array / Slot | - | 文本内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
|
||||
direction | String | horizontal | 滚动方向。可选项:horizontal/vertical | N
|
||||
interval | Number | 2000 | 间隔时间【仅在 direction='vertical' 有效】 | N
|
||||
marquee | Boolean / Object | false | 跑马灯效果。speed 指速度控制;loop 指循环播放次数,值为 -1 表示循环播放,值为 0 表示不循环播放;delay 表示延迟多久开始播放【仅在 direction='horizontal' 有效】。TS 类型:`boolean \| NoticeBarMarquee` `interface NoticeBarMarquee { speed?: number; loop?: number; delay?: number }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts) | N
|
||||
operation | String / Slot | - | 右侧额外信息。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
|
||||
prefix-icon | String / Boolean / Object / Slot | true | 前缀图标。值为字符串表示图标名称,值为 `false` 表示不显示前缀图标,值为 `Object` 类型,表示透传至 `icon`,不传表示使用主题图标。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
|
||||
suffix-icon | String / Object / Slot | - | 后缀图标。值为字符串表示图标名称。值为 `Object` 类型,表示透传至 `icon`,不传表示不显示后缀图标。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
|
||||
theme | String | info | 内置主题。可选项:info/success/warning/error | N
|
||||
visible | Boolean | false | 显示/隐藏 | N
|
||||
default-visible | Boolean | undefined | 显示/隐藏。非受控属性 | N
|
||||
|
||||
### NoticeBar Events
|
||||
|
||||
名称 | 参数 | 描述
|
||||
-- | -- | --
|
||||
change | `(current: number, source: '' \| 'autoplay' \| 'touch')` | 当 `direction="vertical"` 时轮播切换时触发
|
||||
click | `(trigger: NoticeBarTrigger)` | 点击事件。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/notice-bar/type.ts)。<br/>`type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';`<br/>
|
||||
### NoticeBar External Classes
|
||||
|
||||
类名 | 描述
|
||||
-- | --
|
||||
t-class | 根节点样式类
|
||||
t-class-content | 内容样式类
|
||||
t-class-operation | 右侧额外信息样式类
|
||||
t-class-prefix-icon | 前置图标样式类
|
||||
t-class-suffix-icon | 后置图标样式类
|
||||
|
||||
### CSS Variables
|
||||
|
||||
组件提供了下列 CSS 变量,可用于自定义样式。
|
||||
名称 | 默认值 | 描述
|
||||
-- | -- | --
|
||||
--td-notice-bar-error-bg-color | @error-color-1 | -
|
||||
--td-notice-bar-error-color | @error-color | -
|
||||
--td-notice-bar-font-color | @text-color-primary | -
|
||||
--td-notice-bar-info-bg-color | @brand-color-light | -
|
||||
--td-notice-bar-info-color | @brand-color | -
|
||||
--td-notice-bar-operation-font-color | @brand-color | -
|
||||
--td-notice-bar-success-bg-color | @success-color-1 | -
|
||||
--td-notice-bar-success-color | @success-color | -
|
||||
--td-notice-bar-suffix-icon-color | @text-color-placeholder | -
|
||||
--td-notice-bar-warning-bg-color | @warning-color-1 | -
|
||||
--td-notice-bar-warning-color | @warning-color | -
|
||||
36
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/notice-bar/notice-bar.d.ts
vendored
Normal file
36
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/notice-bar/notice-bar.d.ts
vendored
Normal file
@@ -0,0 +1,36 @@
|
||||
import { SuperComponent, ComponentsOptionsType } from '../common/src/index';
|
||||
export default class NoticeBar extends SuperComponent {
|
||||
externalClasses: string[];
|
||||
options: ComponentsOptionsType;
|
||||
properties: import("./type").TdNoticeBarProps;
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
loop: number;
|
||||
__ready: boolean;
|
||||
};
|
||||
observers: {
|
||||
marquee(val: any): void;
|
||||
visible(visible: any): void;
|
||||
prefixIcon(prefixIcon: any): void;
|
||||
suffixIcon(v: any): void;
|
||||
content(): void;
|
||||
};
|
||||
lifetimes: {
|
||||
created(): void;
|
||||
detached(): void;
|
||||
ready(): void;
|
||||
};
|
||||
methods: {
|
||||
initAnimation(): void;
|
||||
startScrollAnimation(isFirstScroll?: boolean): void;
|
||||
show(): void;
|
||||
clearNoticeBarAnimation(): void;
|
||||
setPrefixIcon(v: any): void;
|
||||
onChange(e: WechatMiniprogram.SwiperChange): void;
|
||||
clickPrefixIcon(): void;
|
||||
clickContent(): void;
|
||||
clickSuffixIcon(): void;
|
||||
clickOperation(): void;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,192 @@
|
||||
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
||||
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||||
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||||
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||||
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||||
};
|
||||
import { SuperComponent, wxComponent } from '../common/src/index';
|
||||
import { getRect, getAnimationFrame, calcIcon } from '../common/utils';
|
||||
import props from './props';
|
||||
import config from '../common/config';
|
||||
const { prefix } = config;
|
||||
const name = `${prefix}-notice-bar`;
|
||||
const THEME_ICON = {
|
||||
info: 'info-circle-filled',
|
||||
success: 'check-circle-filled',
|
||||
warning: 'info-circle-filled',
|
||||
error: 'error-circle-filled',
|
||||
};
|
||||
let NoticeBar = class NoticeBar extends SuperComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.externalClasses = [
|
||||
`${prefix}-class`,
|
||||
`${prefix}-class-content`,
|
||||
`${prefix}-class-prefix-icon`,
|
||||
`${prefix}-class-operation`,
|
||||
`${prefix}-class-suffix-icon`,
|
||||
];
|
||||
this.options = {
|
||||
multipleSlots: true,
|
||||
pureDataPattern: /^__/,
|
||||
};
|
||||
this.properties = props;
|
||||
this.data = {
|
||||
prefix,
|
||||
classPrefix: name,
|
||||
loop: -1,
|
||||
__ready: false,
|
||||
};
|
||||
this.observers = {
|
||||
marquee(val) {
|
||||
if (JSON.stringify(val) === '{}' || JSON.stringify(val) === 'true') {
|
||||
this.setData({
|
||||
marquee: {
|
||||
speed: 50,
|
||||
loop: -1,
|
||||
delay: 0,
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
visible(visible) {
|
||||
if (!this.data.__ready)
|
||||
return;
|
||||
if (visible) {
|
||||
this.show();
|
||||
}
|
||||
else {
|
||||
this.clearNoticeBarAnimation();
|
||||
}
|
||||
},
|
||||
prefixIcon(prefixIcon) {
|
||||
this.setPrefixIcon(prefixIcon);
|
||||
},
|
||||
suffixIcon(v) {
|
||||
this.setData({
|
||||
_suffixIcon: calcIcon(v),
|
||||
});
|
||||
},
|
||||
content() {
|
||||
if (!this.data.__ready)
|
||||
return;
|
||||
this.clearNoticeBarAnimation();
|
||||
this.initAnimation();
|
||||
},
|
||||
};
|
||||
this.lifetimes = {
|
||||
created() {
|
||||
this.resetAnimation = wx.createAnimation({
|
||||
duration: 0,
|
||||
timingFunction: 'linear',
|
||||
});
|
||||
},
|
||||
detached() {
|
||||
this.clearNoticeBarAnimation();
|
||||
},
|
||||
ready() {
|
||||
this.show();
|
||||
this.setData({ __ready: true });
|
||||
},
|
||||
};
|
||||
this.methods = {
|
||||
initAnimation() {
|
||||
const warpID = `.${name}__content-wrap`;
|
||||
const nodeID = `.${name}__content`;
|
||||
getAnimationFrame(this, () => {
|
||||
Promise.all([getRect(this, nodeID), getRect(this, warpID)])
|
||||
.then(([nodeRect, wrapRect]) => {
|
||||
const { marquee } = this.properties;
|
||||
if (nodeRect == null || wrapRect == null || !nodeRect.width || !wrapRect.width || marquee === false) {
|
||||
return;
|
||||
}
|
||||
if (marquee || wrapRect.width < nodeRect.width) {
|
||||
const speeding = marquee.speed || 50;
|
||||
const delaying = marquee.delay || 0;
|
||||
const animationDuration = ((wrapRect.width + nodeRect.width) / speeding) * 1000;
|
||||
const firstAnimationDuration = (nodeRect.width / speeding) * 1000;
|
||||
this.setData({
|
||||
wrapWidth: Number(wrapRect.width),
|
||||
nodeWidth: Number(nodeRect.width),
|
||||
animationDuration: animationDuration,
|
||||
delay: delaying,
|
||||
loop: marquee.loop - 1,
|
||||
firstAnimationDuration: firstAnimationDuration,
|
||||
});
|
||||
marquee.loop !== 0 && this.startScrollAnimation(true);
|
||||
}
|
||||
})
|
||||
.catch(() => { });
|
||||
});
|
||||
},
|
||||
startScrollAnimation(isFirstScroll = false) {
|
||||
this.clearNoticeBarAnimation();
|
||||
const { wrapWidth, nodeWidth, firstAnimationDuration, animationDuration, delay } = this.data;
|
||||
const delayTime = isFirstScroll ? delay : 0;
|
||||
const durationTime = isFirstScroll ? firstAnimationDuration : animationDuration;
|
||||
this.setData({
|
||||
animationData: this.resetAnimation
|
||||
.translateX(isFirstScroll ? 0 : wrapWidth)
|
||||
.step()
|
||||
.export(),
|
||||
});
|
||||
getAnimationFrame(this, () => {
|
||||
this.setData({
|
||||
animationData: wx
|
||||
.createAnimation({ duration: durationTime, timingFunction: 'linear', delay: delayTime })
|
||||
.translateX(-nodeWidth)
|
||||
.step()
|
||||
.export(),
|
||||
});
|
||||
});
|
||||
this.nextAnimationContext = setTimeout(() => {
|
||||
if (this.data.loop > 0) {
|
||||
this.data.loop -= 1;
|
||||
this.startScrollAnimation();
|
||||
}
|
||||
else if (this.data.loop === 0) {
|
||||
this.setData({ animationData: this.resetAnimation.translateX(0).step().export() });
|
||||
}
|
||||
else if (this.data.loop < 0) {
|
||||
this.startScrollAnimation();
|
||||
}
|
||||
}, durationTime + delayTime);
|
||||
},
|
||||
show() {
|
||||
this.clearNoticeBarAnimation();
|
||||
this.setPrefixIcon(this.properties.prefixIcon);
|
||||
this.initAnimation();
|
||||
},
|
||||
clearNoticeBarAnimation() {
|
||||
this.nextAnimationContext && clearTimeout(this.nextAnimationContext);
|
||||
this.nextAnimationContext = null;
|
||||
},
|
||||
setPrefixIcon(v) {
|
||||
const { theme } = this.properties;
|
||||
this.setData({
|
||||
_prefixIcon: calcIcon(v, THEME_ICON[theme]),
|
||||
});
|
||||
},
|
||||
onChange(e) {
|
||||
const { current, source } = e.detail;
|
||||
this.triggerEvent('change', { current, source });
|
||||
},
|
||||
clickPrefixIcon() {
|
||||
this.triggerEvent('click', { trigger: 'prefix-icon' });
|
||||
},
|
||||
clickContent() {
|
||||
this.triggerEvent('click', { trigger: 'content' });
|
||||
},
|
||||
clickSuffixIcon() {
|
||||
this.triggerEvent('click', { trigger: 'suffix-icon' });
|
||||
},
|
||||
clickOperation() {
|
||||
this.triggerEvent('click', { trigger: 'operation' });
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
NoticeBar = __decorate([
|
||||
wxComponent()
|
||||
], NoticeBar);
|
||||
export default NoticeBar;
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"styleIsolation": "apply-shared",
|
||||
"usingComponents": {
|
||||
"t-icon": "../icon/icon"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
<import src="../common/template/icon.wxml" />
|
||||
<wxs src="../common/utils.wxs" module="_" />
|
||||
|
||||
<view
|
||||
wx:if="{{visible}}"
|
||||
style="{{_._style([style, customStyle])}}"
|
||||
class="{{classPrefix}} {{classPrefix}}--{{theme}} class {{prefix}}-class"
|
||||
>
|
||||
<!-- prefixIcon -->
|
||||
<view class="{{classPrefix}}__prefix-icon" bind:tap="clickPrefixIcon">
|
||||
<slot name="prefix-icon" />
|
||||
<template
|
||||
wx:if="{{_prefixIcon}}"
|
||||
is="icon"
|
||||
data="{{tClass: prefix + '-class-prefix-icon', ..._prefixIcon }}"
|
||||
></template>
|
||||
</view>
|
||||
|
||||
<!-- content -->
|
||||
<view class="{{classPrefix}}__content-wrap" bind:tap="clickContent">
|
||||
<!-- 垂直滚动通知:基于swiper实现,适用信息量短的多条公告消息,超出省略 -->
|
||||
<view wx:if="{{ direction === 'vertical' && _.isArray(content) }}">
|
||||
<swiper
|
||||
autoplay="true"
|
||||
vertical="true"
|
||||
circular="true"
|
||||
interval="{{interval}}"
|
||||
display-multiple-items="1"
|
||||
class="{{classPrefix}}__content {{classPrefix}}__content--vertical"
|
||||
bindchange="onChange"
|
||||
>
|
||||
<block wx:for="{{content}}" wx:key="index">
|
||||
<swiper-item>
|
||||
<view class="{{classPrefix}}__content--vertical-item"> {{item}} </view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
</view>
|
||||
<view
|
||||
wx:else
|
||||
class="{{classPrefix}}__content {{prefix}}-class-content {{ !marquee ? classPrefix + '__content-wrapable' : ''}}"
|
||||
animation="{{ animationData }}"
|
||||
>
|
||||
<block wx:if="{{content}}">{{content}}</block>
|
||||
<slot name="content" />
|
||||
<view class="{{classPrefix}}__operation {{prefix}}-class-operation" catch:tap="clickOperation">
|
||||
<block wx:if="{{ operation }}">{{operation}}</block>
|
||||
<slot name="operation" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- suffixIcon -->
|
||||
<view class="{{classPrefix}}__suffix-icon" bind:tap="clickSuffixIcon">
|
||||
<slot name="suffix-icon" />
|
||||
<template
|
||||
wx:if="{{_suffixIcon}}"
|
||||
is="icon"
|
||||
data="{{tClass: prefix + '-class-suffix-icon', ..._suffixIcon }}"
|
||||
></template>
|
||||
</view>
|
||||
</view>
|
||||
@@ -0,0 +1,103 @@
|
||||
.t-float-left {
|
||||
float: left;
|
||||
}
|
||||
.t-float-right {
|
||||
float: right;
|
||||
}
|
||||
@keyframes tdesign-fade-out {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.hotspot-expanded.relative {
|
||||
position: relative;
|
||||
}
|
||||
.hotspot-expanded::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
.t-notice-bar {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 26rpx 32rpx;
|
||||
font-size: var(--td-font-size-base, 28rpx);
|
||||
}
|
||||
.t-notice-bar__content-wrap {
|
||||
flex: 1;
|
||||
overflow-x: hidden;
|
||||
line-height: 44rpx;
|
||||
color: var(--td-notice-bar-font-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
|
||||
}
|
||||
.t-notice-bar__content {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.t-notice-bar__content-wrapable {
|
||||
white-space: normal;
|
||||
}
|
||||
.t-notice-bar__content--vertical {
|
||||
display: block;
|
||||
height: 44rpx;
|
||||
line-height: 44rpx;
|
||||
}
|
||||
.t-notice-bar__content--vertical-item {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.t-notice-bar__prefix-icon {
|
||||
color: inherit;
|
||||
}
|
||||
.t-notice-bar__prefix-icon:not(:empty) {
|
||||
padding-right: var(--td-spacer, 16rpx);
|
||||
width: 44rpx;
|
||||
}
|
||||
.t-notice-bar__suffix-icon {
|
||||
color: var(--td-notice-bar-suffix-icon-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4))));
|
||||
}
|
||||
.t-notice-bar__prefix-icon,
|
||||
.t-notice-bar__suffix-icon {
|
||||
font-size: 44rpx;
|
||||
}
|
||||
.t-notice-bar__prefix-icon:empty,
|
||||
.t-notice-bar__suffix-icon:empty {
|
||||
display: none;
|
||||
}
|
||||
.t-notice-bar__operation {
|
||||
display: inline-flex;
|
||||
vertical-align: top;
|
||||
color: var(--td-notice-bar-operation-font-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
font-weight: 700;
|
||||
}
|
||||
.t-notice-bar__operation:empty {
|
||||
display: none;
|
||||
}
|
||||
.t-notice-bar__suffix-icon:not(:empty) {
|
||||
padding-left: var(--td-spacer, 16rpx);
|
||||
width: 44rpx;
|
||||
}
|
||||
.t-notice-bar--info {
|
||||
color: var(--td-notice-bar-info-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
|
||||
background-color: var(--td-notice-bar-info-bg-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
|
||||
}
|
||||
.t-notice-bar--success {
|
||||
color: var(--td-notice-bar-success-color, var(--td-success-color, var(--td-success-color-5, #2ba471)));
|
||||
background-color: var(--td-notice-bar-success-bg-color, var(--td-success-color-1, #e3f9e9));
|
||||
}
|
||||
.t-notice-bar--warning {
|
||||
color: var(--td-notice-bar-warning-color, var(--td-warning-color, var(--td-warning-color-5, #e37318)));
|
||||
background-color: var(--td-notice-bar-warning-bg-color, var(--td-warning-color-1, #fff1e9));
|
||||
}
|
||||
.t-notice-bar--error {
|
||||
color: var(--td-notice-bar-error-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
|
||||
background-color: var(--td-notice-bar-error-bg-color, var(--td-error-color-1, #fff0ed));
|
||||
}
|
||||
3
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/notice-bar/props.d.ts
vendored
Normal file
3
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/notice-bar/props.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
import { TdNoticeBarProps } from './type';
|
||||
declare const props: TdNoticeBarProps;
|
||||
export default props;
|
||||
@@ -0,0 +1,40 @@
|
||||
const props = {
|
||||
content: {
|
||||
type: null,
|
||||
},
|
||||
direction: {
|
||||
type: String,
|
||||
value: 'horizontal',
|
||||
},
|
||||
interval: {
|
||||
type: Number,
|
||||
value: 2000,
|
||||
},
|
||||
marquee: {
|
||||
type: null,
|
||||
value: false,
|
||||
},
|
||||
operation: {
|
||||
type: String,
|
||||
},
|
||||
prefixIcon: {
|
||||
type: null,
|
||||
value: true,
|
||||
},
|
||||
suffixIcon: {
|
||||
type: null,
|
||||
},
|
||||
theme: {
|
||||
type: String,
|
||||
value: 'info',
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
value: null,
|
||||
},
|
||||
defaultVisible: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
47
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/notice-bar/type.d.ts
vendored
Normal file
47
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/notice-bar/type.d.ts
vendored
Normal file
@@ -0,0 +1,47 @@
|
||||
export interface TdNoticeBarProps {
|
||||
content?: {
|
||||
type: null;
|
||||
value?: string | string[];
|
||||
};
|
||||
direction?: {
|
||||
type: StringConstructor;
|
||||
value?: 'horizontal' | 'vertical';
|
||||
};
|
||||
interval?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
marquee?: {
|
||||
type: null;
|
||||
value?: boolean | NoticeBarMarquee;
|
||||
};
|
||||
operation?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
prefixIcon?: {
|
||||
type: null;
|
||||
value?: string | boolean | object;
|
||||
};
|
||||
suffixIcon?: {
|
||||
type: null;
|
||||
value?: string | object;
|
||||
};
|
||||
theme?: {
|
||||
type: StringConstructor;
|
||||
value?: 'info' | 'success' | 'warning' | 'error';
|
||||
};
|
||||
visible?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
defaultVisible?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
};
|
||||
}
|
||||
export interface NoticeBarMarquee {
|
||||
speed?: number;
|
||||
loop?: number;
|
||||
delay?: number;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export {};
|
||||
Reference in New Issue
Block a user