Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: loading add fullscreen property #3427

Merged
merged 10 commits into from
Jan 8, 2025
Merged
12 changes: 6 additions & 6 deletions src/image-viewer/__test__/__snapshots__/index.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ exports[`image-viewer :base 1`] = `
tClassText="t-image--loading-text"
>
<wx-view
class="class t-class t-loading t-loading--horizontal"
style="width: 44rpx; height: 44rpx; color: inherit;"
class="class t-class t-loading t-loading--horizontal "
style="color: inherit;"
>
<wx-view
ariaLabel="加载中"
Expand Down Expand Up @@ -90,8 +90,8 @@ exports[`image-viewer :base 2`] = `
tClassText="t-image--loading-text"
>
<wx-view
class="class t-class t-loading t-loading--horizontal"
style="width: 44rpx; height: 44rpx; color: inherit;"
class="class t-class t-loading t-loading--horizontal "
style="color: inherit;"
>
<wx-view
ariaLabel="加载中"
Expand Down Expand Up @@ -159,8 +159,8 @@ exports[`image-viewer :base 3`] = `
tClassText="t-image--loading-text"
>
<wx-view
class="class t-class t-loading t-loading--horizontal"
style="width: 44rpx; height: 44rpx; color: inherit;"
class="class t-class t-loading t-loading--horizontal "
style="color: inherit;"
>
<wx-view
ariaLabel="加载中"
Expand Down
4 changes: 2 additions & 2 deletions src/image/__test__/__snapshots__/index.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ exports[`image :base 1`] = `
tClassText="t-image--loading-text"
>
<wx-view
class="class t-class t-loading t-loading--horizontal"
style="width: 44rpx; height: 44rpx; color: inherit;"
class="class t-class t-loading t-loading--horizontal "
style="color: inherit;"
>
<wx-view
ariaLabel="加载中"
Expand Down
4 changes: 3 additions & 1 deletion src/loading/README.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,18 @@ style | Object | - | CSS(Cascading Style Sheets) | N
custom-style | Object | - | CSS(Cascading Style Sheets),used to set style on virtual component | N
delay | Number | 0 | \- | N
duration | Number | 800 | \- | N
fullscreen | Boolean | false | `1.8.5` | N
indicator | Boolean / Slot | true | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
inherit-color | Boolean | false | \- | N
layout | String | horizontal | options: horizontal/vertical | N
loading | Boolean | true | \- | N
pause | Boolean | false | \- | N
progress | Number | - | \- | N
reverse | Boolean | - | \- | N
size | String | '40rpx' | \- | N
size | String | '20px' | \- | N
text | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
theme | String | circular | options: circular/spinner/dots | N

### Loading External Classes

className | Description
Expand Down
4 changes: 3 additions & 1 deletion src/loading/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -66,16 +66,18 @@ style | Object | - | 样式 | N
custom-style | Object | - | 样式,一般用于开启虚拟化组件节点场景 | N
delay | Number | 0 | 延迟显示加载效果的时间,用于防止请求速度过快引起的加载闪烁,单位:毫秒 | N
duration | Number | 800 | 加载动画执行完成一次的时间,单位:毫秒 | N
fullscreen | Boolean | false | `1.8.5`。是否显示为全屏加载 | N
indicator | Boolean / Slot | true | 加载指示符,值为 true 显示默认指示符,值为 false 则不显示,也可以自定义指示符。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
inherit-color | Boolean | false | 是否继承父元素颜色 | N
layout | String | horizontal | 对齐方式。可选项:horizontal/vertical | N
loading | Boolean | true | 是否处于加载状态 | N
pause | Boolean | false | 是否暂停动画 | N
progress | Number | - | 加载进度 | N
reverse | Boolean | - | 加载动画是否反向 | N
size | String | '40rpx' | 尺寸,示例:40rpx/20px | N
size | String | '20px' | 尺寸,示例:20px | N
text | String / Slot | - | 加载提示文案。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
theme | String | circular | 加载组件类型。可选项:circular/spinner/dots,skyline 模式下暂不支持枚举值 circular | N

### Loading External Classes

类名 | 描述
Expand Down
16 changes: 16 additions & 0 deletions src/loading/loading.less
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,29 @@
@loading-text-color: var(--td-loading-text-color, @text-color-primary);
@loading-text-font-size: var(--td-loading-text-font-size, 24rpx);
@loading-text-line-height: var(--td-loading-text-line-height, 40rpx);
@loading-z-index: var(--td-loading-z-index, 3500);
@loading-full-bg-color: var(--td-loading-full-bg-color, rgba(255, 255, 255, 0.6));

.@{loading} {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 24rpx;

&--fullscreen {
anlyyao marked this conversation as resolved.
Show resolved Hide resolved
position: fixed;
display: flex;
align-items: center;
vertical-align: middle;
justify-content: center;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: @loading-z-index;
background-color: @loading-full-bg-color;
}

&__spinner {
position: relative;
box-sizing: border-box;
Expand Down
4 changes: 2 additions & 2 deletions src/loading/loading.wxml
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<wxs src="../common/utils.wxs" module="_" />
<view
style="{{_._style([style, customStyle, !text ? ('width: ' + _.addUnit(size) + '; height: ' + _.addUnit(size)) : '', show ? '' : 'display: none', inheritColor ? 'color: inherit' : ''])}}"
class="class {{prefix}}-class {{classPrefix}} {{classPrefix + '--' + layout}}"
style="{{_._style([style, customStyle, show ? '' : 'display: none', inheritColor ? 'color: inherit' : ''])}}"
class="class {{prefix}}-class {{classPrefix}} {{classPrefix + '--' + layout}} {{fullscreen ? classPrefix + '--fullscreen' : ''}}"
>
<view
wx:if="{{indicator}}"
Expand Down
11 changes: 6 additions & 5 deletions src/loading/props.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,10 @@ const props: TdLoadingProps = {
type: Number,
value: 800,
},
/** 组件类名,分别用于设置加载组件外层元素,加载组件文本,加载组件指示符,加载指示符内侧同心圆等元素类名 */
externalClasses: {
type: Array,
/** 是否显示为全屏加载 */
fullscreen: {
type: Boolean,
value: false,
},
/** 加载指示符,值为 true 显示默认指示符,值为 false 则不显示,也可以自定义指示符 */
indicator: {
Expand Down Expand Up @@ -53,10 +54,10 @@ const props: TdLoadingProps = {
reverse: {
type: Boolean,
},
/** 尺寸,示例:40rpx/20px */
/** 尺寸,示例:20px */
size: {
type: String,
value: '40rpx',
value: '20px',
},
/** 加载提示文案 */
text: {
Expand Down
13 changes: 7 additions & 6 deletions src/loading/type.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,12 @@ export interface TdLoadingProps {
value?: number;
};
/**
* 组件类名,分别用于设置加载组件外层元素,加载组件文本,加载组件指示符,加载指示符内侧同心圆等元素类名
* 是否显示为全屏加载
* @default false
*/
externalClasses?: {
type: ArrayConstructor;
value?: ['t-class', 't-class-text', 't-class-indicator'];
fullscreen?: {
type: BooleanConstructor;
value?: boolean;
};
/**
* 加载指示符,值为 true 显示默认指示符,值为 false 则不显示,也可以自定义指示符
Expand Down Expand Up @@ -83,8 +84,8 @@ export interface TdLoadingProps {
value?: boolean;
};
/**
* 尺寸,示例:40rpx/20px
* @default '40rpx'
* 尺寸,示例:20px
* @default '20px'
*/
size?: {
type: StringConstructor;
Expand Down
Loading