New Huajishe Check ChaoXing
This commit is contained in:
@@ -0,0 +1,21 @@
|
||||
:: BASE_DOC ::
|
||||
|
||||
## API
|
||||
|
||||
### Col Props
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
style | Object | - | CSS(Cascading Style Sheets) | N
|
||||
custom-style | Object | - | CSS(Cascading Style Sheets),used to set style on virtual component | N
|
||||
offset | String / Number | - | \- | N
|
||||
span | String / Number | - | \- | N
|
||||
|
||||
|
||||
### Row Props
|
||||
|
||||
name | type | default | description | required
|
||||
-- | -- | -- | -- | --
|
||||
style | Object | - | CSS(Cascading Style Sheets) | N
|
||||
custom-style | Object | - | CSS(Cascading Style Sheets),used to set style on virtual component | N
|
||||
gutter | String / Number | - | \- | N
|
||||
@@ -0,0 +1,59 @@
|
||||
---
|
||||
title: Layout 布局
|
||||
description: 以规则的网格阵列来指导和规范页面中的版面布局以及信息分布,提高界面内布局的一致性,节约成本。
|
||||
spline: base
|
||||
isComponent: true
|
||||
---
|
||||
|
||||
## 引入
|
||||
|
||||
全局引入,在 miniprogram 根目录下的`app.json`中配置,局部引入,在需要引入的页面或组件的`index.json`中配置。
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
"t-row": "tdesign-miniprogram/row/row",
|
||||
"t-col": "tdesign-miniprogram/col/col"
|
||||
}
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
<a href="https://developers.weixin.qq.com/s/WwISnbmq7RSC" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
|
||||
|
||||
<blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
|
||||
<p>Tips: 请确保开发者工具为打开状态。导入开发者工具后,依次执行:npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p>
|
||||
</blockquote>
|
||||
|
||||
|
||||
### 组件类型
|
||||
|
||||
基础
|
||||
|
||||
{{ base }}
|
||||
|
||||
|
||||
增加间距
|
||||
|
||||
{{ offset }}
|
||||
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### Col Props
|
||||
|
||||
名称 | 类型 | 默认值 | 描述 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
style | Object | - | 样式 | N
|
||||
custom-style | Object | - | 样式,一般用于开启虚拟化组件节点场景 | N
|
||||
offset | String / Number | - | 列的偏移量(默认单位px) | N
|
||||
span | String / Number | - | 列的宽度(默认单位px) | N
|
||||
|
||||
|
||||
### Row Props
|
||||
|
||||
名称 | 类型 | 默认值 | 描述 | 必传
|
||||
-- | -- | -- | -- | --
|
||||
style | Object | - | 样式 | N
|
||||
custom-style | Object | - | 样式,一般用于开启虚拟化组件节点场景 | N
|
||||
gutter | String / Number | - | 列之间的间距(默认单位px) | N
|
||||
10
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/col/col.d.ts
vendored
Normal file
10
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/col/col.d.ts
vendored
Normal file
@@ -0,0 +1,10 @@
|
||||
import { SuperComponent, RelationsOptions } from '../common/src/index';
|
||||
export default class Col extends SuperComponent {
|
||||
externalClasses: string[];
|
||||
properties: import("./type").TdColProps;
|
||||
data: {
|
||||
prefix: string;
|
||||
classPrefix: string;
|
||||
};
|
||||
relations: RelationsOptions;
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
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 } from '../common/src/index';
|
||||
import config from '../common/config';
|
||||
import props from './props';
|
||||
const { prefix } = config;
|
||||
const name = `${prefix}-col`;
|
||||
let Col = class Col extends SuperComponent {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
this.externalClasses = [`${prefix}-class`];
|
||||
this.properties = props;
|
||||
this.data = {
|
||||
prefix,
|
||||
classPrefix: name,
|
||||
};
|
||||
this.relations = {
|
||||
'../row/row': {
|
||||
type: 'parent',
|
||||
},
|
||||
};
|
||||
}
|
||||
};
|
||||
Col = __decorate([
|
||||
wxComponent()
|
||||
], Col);
|
||||
export default Col;
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"component": true,
|
||||
"styleIsolation": "apply-shared",
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
<wxs src="../common/utils.wxs" module="_" />
|
||||
<wxs src="./col.wxs" module="utils" />
|
||||
|
||||
<view
|
||||
class="class {{prefix}}-class {{ _.cls(classPrefix, [span]) }} {{ offset ? classPrefix + '--offset-' + offset : '' }}"
|
||||
style="{{ utils.getColStyles(gutter, style, customStyle) }}"
|
||||
>
|
||||
<slot />
|
||||
</view>
|
||||
@@ -0,0 +1,17 @@
|
||||
var utils = require('../common/utils.wxs');
|
||||
|
||||
function getColStyles(gutter, style, customStyle) {
|
||||
var _style = '';
|
||||
if (gutter) {
|
||||
_style = utils._style({
|
||||
'padding-right': utils.addUnit(gutter / 2),
|
||||
'padding-left': utils.addUnit(gutter / 2),
|
||||
});
|
||||
}
|
||||
|
||||
return utils._style([style, customStyle]) + _style;
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
getColStyles: getColStyles,
|
||||
};
|
||||
@@ -0,0 +1,176 @@
|
||||
.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-col {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
min-height: 1px;
|
||||
}
|
||||
.t-col--1 {
|
||||
width: 4.16666667%;
|
||||
}
|
||||
.t-col--offset-1 {
|
||||
margin-left: 4.16666667%;
|
||||
}
|
||||
.t-col--2 {
|
||||
width: 8.33333333%;
|
||||
}
|
||||
.t-col--offset-2 {
|
||||
margin-left: 8.33333333%;
|
||||
}
|
||||
.t-col--3 {
|
||||
width: 12.5%;
|
||||
}
|
||||
.t-col--offset-3 {
|
||||
margin-left: 12.5%;
|
||||
}
|
||||
.t-col--4 {
|
||||
width: 16.66666667%;
|
||||
}
|
||||
.t-col--offset-4 {
|
||||
margin-left: 16.66666667%;
|
||||
}
|
||||
.t-col--5 {
|
||||
width: 20.83333333%;
|
||||
}
|
||||
.t-col--offset-5 {
|
||||
margin-left: 20.83333333%;
|
||||
}
|
||||
.t-col--6 {
|
||||
width: 25%;
|
||||
}
|
||||
.t-col--offset-6 {
|
||||
margin-left: 25%;
|
||||
}
|
||||
.t-col--7 {
|
||||
width: 29.16666667%;
|
||||
}
|
||||
.t-col--offset-7 {
|
||||
margin-left: 29.16666667%;
|
||||
}
|
||||
.t-col--8 {
|
||||
width: 33.33333333%;
|
||||
}
|
||||
.t-col--offset-8 {
|
||||
margin-left: 33.33333333%;
|
||||
}
|
||||
.t-col--9 {
|
||||
width: 37.5%;
|
||||
}
|
||||
.t-col--offset-9 {
|
||||
margin-left: 37.5%;
|
||||
}
|
||||
.t-col--10 {
|
||||
width: 41.66666667%;
|
||||
}
|
||||
.t-col--offset-10 {
|
||||
margin-left: 41.66666667%;
|
||||
}
|
||||
.t-col--11 {
|
||||
width: 45.83333333%;
|
||||
}
|
||||
.t-col--offset-11 {
|
||||
margin-left: 45.83333333%;
|
||||
}
|
||||
.t-col--12 {
|
||||
width: 50%;
|
||||
}
|
||||
.t-col--offset-12 {
|
||||
margin-left: 50%;
|
||||
}
|
||||
.t-col--13 {
|
||||
width: 54.16666667%;
|
||||
}
|
||||
.t-col--offset-13 {
|
||||
margin-left: 54.16666667%;
|
||||
}
|
||||
.t-col--14 {
|
||||
width: 58.33333333%;
|
||||
}
|
||||
.t-col--offset-14 {
|
||||
margin-left: 58.33333333%;
|
||||
}
|
||||
.t-col--15 {
|
||||
width: 62.5%;
|
||||
}
|
||||
.t-col--offset-15 {
|
||||
margin-left: 62.5%;
|
||||
}
|
||||
.t-col--16 {
|
||||
width: 66.66666667%;
|
||||
}
|
||||
.t-col--offset-16 {
|
||||
margin-left: 66.66666667%;
|
||||
}
|
||||
.t-col--17 {
|
||||
width: 70.83333333%;
|
||||
}
|
||||
.t-col--offset-17 {
|
||||
margin-left: 70.83333333%;
|
||||
}
|
||||
.t-col--18 {
|
||||
width: 75%;
|
||||
}
|
||||
.t-col--offset-18 {
|
||||
margin-left: 75%;
|
||||
}
|
||||
.t-col--19 {
|
||||
width: 79.16666667%;
|
||||
}
|
||||
.t-col--offset-19 {
|
||||
margin-left: 79.16666667%;
|
||||
}
|
||||
.t-col--20 {
|
||||
width: 83.33333333%;
|
||||
}
|
||||
.t-col--offset-20 {
|
||||
margin-left: 83.33333333%;
|
||||
}
|
||||
.t-col--21 {
|
||||
width: 87.5%;
|
||||
}
|
||||
.t-col--offset-21 {
|
||||
margin-left: 87.5%;
|
||||
}
|
||||
.t-col--22 {
|
||||
width: 91.66666667%;
|
||||
}
|
||||
.t-col--offset-22 {
|
||||
margin-left: 91.66666667%;
|
||||
}
|
||||
.t-col--23 {
|
||||
width: 95.83333333%;
|
||||
}
|
||||
.t-col--offset-23 {
|
||||
margin-left: 95.83333333%;
|
||||
}
|
||||
.t-col--24 {
|
||||
width: 100%;
|
||||
}
|
||||
.t-col--offset-24 {
|
||||
margin-left: 100%;
|
||||
}
|
||||
3
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/col/props.d.ts
vendored
Normal file
3
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/col/props.d.ts
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
import { TdColProps } from './type';
|
||||
declare const props: TdColProps;
|
||||
export default props;
|
||||
@@ -0,0 +1,9 @@
|
||||
const props = {
|
||||
offset: {
|
||||
type: null,
|
||||
},
|
||||
span: {
|
||||
type: null,
|
||||
},
|
||||
};
|
||||
export default props;
|
||||
10
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/col/type.d.ts
vendored
Normal file
10
HuajisheCheckChaoXing/miniprogram_npm/tdesign-miniprogram/col/type.d.ts
vendored
Normal file
@@ -0,0 +1,10 @@
|
||||
export interface TdColProps {
|
||||
offset?: {
|
||||
type: null;
|
||||
value?: string | number;
|
||||
};
|
||||
span?: {
|
||||
type: null;
|
||||
value?: string | number;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export {};
|
||||
Reference in New Issue
Block a user