白色主题
This commit is contained in:
@@ -15,7 +15,7 @@ export default class ActionSheet extends SuperComponent {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
customStyle?: {
|
||||
style?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
|
||||
@@ -3,9 +3,8 @@
|
||||
"usingComponents": {
|
||||
"t-icon": "../icon/icon",
|
||||
"t-popup": "../popup/popup",
|
||||
"t-swiper": "../swiper/swiper",
|
||||
"t-image": "../image/image",
|
||||
"t-grid": "../grid/grid",
|
||||
"t-grid-item": "../grid/grid-item"
|
||||
"t-grid-item": "../grid-item/grid-item",
|
||||
"t-swiper-nav": "../swiper-nav/swiper-nav"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +1,17 @@
|
||||
<wxs src="./action-sheet.wxs" module="this" />
|
||||
<wxs src="../common/utils.wxs" module="_" />
|
||||
<import src="./template/action-sheet-list.wxml" />
|
||||
<import src="./template/action-sheet-grid.wxml" />
|
||||
<import src="./template/list.wxml" />
|
||||
<import src="./template/grid.wxml" />
|
||||
|
||||
<view id="{{classPrefix}}" style="{{customStyle}}" class="{{classPrefix}} {{prefix}}-class">
|
||||
<view id="{{classPrefix}}" style="{{style}}" class="{{classPrefix}} {{prefix}}-class">
|
||||
<t-popup visible="{{visible}}" placement="bottom" bind:visible-change="onPopupVisibleChange">
|
||||
<view class="{{classPrefix}}__content {{prefix}}-class-content" tabindex="0">
|
||||
<view wx:if="{{description}}" tabindex="0" class="{{_.cls(classPrefix + '__description', [align])}}">{{description}}</view>
|
||||
<view
|
||||
class="{{_.cls(classPrefix + '__content', [['grid', gridThemeItems.length]])}} {{prefix}}-class-content"
|
||||
tabindex="0"
|
||||
>
|
||||
<view wx:if="{{description}}" tabindex="0" class="{{_.cls(classPrefix + '__description', [align])}}"
|
||||
>{{description}}</view
|
||||
>
|
||||
<block wx:if="{{gridThemeItems.length}}">
|
||||
<template is="grid" data="{{classPrefix, prefix, gridThemeItems, count, currentSwiperIndex}}" />
|
||||
</block>
|
||||
|
||||
@@ -32,19 +32,17 @@
|
||||
background-color: var(--td-bg-color-block, #fff);
|
||||
overflow: hidden;
|
||||
}
|
||||
.t-action-sheet .flex-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.t-action-sheet__content--grid {
|
||||
padding-top: 16rpx;
|
||||
}
|
||||
.t-action-sheet .ellipsis {
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
.t-action-sheet__content:focus {
|
||||
outline: 0;
|
||||
}
|
||||
.t-action-sheet__grid {
|
||||
padding: 48rpx 0 16rpx 0;
|
||||
padding-bottom: 16rpx;
|
||||
}
|
||||
.t-action-sheet__grid--swiper {
|
||||
padding-bottom: 48rpx;
|
||||
}
|
||||
.t-action-sheet__description {
|
||||
color: var(--td-action-sheet-description-color, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
|
||||
@@ -54,6 +52,9 @@
|
||||
padding: 24rpx 32rpx;
|
||||
position: relative;
|
||||
}
|
||||
.t-action-sheet__description:focus {
|
||||
outline: 0;
|
||||
}
|
||||
.t-action-sheet__description::after {
|
||||
content: '';
|
||||
display: block;
|
||||
@@ -81,7 +82,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
height: var(--td-action-sheet-list-item-height, 96rpx);
|
||||
height: var(--td-action-sheet-list-item-height, 112rpx);
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
.t-action-sheet__list-item::after {
|
||||
@@ -100,6 +101,9 @@
|
||||
right: 0;
|
||||
transform: scaleY(0.5);
|
||||
}
|
||||
.t-action-sheet__list-item:focus {
|
||||
outline: 0;
|
||||
}
|
||||
.t-action-sheet__list-item--left {
|
||||
justify-content: start;
|
||||
}
|
||||
@@ -120,28 +124,8 @@
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
.t-action-sheet__swiper-wrap {
|
||||
margin-top: 8rpx;
|
||||
position: relative;
|
||||
background-color: var(--td-bg-color-block, #fff);
|
||||
}
|
||||
.t-action-sheet__square {
|
||||
height: 148rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
.t-action-sheet__square-image {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
padding: 10rpx;
|
||||
}
|
||||
.t-action-sheet__square-text {
|
||||
width: 100%;
|
||||
margin-top: 10rpx;
|
||||
font-size: 28rpx;
|
||||
color: rgba(0, 0, 0, 0.9);
|
||||
text-align: center;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.t-action-sheet__footer {
|
||||
background-color: var(--td-bg-color-block, #fff);
|
||||
@@ -158,7 +142,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: var(--td-action-sheet-list-item-height, 96rpx);
|
||||
height: var(--td-action-sheet-cancel-height, 96rpx);
|
||||
}
|
||||
.t-action-sheet__dots {
|
||||
position: absolute;
|
||||
|
||||
@@ -11,7 +11,7 @@ const props = {
|
||||
type: Number,
|
||||
value: 8,
|
||||
},
|
||||
customStyle: {
|
||||
style: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
|
||||
@@ -1,50 +0,0 @@
|
||||
<import src="./action-sheet-item.wxml" />
|
||||
<template name="grid">
|
||||
<block wx:if="{{gridThemeItems.length === 1}}">
|
||||
<t-grid align="center" t-class="{{classPrefix}}__grid" column="{{count / 2}}" class="{{classPrefix}}__single-wrap">
|
||||
<t-grid-item
|
||||
t-class="{{classPrefix}}__grid-item"
|
||||
class="{{classPrefix}}__square"
|
||||
wx:for="{{gridThemeItems[0]}}"
|
||||
wx:key="index"
|
||||
bind:tap="onSelect"
|
||||
data-index="{{index}}"
|
||||
icon="{{item.icon}}"
|
||||
text="{{item.label}}"
|
||||
>
|
||||
<!-- <template is="item" data="{{classPrefix, item}}" /> -->
|
||||
</t-grid-item>
|
||||
</t-grid>
|
||||
</block>
|
||||
<block wx:elif="{{gridThemeItems.length > 1}}">
|
||||
<view class="{{classPrefix}}__swiper-wrap">
|
||||
<swiper style="height: 456rpx" autoplay="{{false}}" current="{{currentSwiperIndex}}" bindchange="onSwiperChange">
|
||||
<swiper-item wx:for="{{gridThemeItems}}" wx:key="index">
|
||||
<t-grid align="center" t-class="{{classPrefix}}__grid" column="{{count / 2}}">
|
||||
<t-grid-item
|
||||
t-class="{{classPrefix}}__grid-item"
|
||||
class="{{classPrefix}}__square"
|
||||
wx:for="{{item}}"
|
||||
wx:key="index"
|
||||
data-index="{{index}}"
|
||||
bind:tap="onSelect"
|
||||
icon="{{item.icon}}"
|
||||
text="{{item.label}}"
|
||||
>
|
||||
<!-- <template is="item" data="{{classPrefix, item}}" /> -->
|
||||
</t-grid-item>
|
||||
</t-grid>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="{{classPrefix}}__nav">
|
||||
<view class="{{classPrefix}}__dots">
|
||||
<view
|
||||
wx:for="{{gridThemeItems.length}}"
|
||||
wx:key="index"
|
||||
class="{{classPrefix}}__dots-item {{index === currentSwiperIndex ? prefix + '-is-active' : ''}}"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</template>
|
||||
@@ -1,17 +0,0 @@
|
||||
<wxs src="../action-sheet.wxs" module="this" />
|
||||
<template name="item">
|
||||
<block>
|
||||
<t-image
|
||||
slot="image"
|
||||
wx:if="{{ this.isImage(item.icon) }}"
|
||||
lazy
|
||||
class="{{classPrefix}}__square-image"
|
||||
src="{{item.icon}}"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<t-icon slot="image" wx:else name="{{item.icon}}" class="{{classPrefix}}__square-image" size="72rpx" />
|
||||
</block>
|
||||
<view slot="text" style="{{ item.color ? 'color: ' + item.color : '' }}" class="{{classPrefix}}__square-text">
|
||||
{{item.label}}
|
||||
</view>
|
||||
</template>
|
||||
@@ -1,14 +0,0 @@
|
||||
<template name="list">
|
||||
<view
|
||||
data-index="{{index}}"
|
||||
style="{{ item.color ? 'color: ' + item.color : '' }}"
|
||||
class="{{listThemeItemClass}}"
|
||||
bind:tap="onSelect"
|
||||
aria-role="{{ariaRole || 'button'}}"
|
||||
aria-label="{{item.label || item}}"
|
||||
tabindex="0"
|
||||
>
|
||||
<t-icon wx:if="{{item.icon}}" name="{{item.icon}}" class="{{classPrefix}}__list-item-icon" size="48rpx"></t-icon>
|
||||
<view class="{{classPrefix}}__list-item-text">{{item.label || item}}</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -11,7 +11,7 @@ export interface TdActionSheetProps {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
customStyle?: {
|
||||
style?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user