mdui 2.0.3 → 2.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/avatar/index.d.ts +13 -13
- package/components/avatar/index.js +4 -4
- package/components/badge/index.d.ts +7 -6
- package/components/badge/index.js +6 -5
- package/components/bottom-app-bar/index.d.ts +4 -3
- package/components/bottom-app-bar/index.js +3 -3
- package/components/button/button-base-style.js +1 -1
- package/components/button/button-base.d.ts +43 -44
- package/components/button/button-base.js +20 -20
- package/components/button/index.d.ts +13 -13
- package/components/button/index.js +12 -12
- package/components/button-icon/index.d.ts +8 -8
- package/components/button-icon/index.js +7 -7
- package/components/card/index.d.ts +8 -8
- package/components/card/index.js +7 -7
- package/components/checkbox/index.d.ts +20 -20
- package/components/checkbox/index.js +18 -18
- package/components/chip/index.d.ts +19 -19
- package/components/chip/index.js +16 -16
- package/components/circular-progress/index.d.ts +2 -2
- package/components/circular-progress/index.js +1 -1
- package/components/collapse/collapse-item.d.ts +4 -4
- package/components/collapse/collapse-item.js +2 -2
- package/components/collapse/collapse.d.ts +6 -9
- package/components/collapse/collapse.js +4 -4
- package/components/dialog/index.d.ts +13 -13
- package/components/dialog/index.js +13 -13
- package/components/divider/index.d.ts +3 -3
- package/components/divider/index.js +3 -3
- package/components/dropdown/index.d.ts +35 -35
- package/components/dropdown/index.js +33 -33
- package/components/fab/index.d.ts +6 -6
- package/components/fab/index.js +6 -6
- package/components/layout/layout-item.d.ts +7 -7
- package/components/layout/layout-item.js +6 -6
- package/components/layout/layout-main.d.ts +2 -2
- package/components/layout/layout-main.js +2 -2
- package/components/layout/layout.d.ts +2 -2
- package/components/layout/layout.js +2 -2
- package/components/linear-progress/index.d.ts +4 -4
- package/components/linear-progress/index.js +3 -3
- package/components/list/list-item.d.ts +17 -17
- package/components/list/list-item.js +7 -7
- package/components/list/list-subheader.d.ts +2 -2
- package/components/list/list-subheader.js +2 -2
- package/components/list/list.d.ts +1 -1
- package/components/list/list.js +1 -1
- package/components/menu/menu-item.d.ts +4 -4
- package/components/menu/menu-item.js +2 -2
- package/components/menu/menu.d.ts +15 -18
- package/components/menu/menu.js +8 -8
- package/components/navigation-bar/navigation-bar-item.d.ts +5 -5
- package/components/navigation-bar/navigation-bar-item.js +4 -4
- package/components/navigation-bar/navigation-bar.d.ts +9 -8
- package/components/navigation-bar/navigation-bar.js +6 -6
- package/components/navigation-drawer/index.d.ts +19 -20
- package/components/navigation-drawer/index.js +44 -30
- package/components/navigation-rail/navigation-rail-item.d.ts +6 -6
- package/components/navigation-rail/navigation-rail-item.js +4 -4
- package/components/navigation-rail/navigation-rail.d.ts +10 -11
- package/components/navigation-rail/navigation-rail.js +9 -10
- package/components/radio/radio-group.d.ts +13 -13
- package/components/radio/radio-group.js +11 -11
- package/components/radio/radio.d.ts +3 -3
- package/components/radio/radio.js +3 -3
- package/components/range-slider/index.d.ts +4 -5
- package/components/range-slider/index.js +4 -5
- package/components/segmented-button/segmented-button-group.d.ts +17 -20
- package/components/segmented-button/segmented-button-group.js +11 -14
- package/components/segmented-button/segmented-button.d.ts +3 -3
- package/components/segmented-button/segmented-button.js +3 -3
- package/components/select/index.d.ts +31 -32
- package/components/select/index.js +19 -20
- package/components/slider/index.d.ts +1 -1
- package/components/slider/index.js +1 -1
- package/components/slider/slider-base.d.ts +15 -15
- package/components/slider/slider-base.js +13 -13
- package/components/snackbar/index.d.ts +21 -21
- package/components/snackbar/index.js +15 -15
- package/components/switch/index.d.ts +14 -14
- package/components/switch/index.js +11 -11
- package/components/tabs/tab-panel.d.ts +3 -3
- package/components/tabs/tab-panel.js +2 -2
- package/components/tabs/tab.d.ts +6 -6
- package/components/tabs/tab.js +5 -5
- package/components/tabs/tabs.d.ts +19 -19
- package/components/tabs/tabs.js +17 -17
- package/components/text-field/index.d.ts +51 -51
- package/components/text-field/index.js +25 -25
- package/components/tooltip/index.d.ts +31 -31
- package/components/tooltip/index.js +28 -28
- package/components/top-app-bar/top-app-bar-title.d.ts +4 -4
- package/components/top-app-bar/top-app-bar-title.js +4 -4
- package/components/top-app-bar/top-app-bar.d.ts +5 -5
- package/components/top-app-bar/top-app-bar.js +4 -4
- package/css-data.en.json +2826 -0
- package/css-data.zh-cn.json +374 -367
- package/custom-elements.json +1072 -1115
- package/html-data.en.json +6551 -0
- package/html-data.zh-cn.json +1420 -1435
- package/jsx.en.d.ts +3303 -0
- package/jsx.zh-cn.d.ts +3351 -0
- package/mdui.esm.js +9 -9
- package/mdui.global.js +5 -5
- package/package.json +6 -5
- package/web-types.en.json +11718 -0
- package/web-types.zh-cn.json +3222 -3232
|
@@ -24,10 +24,10 @@ import { style } from './style.js';
|
|
|
24
24
|
* <mdui-dialog>content</mdui-dialog>
|
|
25
25
|
* ```
|
|
26
26
|
*
|
|
27
|
-
* @event open -
|
|
28
|
-
* @event opened -
|
|
29
|
-
* @event close -
|
|
30
|
-
* @event closed -
|
|
27
|
+
* @event open - 对话框开始打开时触发。可以通过调用 `event.preventDefault()` 阻止对话框打开
|
|
28
|
+
* @event opened - 对话框打开动画完成后触发
|
|
29
|
+
* @event close - 对话框开始关闭时触发。可以通过调用 `event.preventDefault()` 阻止对话框关闭
|
|
30
|
+
* @event closed - 对话框关闭动画完成后触发
|
|
31
31
|
* @event overlay-click - 点击遮罩层时触发
|
|
32
32
|
*
|
|
33
33
|
* @slot header - 顶部元素,默认包含 `icon` slot 和 `headline` slot
|
|
@@ -39,15 +39,15 @@ import { style } from './style.js';
|
|
|
39
39
|
*
|
|
40
40
|
* @csspart overlay - 遮罩层
|
|
41
41
|
* @csspart panel - 对话框容器
|
|
42
|
-
* @csspart header - 对话框 header
|
|
43
|
-
* @csspart icon -
|
|
44
|
-
* @csspart headline -
|
|
45
|
-
* @csspart body -
|
|
42
|
+
* @csspart header - 对话框 header 部分,包含 icon 和 headline
|
|
43
|
+
* @csspart icon - 顶部图标,位于 header 中
|
|
44
|
+
* @csspart headline - 顶部标题,位于 header 中
|
|
45
|
+
* @csspart body - 对话框 body 部分
|
|
46
46
|
* @csspart description - 副文本部分,位于 body 中
|
|
47
47
|
* @csspart action - 底部操作按钮
|
|
48
48
|
*
|
|
49
|
-
* @cssprop --shape-corner -
|
|
50
|
-
* @cssprop --z-index - 组件的 CSS
|
|
49
|
+
* @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
|
50
|
+
* @cssprop --z-index - 组件的 CSS `z-index` 值
|
|
51
51
|
*/
|
|
52
52
|
let Dialog = class Dialog extends MduiElement {
|
|
53
53
|
constructor() {
|
|
@@ -57,15 +57,15 @@ let Dialog = class Dialog extends MduiElement {
|
|
|
57
57
|
*/
|
|
58
58
|
this.open = false;
|
|
59
59
|
/**
|
|
60
|
-
*
|
|
60
|
+
* 是否全屏显示对话框
|
|
61
61
|
*/
|
|
62
62
|
this.fullscreen = false;
|
|
63
63
|
/**
|
|
64
|
-
*
|
|
64
|
+
* 是否允许按下 ESC 键关闭对话框
|
|
65
65
|
*/
|
|
66
66
|
this.closeOnEsc = false;
|
|
67
67
|
/**
|
|
68
|
-
*
|
|
68
|
+
* 是否允许点击遮罩层关闭对话框
|
|
69
69
|
*/
|
|
70
70
|
this.closeOnOverlayClick = false;
|
|
71
71
|
/**
|
|
@@ -10,15 +10,15 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
|
|
|
10
10
|
export declare class Divider extends MduiElement<DividerEventMap> {
|
|
11
11
|
static styles: CSSResultGroup;
|
|
12
12
|
/**
|
|
13
|
-
*
|
|
13
|
+
* 是否为垂直分割线
|
|
14
14
|
*/
|
|
15
15
|
vertical: boolean;
|
|
16
16
|
/**
|
|
17
|
-
*
|
|
17
|
+
* 是否进行左侧缩进
|
|
18
18
|
*/
|
|
19
19
|
inset: boolean;
|
|
20
20
|
/**
|
|
21
|
-
*
|
|
21
|
+
* 是否进行左右两侧缩进
|
|
22
22
|
*/
|
|
23
23
|
middle: boolean;
|
|
24
24
|
protected render(): TemplateResult;
|
|
@@ -16,15 +16,15 @@ let Divider = class Divider extends MduiElement {
|
|
|
16
16
|
constructor() {
|
|
17
17
|
super(...arguments);
|
|
18
18
|
/**
|
|
19
|
-
*
|
|
19
|
+
* 是否为垂直分割线
|
|
20
20
|
*/
|
|
21
21
|
this.vertical = false;
|
|
22
22
|
/**
|
|
23
|
-
*
|
|
23
|
+
* 是否进行左侧缩进
|
|
24
24
|
*/
|
|
25
25
|
this.inset = false;
|
|
26
26
|
/**
|
|
27
|
-
*
|
|
27
|
+
* 是否进行左右两侧缩进
|
|
28
28
|
*/
|
|
29
29
|
this.middle = false;
|
|
30
30
|
}
|
|
@@ -16,71 +16,71 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
|
|
|
16
16
|
* </mdui-dropdown>
|
|
17
17
|
* ```
|
|
18
18
|
*
|
|
19
|
-
* @event open -
|
|
20
|
-
* @event opened -
|
|
21
|
-
* @event close -
|
|
22
|
-
* @event closed -
|
|
19
|
+
* @event open - 下拉组件开始打开时,事件被触发。可以通过调用 `event.preventDefault()` 阻止下拉组件打开
|
|
20
|
+
* @event opened - 下拉组件打开动画完成时,事件被触发
|
|
21
|
+
* @event close - 下拉组件开始关闭时,事件被触发。可以通过调用 `event.preventDefault()` 阻止下拉组件关闭
|
|
22
|
+
* @event closed - 下拉组件关闭动画完成时,事件被触发
|
|
23
23
|
*
|
|
24
|
-
* @slot -
|
|
25
|
-
* @slot trigger -
|
|
24
|
+
* @slot - 下拉组件的内容
|
|
25
|
+
* @slot trigger - 触发下拉组件的元素,例如 [`<mdui-button>`](/docs/2/components/button) 元素
|
|
26
26
|
*
|
|
27
|
-
* @csspart trigger -
|
|
28
|
-
* @csspart panel -
|
|
27
|
+
* @csspart trigger - 触发下拉组件的元素的容器,即 `trigger` slot 的容器
|
|
28
|
+
* @csspart panel - 下拉组件内容的容器
|
|
29
29
|
*
|
|
30
|
-
* @cssprop --z-index - 组件的 CSS
|
|
30
|
+
* @cssprop --z-index - 组件的 CSS `z-index` 值
|
|
31
31
|
*/
|
|
32
32
|
export declare class Dropdown extends MduiElement<DropdownEventMap> {
|
|
33
33
|
static styles: CSSResultGroup;
|
|
34
34
|
/**
|
|
35
|
-
*
|
|
35
|
+
* 是否打开下拉组件
|
|
36
36
|
*/
|
|
37
37
|
open: boolean;
|
|
38
38
|
/**
|
|
39
|
-
*
|
|
39
|
+
* 是否禁用下拉组件
|
|
40
40
|
*/
|
|
41
41
|
disabled: boolean;
|
|
42
42
|
/**
|
|
43
|
-
*
|
|
43
|
+
* 下拉组件的触发方式,支持多个值,用空格分隔。可选值包括:
|
|
44
44
|
*
|
|
45
|
-
* * `click
|
|
45
|
+
* * `click`:点击触发
|
|
46
46
|
* * `hover`:鼠标悬浮触发
|
|
47
|
-
* * `focus
|
|
48
|
-
* * `contextmenu
|
|
49
|
-
* * `manual
|
|
47
|
+
* * `focus`:聚焦触发
|
|
48
|
+
* * `contextmenu`:鼠标右键点击、或触摸长按触发
|
|
49
|
+
* * `manual`:仅能通过编程方式打开和关闭下拉组件,不能再指定其他触发方式
|
|
50
50
|
*/
|
|
51
|
-
trigger:
|
|
51
|
+
trigger: /*点击触发*/ 'click' | /*鼠标悬浮触发*/ 'hover' | /*聚焦触发*/ 'focus' | /*鼠标右键点击、或触摸长按触发*/ 'contextmenu' | /*仅能通过编程方式打开和关闭下拉组件,不能再指定其他触发方式*/ 'manual' | string;
|
|
52
52
|
/**
|
|
53
|
-
*
|
|
53
|
+
* 下拉组件内容的位置。可选值包括:
|
|
54
54
|
*
|
|
55
55
|
* * `auto`:自动判断位置
|
|
56
|
-
* * `top-start
|
|
57
|
-
* * `top
|
|
58
|
-
* * `top-end
|
|
59
|
-
* * `bottom-start
|
|
60
|
-
* * `bottom
|
|
61
|
-
* * `bottom-end
|
|
62
|
-
* * `left-start
|
|
63
|
-
* * `left
|
|
64
|
-
* * `left-end
|
|
65
|
-
* * `right-start
|
|
66
|
-
* * `right
|
|
67
|
-
* * `right-end
|
|
56
|
+
* * `top-start`:上方左对齐
|
|
57
|
+
* * `top`:上方居中
|
|
58
|
+
* * `top-end`:上方右对齐
|
|
59
|
+
* * `bottom-start`:下方左对齐
|
|
60
|
+
* * `bottom`:下方居中
|
|
61
|
+
* * `bottom-end`:下方右对齐
|
|
62
|
+
* * `left-start`:左侧顶部对齐
|
|
63
|
+
* * `left`:左侧居中
|
|
64
|
+
* * `left-end`:左侧底部对齐
|
|
65
|
+
* * `right-start`:右侧顶部对齐
|
|
66
|
+
* * `right`:右侧居中
|
|
67
|
+
* * `right-end`:右侧底部对齐
|
|
68
68
|
*/
|
|
69
|
-
placement: /*自动判断位置*/ 'auto' |
|
|
69
|
+
placement: /*自动判断位置*/ 'auto' | /*上方左对齐*/ 'top-start' | /*上方居中*/ 'top' | /*上方右对齐*/ 'top-end' | /*下方左对齐*/ 'bottom-start' | /*下方居中*/ 'bottom' | /*下方右对齐*/ 'bottom-end' | /*左侧顶部对齐*/ 'left-start' | /*左侧居中*/ 'left' | /*左侧底部对齐*/ 'left-end' | /*右侧顶部对齐*/ 'right-start' | /*右侧居中*/ 'right' | /*右侧底部对齐*/ 'right-end';
|
|
70
70
|
/**
|
|
71
|
-
*
|
|
71
|
+
* 点击 [`<mdui-menu-item>`](/docs/2/components/menu#menu-item-api) 后,下拉组件是否保持打开状态
|
|
72
72
|
*/
|
|
73
73
|
stayOpenOnClick: boolean;
|
|
74
74
|
/**
|
|
75
|
-
*
|
|
75
|
+
* 鼠标悬浮触发下拉组件打开的延时,单位为毫秒
|
|
76
76
|
*/
|
|
77
77
|
openDelay: number;
|
|
78
78
|
/**
|
|
79
|
-
*
|
|
79
|
+
* 鼠标悬浮触发下拉组件关闭的延时,单位为毫秒
|
|
80
80
|
*/
|
|
81
81
|
closeDelay: number;
|
|
82
82
|
/**
|
|
83
|
-
*
|
|
83
|
+
* 是否在触发下拉组件的光标位置打开下拉组件,常用于打开鼠标右键菜单
|
|
84
84
|
*/
|
|
85
85
|
openOnPointer: boolean;
|
|
86
86
|
private readonly triggerElements;
|
|
@@ -30,72 +30,72 @@ import { style } from './style.js';
|
|
|
30
30
|
* </mdui-dropdown>
|
|
31
31
|
* ```
|
|
32
32
|
*
|
|
33
|
-
* @event open -
|
|
34
|
-
* @event opened -
|
|
35
|
-
* @event close -
|
|
36
|
-
* @event closed -
|
|
33
|
+
* @event open - 下拉组件开始打开时,事件被触发。可以通过调用 `event.preventDefault()` 阻止下拉组件打开
|
|
34
|
+
* @event opened - 下拉组件打开动画完成时,事件被触发
|
|
35
|
+
* @event close - 下拉组件开始关闭时,事件被触发。可以通过调用 `event.preventDefault()` 阻止下拉组件关闭
|
|
36
|
+
* @event closed - 下拉组件关闭动画完成时,事件被触发
|
|
37
37
|
*
|
|
38
|
-
* @slot -
|
|
39
|
-
* @slot trigger -
|
|
38
|
+
* @slot - 下拉组件的内容
|
|
39
|
+
* @slot trigger - 触发下拉组件的元素,例如 [`<mdui-button>`](/docs/2/components/button) 元素
|
|
40
40
|
*
|
|
41
|
-
* @csspart trigger -
|
|
42
|
-
* @csspart panel -
|
|
41
|
+
* @csspart trigger - 触发下拉组件的元素的容器,即 `trigger` slot 的容器
|
|
42
|
+
* @csspart panel - 下拉组件内容的容器
|
|
43
43
|
*
|
|
44
|
-
* @cssprop --z-index - 组件的 CSS
|
|
44
|
+
* @cssprop --z-index - 组件的 CSS `z-index` 值
|
|
45
45
|
*/
|
|
46
46
|
let Dropdown = class Dropdown extends MduiElement {
|
|
47
47
|
constructor() {
|
|
48
48
|
super();
|
|
49
49
|
/**
|
|
50
|
-
*
|
|
50
|
+
* 是否打开下拉组件
|
|
51
51
|
*/
|
|
52
52
|
this.open = false;
|
|
53
53
|
/**
|
|
54
|
-
*
|
|
54
|
+
* 是否禁用下拉组件
|
|
55
55
|
*/
|
|
56
56
|
this.disabled = false;
|
|
57
57
|
/**
|
|
58
|
-
*
|
|
58
|
+
* 下拉组件的触发方式,支持多个值,用空格分隔。可选值包括:
|
|
59
59
|
*
|
|
60
|
-
* * `click
|
|
60
|
+
* * `click`:点击触发
|
|
61
61
|
* * `hover`:鼠标悬浮触发
|
|
62
|
-
* * `focus
|
|
63
|
-
* * `contextmenu
|
|
64
|
-
* * `manual
|
|
62
|
+
* * `focus`:聚焦触发
|
|
63
|
+
* * `contextmenu`:鼠标右键点击、或触摸长按触发
|
|
64
|
+
* * `manual`:仅能通过编程方式打开和关闭下拉组件,不能再指定其他触发方式
|
|
65
65
|
*/
|
|
66
66
|
this.trigger = 'click';
|
|
67
67
|
/**
|
|
68
|
-
*
|
|
68
|
+
* 下拉组件内容的位置。可选值包括:
|
|
69
69
|
*
|
|
70
70
|
* * `auto`:自动判断位置
|
|
71
|
-
* * `top-start
|
|
72
|
-
* * `top
|
|
73
|
-
* * `top-end
|
|
74
|
-
* * `bottom-start
|
|
75
|
-
* * `bottom
|
|
76
|
-
* * `bottom-end
|
|
77
|
-
* * `left-start
|
|
78
|
-
* * `left
|
|
79
|
-
* * `left-end
|
|
80
|
-
* * `right-start
|
|
81
|
-
* * `right
|
|
82
|
-
* * `right-end
|
|
71
|
+
* * `top-start`:上方左对齐
|
|
72
|
+
* * `top`:上方居中
|
|
73
|
+
* * `top-end`:上方右对齐
|
|
74
|
+
* * `bottom-start`:下方左对齐
|
|
75
|
+
* * `bottom`:下方居中
|
|
76
|
+
* * `bottom-end`:下方右对齐
|
|
77
|
+
* * `left-start`:左侧顶部对齐
|
|
78
|
+
* * `left`:左侧居中
|
|
79
|
+
* * `left-end`:左侧底部对齐
|
|
80
|
+
* * `right-start`:右侧顶部对齐
|
|
81
|
+
* * `right`:右侧居中
|
|
82
|
+
* * `right-end`:右侧底部对齐
|
|
83
83
|
*/
|
|
84
84
|
this.placement = 'auto';
|
|
85
85
|
/**
|
|
86
|
-
*
|
|
86
|
+
* 点击 [`<mdui-menu-item>`](/docs/2/components/menu#menu-item-api) 后,下拉组件是否保持打开状态
|
|
87
87
|
*/
|
|
88
88
|
this.stayOpenOnClick = false;
|
|
89
89
|
/**
|
|
90
|
-
*
|
|
90
|
+
* 鼠标悬浮触发下拉组件打开的延时,单位为毫秒
|
|
91
91
|
*/
|
|
92
92
|
this.openDelay = 150;
|
|
93
93
|
/**
|
|
94
|
-
*
|
|
94
|
+
* 鼠标悬浮触发下拉组件关闭的延时,单位为毫秒
|
|
95
95
|
*/
|
|
96
96
|
this.closeDelay = 150;
|
|
97
97
|
/**
|
|
98
|
-
*
|
|
98
|
+
* 是否在触发下拉组件的光标位置打开下拉组件,常用于打开鼠标右键菜单
|
|
99
99
|
*/
|
|
100
100
|
this.openOnPointer = false;
|
|
101
101
|
this.panelRef = createRef();
|
|
@@ -16,19 +16,19 @@ import type { TemplateResult, CSSResultGroup } from 'lit';
|
|
|
16
16
|
* @slot - 文本
|
|
17
17
|
* @slot icon - 图标
|
|
18
18
|
*
|
|
19
|
-
* @csspart button - 内部的
|
|
19
|
+
* @csspart button - 内部的 `<button>` 或 `<a>` 元素
|
|
20
20
|
* @csspart label - 右侧的文本
|
|
21
21
|
* @csspart icon - 左侧的图标
|
|
22
22
|
* @csspart loading - 加载中状态的 `<mdui-circular-progress>` 元素
|
|
23
23
|
*
|
|
24
|
-
* @cssprop --shape-corner-small - `size="small"`
|
|
25
|
-
* @cssprop --shape-corner-normal - `size="normal"`
|
|
26
|
-
* @cssprop --shape-corner-large - `size="large"`
|
|
24
|
+
* @cssprop --shape-corner-small - `size="small"` 时,组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
|
25
|
+
* @cssprop --shape-corner-normal - `size="normal"` 时,组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
|
26
|
+
* @cssprop --shape-corner-large - `size="large"` 时,组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
|
27
27
|
*/
|
|
28
28
|
export declare class Fab extends ButtonBase<FabEventMap> {
|
|
29
29
|
static styles: CSSResultGroup;
|
|
30
30
|
/**
|
|
31
|
-
* FAB
|
|
31
|
+
* FAB 的形状,此组件的不同形状之间只有颜色不一样。可选值包括:
|
|
32
32
|
*
|
|
33
33
|
* * `primary`:使用 Primary container 背景色
|
|
34
34
|
* * `surface`:使用 Surface container high 背景色
|
|
@@ -37,7 +37,7 @@ export declare class Fab extends ButtonBase<FabEventMap> {
|
|
|
37
37
|
*/
|
|
38
38
|
variant: /*使用 Primary container 背景色*/ 'primary' | /*使用 Surface container high 背景色*/ 'surface' | /*使用 Secondary container 背景色*/ 'secondary' | /*使用 Tertiary container 背景色*/ 'tertiary';
|
|
39
39
|
/**
|
|
40
|
-
* FAB
|
|
40
|
+
* FAB 的大小。可选值包括:
|
|
41
41
|
* * `normal`:普通大小 FAB
|
|
42
42
|
* * `small`:小型 FAB
|
|
43
43
|
* * `large`:大型 FAB
|
package/components/fab/index.js
CHANGED
|
@@ -26,20 +26,20 @@ import { style } from './style.js';
|
|
|
26
26
|
* @slot - 文本
|
|
27
27
|
* @slot icon - 图标
|
|
28
28
|
*
|
|
29
|
-
* @csspart button - 内部的
|
|
29
|
+
* @csspart button - 内部的 `<button>` 或 `<a>` 元素
|
|
30
30
|
* @csspart label - 右侧的文本
|
|
31
31
|
* @csspart icon - 左侧的图标
|
|
32
32
|
* @csspart loading - 加载中状态的 `<mdui-circular-progress>` 元素
|
|
33
33
|
*
|
|
34
|
-
* @cssprop --shape-corner-small - `size="small"`
|
|
35
|
-
* @cssprop --shape-corner-normal - `size="normal"`
|
|
36
|
-
* @cssprop --shape-corner-large - `size="large"`
|
|
34
|
+
* @cssprop --shape-corner-small - `size="small"` 时,组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
|
35
|
+
* @cssprop --shape-corner-normal - `size="normal"` 时,组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
|
36
|
+
* @cssprop --shape-corner-large - `size="large"` 时,组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
|
37
37
|
*/
|
|
38
38
|
let Fab = class Fab extends ButtonBase {
|
|
39
39
|
constructor() {
|
|
40
40
|
super(...arguments);
|
|
41
41
|
/**
|
|
42
|
-
* FAB
|
|
42
|
+
* FAB 的形状,此组件的不同形状之间只有颜色不一样。可选值包括:
|
|
43
43
|
*
|
|
44
44
|
* * `primary`:使用 Primary container 背景色
|
|
45
45
|
* * `surface`:使用 Surface container high 背景色
|
|
@@ -48,7 +48,7 @@ let Fab = class Fab extends ButtonBase {
|
|
|
48
48
|
*/
|
|
49
49
|
this.variant = 'primary';
|
|
50
50
|
/**
|
|
51
|
-
* FAB
|
|
51
|
+
* FAB 的大小。可选值包括:
|
|
52
52
|
* * `normal`:普通大小 FAB
|
|
53
53
|
* * `small`:小型 FAB
|
|
54
54
|
* * `large`:大型 FAB
|
|
@@ -12,19 +12,19 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
|
|
|
12
12
|
* </mdui-layout>
|
|
13
13
|
* ```
|
|
14
14
|
*
|
|
15
|
-
* @slot -
|
|
15
|
+
* @slot - 可以包含任意内容
|
|
16
16
|
*/
|
|
17
17
|
export declare class LayoutItem extends LayoutItemBase<LayoutItemEventMap> {
|
|
18
18
|
static styles: CSSResultGroup;
|
|
19
19
|
/**
|
|
20
|
-
*
|
|
20
|
+
* 组件的位置。可选值包括:
|
|
21
21
|
*
|
|
22
|
-
* * `top
|
|
23
|
-
* * `bottom
|
|
24
|
-
* * `left
|
|
25
|
-
* * `right
|
|
22
|
+
* * `top`:上方
|
|
23
|
+
* * `bottom`:下方
|
|
24
|
+
* * `left`:左侧
|
|
25
|
+
* * `right`:右侧
|
|
26
26
|
*/
|
|
27
|
-
placement:
|
|
27
|
+
placement: /*上方*/ 'top' | /*下方*/ 'bottom' | /*左侧*/ 'left' | /*右侧*/ 'right';
|
|
28
28
|
protected get layoutPlacement(): LayoutPlacement;
|
|
29
29
|
private onPlacementChange;
|
|
30
30
|
protected render(): TemplateResult;
|
|
@@ -16,18 +16,18 @@ import { layoutItemStyle } from './layout-item-style.js';
|
|
|
16
16
|
* </mdui-layout>
|
|
17
17
|
* ```
|
|
18
18
|
*
|
|
19
|
-
* @slot -
|
|
19
|
+
* @slot - 可以包含任意内容
|
|
20
20
|
*/
|
|
21
21
|
let LayoutItem = class LayoutItem extends LayoutItemBase {
|
|
22
22
|
constructor() {
|
|
23
23
|
super(...arguments);
|
|
24
24
|
/**
|
|
25
|
-
*
|
|
25
|
+
* 组件的位置。可选值包括:
|
|
26
26
|
*
|
|
27
|
-
* * `top
|
|
28
|
-
* * `bottom
|
|
29
|
-
* * `left
|
|
30
|
-
* * `right
|
|
27
|
+
* * `top`:上方
|
|
28
|
+
* * `bottom`:下方
|
|
29
|
+
* * `left`:左侧
|
|
30
|
+
* * `right`:右侧
|
|
31
31
|
*/
|
|
32
32
|
this.placement = 'top';
|
|
33
33
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { MduiElement } from '@mdui/shared/base/mdui-element.js';
|
|
2
2
|
import type { CSSResultGroup, TemplateResult } from 'lit';
|
|
3
3
|
/**
|
|
4
|
-
* @summary
|
|
4
|
+
* @summary 布局主体内容组件
|
|
5
5
|
*
|
|
6
6
|
* ```html
|
|
7
7
|
* <mdui-layout>
|
|
@@ -11,7 +11,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
|
|
|
11
11
|
* </mdui-layout>
|
|
12
12
|
* ```
|
|
13
13
|
*
|
|
14
|
-
* @slot -
|
|
14
|
+
* @slot - 可以包含任意内容
|
|
15
15
|
*/
|
|
16
16
|
export declare class LayoutMain extends MduiElement<LayoutMainEventMap> {
|
|
17
17
|
static styles: CSSResultGroup;
|
|
@@ -7,7 +7,7 @@ import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
|
|
|
7
7
|
import { getLayout } from './helper.js';
|
|
8
8
|
import { layoutMainStyle } from './layout-main-style.js';
|
|
9
9
|
/**
|
|
10
|
-
* @summary
|
|
10
|
+
* @summary 布局主体内容组件
|
|
11
11
|
*
|
|
12
12
|
* ```html
|
|
13
13
|
* <mdui-layout>
|
|
@@ -17,7 +17,7 @@ import { layoutMainStyle } from './layout-main-style.js';
|
|
|
17
17
|
* </mdui-layout>
|
|
18
18
|
* ```
|
|
19
19
|
*
|
|
20
|
-
* @slot -
|
|
20
|
+
* @slot - 可以包含任意内容
|
|
21
21
|
*/
|
|
22
22
|
let LayoutMain = class LayoutMain extends MduiElement {
|
|
23
23
|
connectedCallback() {
|
|
@@ -11,12 +11,12 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
|
|
|
11
11
|
* </mdui-layout>
|
|
12
12
|
* ```
|
|
13
13
|
*
|
|
14
|
-
* @slot -
|
|
14
|
+
* @slot - 可以包含 [`<mdui-top-app-bar>`](/docs/2/components/top-app-bar)、[`<mdui-bottom-app-bar>`](/docs/2/components/bottom-app-bar)、[`<mdui-navigation-bar>`](/docs/2/components/navigation-bar)、[`<mdui-navigation-drawer>`](/docs/2/components/navigation-drawer)、[`<mdui-navigation-rail>`](/docs/2/components/navigation-rail)、`<mdui-layout-item>`、`<mdui-layout-main>` 元素
|
|
15
15
|
*/
|
|
16
16
|
export declare class Layout extends MduiElement<LayoutEventMap> {
|
|
17
17
|
static styles: CSSResultGroup;
|
|
18
18
|
/**
|
|
19
|
-
*
|
|
19
|
+
* 设置当前布局的高度为 100%
|
|
20
20
|
*/
|
|
21
21
|
fullHeight: boolean;
|
|
22
22
|
protected render(): TemplateResult;
|
|
@@ -16,13 +16,13 @@ import { layoutStyle } from './layout-style.js';
|
|
|
16
16
|
* </mdui-layout>
|
|
17
17
|
* ```
|
|
18
18
|
*
|
|
19
|
-
* @slot -
|
|
19
|
+
* @slot - 可以包含 [`<mdui-top-app-bar>`](/docs/2/components/top-app-bar)、[`<mdui-bottom-app-bar>`](/docs/2/components/bottom-app-bar)、[`<mdui-navigation-bar>`](/docs/2/components/navigation-bar)、[`<mdui-navigation-drawer>`](/docs/2/components/navigation-drawer)、[`<mdui-navigation-rail>`](/docs/2/components/navigation-rail)、`<mdui-layout-item>`、`<mdui-layout-main>` 元素
|
|
20
20
|
*/
|
|
21
21
|
let Layout = class Layout extends MduiElement {
|
|
22
22
|
constructor() {
|
|
23
23
|
super(...arguments);
|
|
24
24
|
/**
|
|
25
|
-
*
|
|
25
|
+
* 设置当前布局的高度为 100%
|
|
26
26
|
*/
|
|
27
27
|
this.fullHeight = false;
|
|
28
28
|
}
|
|
@@ -7,18 +7,18 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
|
|
|
7
7
|
* <mdui-linear-progress></mdui-linear-progress>
|
|
8
8
|
* ```
|
|
9
9
|
*
|
|
10
|
-
* @csspart indicator -
|
|
10
|
+
* @csspart indicator - 指示器部分
|
|
11
11
|
*
|
|
12
|
-
* @cssprop --shape-corner -
|
|
12
|
+
* @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
|
13
13
|
*/
|
|
14
14
|
export declare class LinearProgress extends MduiElement<LinearProgressEventMap> {
|
|
15
15
|
static styles: CSSResultGroup;
|
|
16
16
|
/**
|
|
17
|
-
*
|
|
17
|
+
* 进度指示器的最大值。默认为 `1`
|
|
18
18
|
*/
|
|
19
19
|
max: number;
|
|
20
20
|
/**
|
|
21
|
-
*
|
|
21
|
+
* 进度指示器的当前值。如果未指定该值,则处于不确定状态
|
|
22
22
|
*/
|
|
23
23
|
value?: number;
|
|
24
24
|
protected render(): TemplateResult;
|
|
@@ -13,15 +13,15 @@ import { style } from './style.js';
|
|
|
13
13
|
* <mdui-linear-progress></mdui-linear-progress>
|
|
14
14
|
* ```
|
|
15
15
|
*
|
|
16
|
-
* @csspart indicator -
|
|
16
|
+
* @csspart indicator - 指示器部分
|
|
17
17
|
*
|
|
18
|
-
* @cssprop --shape-corner -
|
|
18
|
+
* @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
|
19
19
|
*/
|
|
20
20
|
let LinearProgress = class LinearProgress extends MduiElement {
|
|
21
21
|
constructor() {
|
|
22
22
|
super(...arguments);
|
|
23
23
|
/**
|
|
24
|
-
*
|
|
24
|
+
* 进度指示器的最大值。默认为 `1`
|
|
25
25
|
*/
|
|
26
26
|
this.max = 1;
|
|
27
27
|
}
|