白色主题

This commit is contained in:
2023-02-12 19:04:01 +08:00
parent d736a5912f
commit 57ab6fbb49
411 changed files with 1752 additions and 5304 deletions

View File

@@ -15,7 +15,7 @@ export default class ActionSheet extends SuperComponent {
type: NumberConstructor;
value?: number;
};
customStyle?: {
style?: {
type: StringConstructor;
value?: string;
};

View File

@@ -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"
}
}

View File

@@ -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>

View File

@@ -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;

View File

@@ -11,7 +11,7 @@ const props = {
type: Number,
value: 8,
},
customStyle: {
style: {
type: String,
value: '',
},

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -11,7 +11,7 @@ export interface TdActionSheetProps {
type: NumberConstructor;
value?: number;
};
customStyle?: {
style?: {
type: StringConstructor;
value?: string;
};