project init
This commit is contained in:
limqhz
82
components/grid/README.md
Normal file
82
components/grid/README.md
Normal file
@@ -0,0 +1,82 @@
|
||||
---
|
||||
title: Grid 宫格
|
||||
description: 用于功能入口布局，将页面或特定区域切分成若干等大的区块，形成若干功能入口。
|
||||
spline: data
|
||||
isComponent: true
|
||||
---
|
||||
|
||||
<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-97%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-93%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-97%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-94%25-blue" /></span>
|
||||
## 引入
|
||||
|
||||
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
"t-grid": "tdesign-miniprogram/grid/grid",
|
||||
"t-grid-item": "tdesign-miniprogram/grid/grid-item"
|
||||
}
|
||||
```
|
||||
|
||||
### 主题定制
|
||||
CSS 变量名|说明
|
||||
--|--
|
||||
--td-grid-bg-color | 宫格背景颜色
|
||||
--td-grid-item-text-color | 宫格文本颜色
|
||||
--td-grid-item-description-color | 宫格描述信息文本颜色
|
||||
--td-grid-item-hover-bg-color | 开启点击反馈时宫格背景颜色
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 一行三个带边框
|
||||
|
||||
{{ border }}
|
||||
|
||||
### 一行四个
|
||||
|
||||
{{ four }}
|
||||
|
||||
### 一行五个
|
||||
|
||||
{{ five }}
|
||||
|
||||
### 一行三个
|
||||
|
||||
{{ three }}
|
||||
|
||||
### 一行二个带说明
|
||||
|
||||
{{ two-des }}
|
||||
|
||||
### 一行三个带说明
|
||||
|
||||
{{ three-des }}
|
||||
|
||||
### 带徽标
|
||||
|
||||
{{ badge }}
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### Grid Props
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 | 必传 |
|
||||
| ---------------- | ---------------- | ------ | --------------------------------------------------------------------------------------------------- | ------------------------------------------------- |
|
||||
| align | String | center | 内容对齐方式。可选项：left/center | N |
|
||||
| border | Boolean / Object | false | 边框，默认不显示。值为 true 则显示默认边框，值类型为 object 则表示自定义边框样式。TS 类型：`boolean | { color?: string; width?: string; style?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'inset' | 'outset' }` | N |
|
||||
| column | Number | 4 | 每一行的列数量 | N |
|
||||
| external-classes | Array | - | 组件类名，用于设置组件外层元素类名。`['t-class']` | N |
|
||||
| gutter | Number | - | 间隔大小 | N |
|
||||
| hover | Boolean | false | 是否开启点击反馈 | N |
|
||||
|
||||
### GridItem Props
|
||||
|
||||
| 名称 | 类型 | 默认值 | 说明 | 必传 |
|
||||
| ---------------- | ------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------- | ---- |
|
||||
| description | String / Slot | - | 文本以外的更多描述，辅助信息。可以通过 Props 传入文本，也可以自定义标题节点 | N |
|
||||
| external-classes | Array | - | 组件类名，分别用于设置组件外层元素、图片、文本、描述等元素类名。`['t-class', 't-class-content', 't-class-image', 't-class-text', 't-class-description']` | N |
|
||||
| image | String / Slot | - | 图片，可以是图片地址，也可以自定义图片节点 | N |
|
||||
| jump-type | String | navigate-to | 链接跳转类型。可选项：redirect-to/switch-tab/relaunch/navigate-to | N |
|
||||
| layout | String | vertical | 内容布局方式。可选项：vertical/horizontal | N |
|
||||
| text | String / Slot | - | 文本，可以通过 Props 传入文本，也可以自定义标题节点 | N |
|
||||
| url | String | - | 点击后的跳转链接 | N |
|
||||
3
components/grid/grid-item-props.d.ts
vendored
Normal file
3
components/grid/grid-item-props.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
import { TdGridItemProps } from './type';
|
||||
declare const props: TdGridItemProps;
|
||||
export default props;
|
||||
27
components/grid/grid-item-props.js
Normal file
27
components/grid/grid-item-props.js
Normal file
@@ -0,0 +1,27 @@
|
||||
const props = {
|
||||
description: {
|
||||
type: String,
|
||||
},
|
||||
externalClasses: {
|
||||
type: Array,
|
||||
},
|
||||
image: {
|
||||
type: String,
|
||||
},
|
||||
jumpType: {
|
||||
type: String,
|
||||
value: 'navigate-to',
|
||||
},
|
||||
layout: {
|
||||
type: String,
|
||||
value: 'vertical',
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
},
|
||||
url: {
|
||||
type: String,
|
||||
value: '',
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
24
components/grid/grid-item.d.ts
vendored
Normal file
24
components/grid/grid-item.d.ts
vendored
Normal file
@@ -0,0 +1,24 @@
|
||||
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;
|
||||
};
|
||||
updateStyle(): void;
|
||||
getWidthStyle(): string;
|
||||
getPaddingStyle(): string;
|
||||
getBorderStyle(): string;
|
||||
onClick(e: any): void;
|
||||
jumpLink(): void;
|
||||
}
|
||||
111
components/grid/grid-item.js
Normal file
111
components/grid/grid-item.js
Normal file
@@ -0,0 +1,111 @@
|
||||
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';
|
||||
const { prefix } = config;
|
||||
const name = `${prefix}-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.properties = props;
|
||||
this.data = {
|
||||
prefix,
|
||||
classPrefix: name,
|
||||
gridItemStyle: '',
|
||||
gridItemWrapperStyle: '',
|
||||
gridItemContentStyle: '',
|
||||
align: 'center',
|
||||
layout: 'vertical',
|
||||
};
|
||||
}
|
||||
updateStyle() {
|
||||
const { hover, align } = this.parent.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(';'),
|
||||
gridItemWrapperStyle: gridItemWrapperStyles.join(';'),
|
||||
gridItemContentStyle: gridItemContentStyles.join(';'),
|
||||
hover,
|
||||
layout: this.properties.layout,
|
||||
align: align,
|
||||
});
|
||||
}
|
||||
getWidthStyle() {
|
||||
const { column } = this.parent.properties;
|
||||
return `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;
|
||||
6
components/grid/grid-item.json
Normal file
6
components/grid/grid-item.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"t-image": "../image/image"
|
||||
}
|
||||
}
|
||||
34
components/grid/grid-item.wxml
Normal file
34
components/grid/grid-item.wxml
Normal file
@@ -0,0 +1,34 @@
|
||||
<view
|
||||
class="{{classPrefix}} {{prefix}}-class"
|
||||
style="{{ gridItemStyle }}"
|
||||
hover-class="{{hover ? classPrefix + '--hover':''}}"
|
||||
hover-stay-time="{{200}}"
|
||||
bindtap="onClick"
|
||||
>
|
||||
<view
|
||||
class="{{classPrefix}}__wrapper {{layout==='horizontal' ? classPrefix + '--horizontal' : ''}}"
|
||||
style="{{gridItemWrapperStyle}}"
|
||||
>
|
||||
<view
|
||||
class="{{classPrefix}}__content {{classPrefix + '--' + (align === 'center' ? 'center' : 'left')}} {{prefix}}-class-content"
|
||||
style="{{gridItemContentStyle}}"
|
||||
>
|
||||
<slot />
|
||||
<view class="{{classPrefix}}__image {{prefix}}-class-image">
|
||||
<t-image wx:if="{{image && image !== 'slot'}}" src="{{image}}" mode="widthFix" t-class="external-class" />
|
||||
<slot wx:else name="image"></slot>
|
||||
</view>
|
||||
<view class="{{classPrefix}}__words">
|
||||
<view wx:if="{{text && text !== 'slot'}}" class="{{classPrefix}}__text {{prefix}}-class-text"> {{text}} </view>
|
||||
<slot wx:else name="text" class="{{prefix}}-class-text"></slot>
|
||||
<view
|
||||
wx:if="{{description && description!== 'slot'}}"
|
||||
class="{{classPrefix}}__description {{prefix}}-class-description"
|
||||
>
|
||||
{{description}}
|
||||
</view>
|
||||
<slot wx:else name="description" class="{{prefix}}-class-description"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
99
components/grid/grid-item.wxss
Normal file
99
components/grid/grid-item.wxss
Normal file
@@ -0,0 +1,99 @@
|
||||
.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);
|
||||
}
|
||||
page {
|
||||
--td-grid-item-bg-color: #ffffff;
|
||||
--td-grid-item-text-color: rgba(0, 0, 0, 0.9);
|
||||
--td-grid-item-description-color: rgba(0, 0, 0, 0.4);
|
||||
--td-grid-item-hover-bg-color: #f2f3f5;
|
||||
}
|
||||
.t-grid-item {
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
float: left;
|
||||
}
|
||||
.t-grid-item--hover {
|
||||
background-color: var(--td-grid-item-hover-bg-color);
|
||||
}
|
||||
.t-grid-item--horizontal .t-grid-item__content {
|
||||
flex-direction: row;
|
||||
}
|
||||
.t-grid-item--horizontal .t-grid-item__text {
|
||||
padding-top: 0;
|
||||
padding-left: 24rpx;
|
||||
}
|
||||
.t-grid-item--horizontal .t-grid-item__description {
|
||||
padding-top: 4rpx;
|
||||
padding-left: 24rpx;
|
||||
}
|
||||
.t-grid-item__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding: 24rpx 0;
|
||||
}
|
||||
.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__image:not(:empty) {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
}
|
||||
.t-grid-item__image:not(:empty) .external-class {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.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);
|
||||
font-size: 28rpx;
|
||||
line-height: 44rpx;
|
||||
padding-top: 16rpx;
|
||||
}
|
||||
.t-grid-item__description {
|
||||
width: inherit;
|
||||
color: var(--td-grid-item-description-color);
|
||||
font-size: 24rpx;
|
||||
line-height: 40rpx;
|
||||
padding-top: 8rpx;
|
||||
}
|
||||
23
components/grid/grid.d.ts
vendored
Normal file
23
components/grid/grid.d.ts
vendored
Normal file
@@ -0,0 +1,23 @@
|
||||
import { SuperComponent, RelationsOptions } from '../common/src/index';
|
||||
export default class Grid extends SuperComponent {
|
||||
externalClasses: string[];
|
||||
relations: RelationsOptions;
|
||||
properties: import("./type").TdGridProps;
|
||||
data: {
|
||||
classPrefix: string;
|
||||
contentStyle: string;
|
||||
};
|
||||
observers: {
|
||||
'column,hover,align'(): void;
|
||||
'gutter,border'(): void;
|
||||
};
|
||||
lifetimes: {
|
||||
attached(): void;
|
||||
created(): void;
|
||||
};
|
||||
methods: {
|
||||
doForChild(action: (item: WechatMiniprogram.Component.TrivialInstance) => void): void;
|
||||
updateContentStyle(): void;
|
||||
getContentMargin(): string;
|
||||
};
|
||||
}
|
||||
73
components/grid/grid.js
Normal file
73
components/grid/grid.js
Normal file
@@ -0,0 +1,73 @@
|
||||
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 { isObject, SuperComponent, wxComponent } from '../common/src/index';
|
||||
import config from '../common/config';
|
||||
import props from './props';
|
||||
const { prefix } = config;
|
||||
const name = `${prefix}-grid`;
|
||||
let Grid = class Grid extends SuperComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.externalClasses = ['t-class'];
|
||||
this.relations = {
|
||||
'./grid-item': {
|
||||
type: 'descendant',
|
||||
},
|
||||
};
|
||||
this.properties = props;
|
||||
this.data = {
|
||||
classPrefix: name,
|
||||
contentStyle: '',
|
||||
};
|
||||
this.observers = {
|
||||
'column,hover,align'() {
|
||||
this.updateContentStyle();
|
||||
},
|
||||
'gutter,border'() {
|
||||
this.updateContentStyle();
|
||||
this.doForChild((child) => child.updateStyle());
|
||||
},
|
||||
};
|
||||
this.lifetimes = {
|
||||
attached() {
|
||||
this.updateContentStyle();
|
||||
},
|
||||
created() {
|
||||
this.children = [];
|
||||
},
|
||||
};
|
||||
this.methods = {
|
||||
doForChild(action) {
|
||||
var _a;
|
||||
const children = (_a = this.getRelationNodes('./grid-item')) !== null && _a !== void 0 ? _a : [];
|
||||
children.forEach(action);
|
||||
},
|
||||
updateContentStyle() {
|
||||
const contentStyles = [];
|
||||
const marginStyle = this.getContentMargin();
|
||||
marginStyle && contentStyles.push(marginStyle);
|
||||
this.setData({
|
||||
contentStyle: contentStyles.join(';'),
|
||||
});
|
||||
},
|
||||
getContentMargin() {
|
||||
const { gutter } = this.properties;
|
||||
let { border } = this.properties;
|
||||
if (!border)
|
||||
return `margin-left:-${gutter}rpx; margin-top:-${gutter}rpx`;
|
||||
if (!isObject(border))
|
||||
border = {};
|
||||
const { width = 2 } = border;
|
||||
return `margin-left:-${width}rpx; margin-top:-${width}rpx`;
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
Grid = __decorate([
|
||||
wxComponent()
|
||||
], Grid);
|
||||
export default Grid;
|
||||
4
components/grid/grid.json
Normal file
4
components/grid/grid.json
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
5
components/grid/grid.wxml
Normal file
5
components/grid/grid.wxml
Normal file
@@ -0,0 +1,5 @@
|
||||
<view class="{{classPrefix}} t-class">
|
||||
<view class="{{classPrefix}}__content" style="{{ contentStyle }}">
|
||||
<slot />
|
||||
</view>
|
||||
</view>
|
||||
38
components/grid/grid.wxss
Normal file
38
components/grid/grid.wxss
Normal file
@@ -0,0 +1,38 @@
|
||||
.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);
|
||||
}
|
||||
page {
|
||||
--td-grid-bg-color: #ffffff;
|
||||
}
|
||||
.t-grid {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: var(--td-grid-bg-color);
|
||||
}
|
||||
.t-grid__content {
|
||||
width: auto;
|
||||
}
|
||||
3
components/grid/props.d.ts
vendored
Normal file
3
components/grid/props.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
import { TdGridProps } from './type';
|
||||
declare const props: TdGridProps;
|
||||
export default props;
|
||||
25
components/grid/props.js
Normal file
25
components/grid/props.js
Normal file
@@ -0,0 +1,25 @@
|
||||
const props = {
|
||||
align: {
|
||||
type: String,
|
||||
value: 'center',
|
||||
},
|
||||
border: {
|
||||
type: null,
|
||||
value: false,
|
||||
},
|
||||
column: {
|
||||
type: Number,
|
||||
value: 4,
|
||||
},
|
||||
externalClasses: {
|
||||
type: Array,
|
||||
},
|
||||
gutter: {
|
||||
type: Number,
|
||||
},
|
||||
hover: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
73
components/grid/type.d.ts
vendored
Normal file
73
components/grid/type.d.ts
vendored
Normal file
@@ -0,0 +1,73 @@
|
||||
export interface TdGridProps {
|
||||
align?: {
|
||||
type: StringConstructor;
|
||||
value?: 'left' | 'center';
|
||||
required?: boolean;
|
||||
};
|
||||
border?: {
|
||||
type: null;
|
||||
value?: boolean | {
|
||||
color?: string;
|
||||
width?: string;
|
||||
style?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'inset' | 'outset';
|
||||
};
|
||||
required?: boolean;
|
||||
};
|
||||
column?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
required?: boolean;
|
||||
};
|
||||
externalClasses?: {
|
||||
type: ArrayConstructor;
|
||||
value?: ['t-class'];
|
||||
required?: boolean;
|
||||
};
|
||||
gutter?: {
|
||||
type: NumberConstructor;
|
||||
value?: number;
|
||||
required?: boolean;
|
||||
};
|
||||
hover?: {
|
||||
type: BooleanConstructor;
|
||||
value?: boolean;
|
||||
required?: boolean;
|
||||
};
|
||||
}
|
||||
export interface TdGridItemProps {
|
||||
description?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
required?: boolean;
|
||||
};
|
||||
externalClasses?: {
|
||||
type: ArrayConstructor;
|
||||
value?: ['t-class', 't-class-image', 't-class-text', 't-class-description'];
|
||||
required?: boolean;
|
||||
};
|
||||
image?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
required?: boolean;
|
||||
};
|
||||
jumpType?: {
|
||||
type: StringConstructor;
|
||||
value?: 'redirect-to' | 'switch-tab' | 'relaunch' | 'navigate-to';
|
||||
required?: boolean;
|
||||
};
|
||||
layout?: {
|
||||
type: StringConstructor;
|
||||
value?: 'vertical' | 'horizontal';
|
||||
required?: boolean;
|
||||
};
|
||||
text?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
required?: boolean;
|
||||
};
|
||||
url?: {
|
||||
type: StringConstructor;
|
||||
value?: string;
|
||||
required?: boolean;
|
||||
};
|
||||
}
|
||||
1
components/grid/type.js
Normal file
1
components/grid/type.js
Normal file
@@ -0,0 +1 @@
|
||||
export {};
|
||||
Reference in New Issue
Block a user