白色主题
This commit is contained in:
@@ -18,11 +18,11 @@ theme | String | default | options：default/card | N
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
badge-props | Object | null | Typescript：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/grid/type.ts) | N
|
||||
badge-props | Object | null | Typescript：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/grid-item/type.ts) | N
|
||||
custom-style | String | - | \- | N
|
||||
description | String / Slot | - | \- | N
|
||||
external-classes | Array | - | `['t-class', 't-class-image', 't-class-text', 't-class-description']` | N
|
||||
icon | String | - | \- | N
|
||||
icon | String / Object | - | \- | N
|
||||
image | String / Slot | - | \- | N
|
||||
image-props | Object | - | \- | N
|
||||
jump-type | String | navigate-to | options：redirect-to/switch-tab/relaunch/navigate-to | N
|
||||
|
||||
@@ -13,7 +13,7 @@ isComponent: true
|
||||
```json
|
||||
"usingComponents": {
|
||||
"t-grid": "tdesign-miniprogram/grid/grid",
|
||||
"t-grid-item": "tdesign-miniprogram/grid/grid-item"
|
||||
"t-grid-item": "tdesign-miniprogram/grid-item/grid-item"
|
||||
}
|
||||
```
|
||||
|
||||
@@ -73,11 +73,11 @@ theme | String | default | 宫格的风格。可选项：default/card | N
|
||||
|
||||
名称 | 类型 | 默认值 | 说明 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
badge-props | Object | null | 透传至 Badge 属性。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/grid/type.ts) | N
|
||||
badge-props | Object | null | 透传至 Badge 属性。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/grid-item/type.ts) | N
|
||||
custom-style | String | - | 自定义组件样式 | N
|
||||
description | String / Slot | - | 文本以外的更多描述，辅助信息。可以通过 Props 传入文本，也可以自定义标题节点 | N
|
||||
external-classes | Array | - | 组件类名，分别用于设置组件外层元素、图片、文本、描述等元素类名。`['t-class', 't-class-image', 't-class-text', 't-class-description']` | N
|
||||
icon | String / Object | - | 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`。 | N
|
||||
icon | String / Object | - | 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon` | N
|
||||
image | String / Slot | - | 图片，可以是图片地址，也可以自定义图片节点 | N
|
||||
image-props | Object | - | 透传至 Image 组件 | N
|
||||
jump-type | String | navigate-to | 链接跳转类型。可选项：redirect-to/switch-tab/relaunch/navigate-to | N
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
import { TdGridItemProps } from './type';
|
||||
declare const props: TdGridItemProps;
|
||||
export default props;
|
||||
@@ -1,41 +0,0 @@
|
||||
const props = {
|
||||
badgeProps: {
|
||||
type: Object,
|
||||
value: null,
|
||||
},
|
||||
customStyle: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
},
|
||||
externalClasses: {
|
||||
type: Array,
|
||||
},
|
||||
icon: {
|
||||
type: null,
|
||||
},
|
||||
image: {
|
||||
type: String,
|
||||
},
|
||||
imageProps: {
|
||||
type: Object,
|
||||
},
|
||||
jumpType: {
|
||||
type: String,
|
||||
value: 'navigate-to',
|
||||
},
|
||||
layout: {
|
||||
type: String,
|
||||
value: 'vertical',
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
@@ -1,32 +0,0 @@
|
||||
import { SuperComponent, RelationsOptions } from '../common/src/index';
|
||||
export default class GridItem extends SuperComponent {
|
||||
externalClasses: string[];
|
||||
options: {
|
||||
multipleSlots: boolean;
|
||||
};
|
||||
relations: RelationsOptions;
|
||||
properties: import("./type").TdGridItemProps;
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
gridItemStyle: string;
|
||||
gridItemWrapperStyle: string;
|
||||
gridItemContentStyle: string;
|
||||
align: string;
|
||||
layout: string;
|
||||
column: number;
|
||||
labelID: string;
|
||||
};
|
||||
observers: {
|
||||
icon(icon: any): void;
|
||||
};
|
||||
lifetimes: {
|
||||
ready(): void;
|
||||
};
|
||||
updateStyle(): void;
|
||||
getWidthStyle(): string;
|
||||
getPaddingStyle(): string;
|
||||
getBorderStyle(): string;
|
||||
onClick(e: any): void;
|
||||
jumpLink(): void;
|
||||
}
|
||||
@@ -1,132 +0,0 @@
|
||||
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, isObject } from '../common/src/index';
|
||||
import config from '../common/config';
|
||||
import props from './grid-item-props';
|
||||
import { uniqueFactory, setIcon } from '../common/utils';
|
||||
const { prefix } = config;
|
||||
const name = `${prefix}-grid-item`;
|
||||
const getUniqueID = uniqueFactory('grid_item');
|
||||
var LinkTypes;
|
||||
(function (LinkTypes) {
|
||||
LinkTypes["redirect-to"] = "redirectTo";
|
||||
LinkTypes["switch-tab"] = "switchTab";
|
||||
LinkTypes["relaunch"] = "reLaunch";
|
||||
LinkTypes["navigate-to"] = "navigateTo";
|
||||
})(LinkTypes || (LinkTypes = {}));
|
||||
let GridItem = class GridItem extends SuperComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.externalClasses = [
|
||||
`${prefix}-class`,
|
||||
`${prefix}-class-content`,
|
||||
`${prefix}-class-image`,
|
||||
`${prefix}-class-text`,
|
||||
`${prefix}-class-description`,
|
||||
];
|
||||
this.options = {
|
||||
multipleSlots: true,
|
||||
};
|
||||
this.relations = {
|
||||
'./grid': {
|
||||
type: 'ancestor',
|
||||
linked(target) {
|
||||
this.parent = target;
|
||||
this.updateStyle();
|
||||
this.setData({
|
||||
column: target.data.column,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
this.properties = props;
|
||||
this.data = {
|
||||
prefix,
|
||||
classPrefix: name,
|
||||
gridItemStyle: '',
|
||||
gridItemWrapperStyle: '',
|
||||
gridItemContentStyle: '',
|
||||
align: 'center',
|
||||
layout: 'vertical',
|
||||
column: 0,
|
||||
labelID: '',
|
||||
};
|
||||
this.observers = {
|
||||
icon(icon) {
|
||||
const obj = setIcon('icon', icon, '');
|
||||
this.setData(Object.assign({}, obj));
|
||||
},
|
||||
};
|
||||
this.lifetimes = {
|
||||
ready() {
|
||||
this.setData({
|
||||
labelID: getUniqueID(),
|
||||
});
|
||||
},
|
||||
};
|
||||
}
|
||||
updateStyle() {
|
||||
const { hover, align } = this.parent.properties;
|
||||
const { customStyle } = this.properties;
|
||||
const gridItemStyles = [];
|
||||
const gridItemWrapperStyles = [];
|
||||
const gridItemContentStyles = [];
|
||||
const widthStyle = this.getWidthStyle();
|
||||
const paddingStyle = this.getPaddingStyle();
|
||||
const borderStyle = this.getBorderStyle();
|
||||
widthStyle && gridItemStyles.push(widthStyle);
|
||||
paddingStyle && gridItemWrapperStyles.push(paddingStyle);
|
||||
borderStyle && gridItemContentStyles.push(borderStyle);
|
||||
this.setData({
|
||||
gridItemStyle: `${gridItemStyles.join(';')}${customStyle ? `;${customStyle}` : ''}`,
|
||||
gridItemWrapperStyle: gridItemWrapperStyles.join(';'),
|
||||
gridItemContentStyle: gridItemContentStyles.join(';'),
|
||||
hover,
|
||||
layout: this.properties.layout,
|
||||
align: align,
|
||||
});
|
||||
}
|
||||
getWidthStyle() {
|
||||
const { column } = this.parent.properties;
|
||||
return column > 0 ? `width:${(1 / column) * 100}%` : '';
|
||||
}
|
||||
getPaddingStyle() {
|
||||
const { gutter } = this.parent.properties;
|
||||
if (gutter)
|
||||
return `padding-left:${gutter}rpx;padding-top:${gutter}rpx`;
|
||||
return '';
|
||||
}
|
||||
getBorderStyle() {
|
||||
const { gutter } = this.parent.properties;
|
||||
let { border } = this.parent.properties;
|
||||
if (!border)
|
||||
return '';
|
||||
if (!isObject(border))
|
||||
border = {};
|
||||
const { color = '#266FE8', width = 2, style = 'solid' } = border;
|
||||
if (gutter)
|
||||
return `border:${width}rpx ${style} ${color}`;
|
||||
return `border-top:${width}rpx ${style} ${color};border-left:${width}rpx ${style} ${color}`;
|
||||
}
|
||||
onClick(e) {
|
||||
const { item } = e.currentTarget.dataset;
|
||||
this.triggerEvent('click', item);
|
||||
this.jumpLink();
|
||||
}
|
||||
jumpLink() {
|
||||
const { url, jumpType } = this.properties;
|
||||
if (url && jumpType) {
|
||||
if (LinkTypes[jumpType]) {
|
||||
wx[LinkTypes[jumpType]]({ url });
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
GridItem = __decorate([
|
||||
wxComponent()
|
||||
], GridItem);
|
||||
export default GridItem;
|
||||
@@ -1,8 +0,0 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-image": "../image/image",
|
||||
"t-icon": "../icon/icon",
|
||||
"t-badge": "../badge/badge"
|
||||
}
|
||||
}
|
||||
@@ -1,74 +0,0 @@
|
||||
<import src="../common/template/image.wxml" />
|
||||
<import src="../common/template/icon.wxml" />
|
||||
<wxs module="util">
|
||||
module.exports.getImageSize = function(column) { if (column >= 5) return 'small'; if (column == 4) return 'middle';
|
||||
return 'large'; }
|
||||
</wxs>
|
||||
<wxs module="_" src="../common/utils.wxs" />
|
||||
|
||||
<view
|
||||
class="{{_.cls(classPrefix, [['auto-size', column == 0]])}} {{prefix}}-class"
|
||||
style="{{ gridItemStyle }}"
|
||||
hover-class="{{hover ? classPrefix + '--hover':''}}"
|
||||
hover-stay-time="{{200}}"
|
||||
bindtap="onClick"
|
||||
aria-role="{{ariaRole || 'button'}}"
|
||||
aria-labelledby="{{labelID}}"
|
||||
>
|
||||
<view class="{{_.cls(classPrefix + '__wrapper', [layout])}}" style="{{gridItemWrapperStyle}}">
|
||||
<view
|
||||
class="{{_.cls(classPrefix + '__content', [align, layout])}} {{prefix}}-class-content"
|
||||
style="{{gridItemContentStyle}}"
|
||||
>
|
||||
<slot />
|
||||
<t-badge
|
||||
wx:if="{{image || icon}}"
|
||||
color="{{badgeProps.color}}"
|
||||
content="{{badgeProps.content}}"
|
||||
count="{{badgeProps.count}}"
|
||||
dot="{{badgeProps.dot}}"
|
||||
max-count="{{badgeProps.maxCount || 99}}"
|
||||
offset="{{badgeProps.offset}}"
|
||||
shape="{{badgeProps.shape || 'circle'}}"
|
||||
show-zero="{{badgeProps.showZero}}"
|
||||
size="{{badgeProps.size || 'medium'}}"
|
||||
t-class="{{badgeProps.tClass}}"
|
||||
t-class-content="{{badgeProps.tClassContent}}"
|
||||
t-class-count="{{badgeProps.tClassCount}}"
|
||||
>
|
||||
<view
|
||||
class="{{_.cls(classPrefix + '__image', [util.getImageSize(column), ['icon', icon]])}} {{prefix}}-class-image"
|
||||
>
|
||||
<block wx:if="{{image && image !== 'slot'}}">
|
||||
<template
|
||||
is="image"
|
||||
data="{{ src: image, shape: 'round', mode: 'widthFix', tClass: _.cls(classPrefix + '__image', [util.getImageSize(column)]), ...imageProps }}"
|
||||
/>
|
||||
</block>
|
||||
<slot wx:else name="image" />
|
||||
<template
|
||||
wx:if="{{iconName || _.isNoEmptyObj(iconData)}}"
|
||||
is="icon"
|
||||
data="{{class: classPrefix + '__icon', name: iconName, ...iconData}}"
|
||||
/>
|
||||
</view>
|
||||
</t-badge>
|
||||
<view class="{{_.cls(classPrefix + '__words', [layout])}}" id="{{labelID}}">
|
||||
<view
|
||||
wx:if="{{text && text !== 'slot'}}"
|
||||
class="{{_.cls(classPrefix + '__text', [util.getImageSize(column), layout])}} {{prefix}}-class-text"
|
||||
>
|
||||
{{text}}
|
||||
</view>
|
||||
<slot wx:else name="text" class="{{prefix}}-class-text" />
|
||||
<view
|
||||
wx:if="{{description && description!== 'slot'}}"
|
||||
class="{{_.cls(classPrefix + '__description', [util.getImageSize(column), layout])}} {{prefix}}-class-description"
|
||||
>
|
||||
{{description}}
|
||||
</view>
|
||||
<slot wx:else name="description" class="{{prefix}}-class-description" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -1,124 +0,0 @@
|
||||
.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-grid-item {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
.t-grid-item--hover {
|
||||
background-color: var(--td-grid-item-hover-bg-color, var(--td-gray-color-1, #f3f3f3));
|
||||
}
|
||||
.t-grid-item--auto-size {
|
||||
width: 168rpx;
|
||||
}
|
||||
.t-grid-item__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding: var(--td-grid-item-padding, 32rpx) 0 24rpx;
|
||||
}
|
||||
.t-grid-item__content--horizontal {
|
||||
flex-direction: row;
|
||||
padding-left: var(--td-grid-item-padding, 32rpx);
|
||||
}
|
||||
.t-grid-item__words {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.t-grid-item__words--horizontal {
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
.t-grid-item__words:empty {
|
||||
display: none;
|
||||
}
|
||||
.t-grid-item__image:not(:empty) {
|
||||
width: var(--td-grid-item-image-width, 96rpx);
|
||||
height: var(--td-grid-item-image-width, 96rpx);
|
||||
}
|
||||
.t-grid-item__image:not(:empty).t-grid-item__image--small {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
.t-grid-item__image:not(:empty).t-grid-item__image--middle {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
.t-grid-item__image:not(:empty) .t-grid__image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.t-grid-item__image--icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--td-gray-color-2, #eeeeee);
|
||||
border-radius: var(--td-radius-default, 12rpx);
|
||||
}
|
||||
.t-grid-item--left {
|
||||
justify-self: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.t-grid-item--left .t-grid-item__words {
|
||||
text-align: left;
|
||||
}
|
||||
.t-grid-item__text {
|
||||
width: inherit;
|
||||
color: var(--td-grid-item-text-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
|
||||
font-size: var(--td-grid-item-text-font-size, 28rpx);
|
||||
line-height: var(--td-grid-item-text-line-height, 44rpx);
|
||||
padding-top: var(--td-grid-item-text-padding-top, 16rpx);
|
||||
}
|
||||
.t-grid-item__text--small,
|
||||
.t-grid-item__text--middle {
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.t-grid-item__text--horizontal {
|
||||
padding-top: 0;
|
||||
text-align: left;
|
||||
}
|
||||
.t-grid-item__description {
|
||||
width: inherit;
|
||||
color: var(--td-grid-item-description-color, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
|
||||
font-size: var(--td-grid-item-description-font-size, 24rpx);
|
||||
line-height: var(--td-grid-item-description-line-height, 40rpx);
|
||||
}
|
||||
.t-grid-item__description--horizontal {
|
||||
text-align-last: left;
|
||||
}
|
||||
.t-grid-item__icon {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
@@ -14,7 +14,7 @@ let Grid = class Grid extends SuperComponent {
|
||||
super(...arguments);
|
||||
this.externalClasses = ['t-class'];
|
||||
this.relations = {
|
||||
'./grid-item': {
|
||||
'../grid-item/grid-item': {
|
||||
type: 'descendant',
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<wxs src="../common/utils.wxs" module="_" />
|
||||
|
||||
<view style="{{ customStyle }}" class="{{_.cls(classPrefix, [theme])}} {{prefix}}-class">
|
||||
<view style="{{ style }}" class="{{_.cls(classPrefix, [theme])}} {{prefix}}-class">
|
||||
<view wx:if="{{column > 0}}" class="{{classPrefix}}__content" style="{{ contentStyle }}">
|
||||
<slot />
|
||||
</view>
|
||||
|
||||
@@ -11,7 +11,7 @@ const props = {
|
||||
type: Number,
|
||||
value: 4,
|
||||
},
|
||||
customStyle: {
|
||||
style: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { BadgeProps } from '../badge/index';
|
||||
export interface TdGridProps {
|
||||
align?: {
|
||||
type: StringConstructor;
|
||||
@@ -16,7 +15,7 @@ export interface TdGridProps {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
};
|
||||
customStyle?: {
|
||||
style?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
@@ -37,49 +36,3 @@ export interface TdGridProps {
|
||||
value?: 'default' | 'card';
|
||||
};
|
||||
}
|
||||
export interface TdGridItemProps {
|
||||
badgeProps?: {
|
||||
type: ObjectConstructor;
|
||||
value?: BadgeProps;
|
||||
};
|
||||
customStyle?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
description?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
externalClasses?: {
|
||||
type: ArrayConstructor;
|
||||
value?: ['t-class', 't-class-image', 't-class-text', 't-class-description'];
|
||||
};
|
||||
icon?: {
|
||||
type: null;
|
||||
value?: string | object;
|
||||
};
|
||||
image?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
imageProps?: {
|
||||
type: ObjectConstructor;
|
||||
value?: object;
|
||||
};
|
||||
jumpType?: {
|
||||
type: StringConstructor;
|
||||
value?: 'redirect-to' | 'switch-tab' | 'relaunch' | 'navigate-to';
|
||||
};
|
||||
layout?: {
|
||||
type: StringConstructor;
|
||||
value?: 'vertical' | 'horizontal';
|
||||
};
|
||||
text?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
url?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user