blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-26 11:36:33 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] NoticeBar: update style (#699)

Browse Source
This commit is contained in:
neverland 2018-10-08 16:52:52 +08:00 committed by GitHub
parent 21fcadf1d4
commit 464fccd155
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 19 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/notice-bar/README.md
View File

@ -57,8 +57,8 @@
| speed | 滚动速率 (px/s) | `Number` | `50` | | speed | 滚动速率 (px/s) | `Number` | `50` |
| scrollable | 是否在长度溢出时滚动播放 | `Boolean` | `true` | | scrollable | 是否在长度溢出时滚动播放 | `Boolean` | `true` |
| left-icon | 左侧图标图片 URL | `String` | - | | left-icon | 左侧图标图片 URL | `String` | - |
| color | 文本颜色 | `String` | `#f60` | | color | 文本颜色 | `String` | `#ed6a0c` |
| background | 滚动条背景 | `String` | `#fff7cc` | | background | 滚动条背景 | `String` | `#fffbe8` |
| open-type | 微信开放能力 | `String` | `navigate` | | open-type | 微信开放能力 | `String` | `navigate` |
### Event ### Event

24
packages/notice-bar/index.less
View File

@ -1,18 +1,19 @@
.van-notice-bar { .van-notice-bar {
display: flex; display: flex;
padding: 9px 10px; height: 40px;
font-size: 12px; padding: 0 15px;
line-height: 1.5; font-size: 14px;
line-height: 24px;
align-items: center;
&--within-icon { &--within-icon {
position: relative; position: relative;
padding-right: 30px; padding-right: 40px;
} }
&__left-icon { &__left-icon {
height: 18px; height: 18px;
min-width: 20px; min-width: 20px;
padding-top: 1px;
box-sizing: border-box; box-sizing: border-box;
> image { > image {
@ -24,20 +25,23 @@
&__right-icon { &__right-icon {
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 10px; right: 15px;
font-size: 15px; font-size: 16px;
line-height: 1;
} }
&__content-wrap { &__content-wrap {
position: relative;
flex: 1; flex: 1;
height: 18px; height: 24px;
overflow: hidden; overflow: hidden;
position: relative;
} }
&__content { &__content {
position: absolute; position: absolute;
white-space: nowrap; white-space: nowrap;
&.van-ellipsis {
max-width: 100%;
}
} }
} }

4
packages/notice-bar/index.ts
View File

@ -1,7 +1,7 @@
import { VantComponent } from '../common/component'; import { VantComponent } from '../common/component';
const FONT_COLOR = '#f60'; const FONT_COLOR = '#ed6a0c';
const BG_COLOR = '#fff7cc'; const BG_COLOR = '#fffbe8';
VantComponent({ VantComponent({
props: { props: {

2
packages/notice-bar/index.wxml
View File

@ -8,7 +8,7 @@
<image src="{{ leftIcon }}" /> <image src="{{ leftIcon }}" />
</view> </view>
<view class="van-notice-bar__content-wrap"> <view class="van-notice-bar__content-wrap">
<view class="van-notice-bar__content" animation="{{ animationData }}"> <view class="van-notice-bar__content {{ scrollable ? '' : 'van-ellipsis' }}" animation="{{ animationData }}">
{{ text }} {{ text }}
</view> </view>
</view> </view>