mdui 2.1.4 → 2.1.5
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/README.md +49 -49
- package/components/avatar/index.d.ts +2 -2
- package/components/avatar/index.js +1 -1
- package/components/badge/index.d.ts +1 -1
- package/components/badge/index.js +1 -1
- package/components/bottom-app-bar/index.d.ts +2 -2
- package/components/bottom-app-bar/index.js +2 -2
- package/components/bottom-app-bar/style.js +1 -1
- package/components/button/index.d.ts +1 -1
- package/components/button/index.js +1 -1
- package/components/button/style.js +1 -1
- package/components/button-icon/index.d.ts +1 -1
- package/components/button-icon/index.js +3 -2
- package/components/card/index.d.ts +1 -1
- package/components/card/index.js +1 -1
- package/components/checkbox/index.d.ts +4 -4
- package/components/checkbox/index.js +4 -4
- package/components/chip/index.d.ts +8 -8
- package/components/chip/index.js +8 -8
- package/components/circular-progress/index.d.ts +3 -3
- package/components/circular-progress/index.js +2 -2
- package/components/collapse/collapse-item.d.ts +1 -1
- package/components/dialog/index.d.ts +1 -1
- package/components/dialog/index.js +1 -1
- package/components/divider/index.d.ts +2 -2
- package/components/divider/index.js +2 -2
- package/components/dropdown/index.d.ts +2 -2
- package/components/dropdown/index.js +10 -3
- package/components/fab/index.d.ts +3 -3
- package/components/fab/index.js +3 -3
- package/components/layout/layout-item-base.d.ts +1 -1
- package/components/layout/layout.d.ts +1 -1
- package/components/layout/layout.js +1 -1
- package/components/linear-progress/index.d.ts +4 -4
- package/components/linear-progress/index.js +3 -3
- package/components/list/list-item.d.ts +4 -4
- package/components/list/list-item.js +4 -4
- package/components/menu/menu-item.d.ts +2 -2
- package/components/menu/menu-item.js +4 -3
- package/components/menu/menu.d.ts +2 -2
- package/components/menu/menu.js +2 -3
- package/components/navigation-bar/navigation-bar-item.d.ts +1 -1
- package/components/navigation-bar/navigation-bar-item.js +1 -1
- package/components/navigation-bar/navigation-bar-style.js +1 -1
- package/components/navigation-bar/navigation-bar.d.ts +1 -1
- package/components/navigation-bar/navigation-bar.js +1 -1
- package/components/navigation-drawer/index.d.ts +15 -15
- package/components/navigation-drawer/index.js +15 -16
- package/components/navigation-rail/navigation-rail-item.d.ts +1 -1
- package/components/navigation-rail/navigation-rail-item.js +1 -1
- package/components/navigation-rail/navigation-rail.d.ts +3 -3
- package/components/navigation-rail/navigation-rail.js +3 -4
- package/components/radio/radio-group.d.ts +1 -1
- package/components/radio/radio-group.js +1 -1
- package/components/radio/radio.d.ts +2 -2
- package/components/radio/radio.js +2 -2
- package/components/range-slider/index.d.ts +1 -1
- package/components/range-slider/index.js +1 -1
- package/components/segmented-button/segmented-button-group.d.ts +1 -1
- package/components/segmented-button/segmented-button-group.js +1 -2
- package/components/segmented-button/segmented-button.d.ts +1 -1
- package/components/segmented-button/segmented-button.js +1 -1
- package/components/select/index.d.ts +2 -2
- package/components/select/index.js +2 -2
- package/components/slider/index.d.ts +1 -1
- package/components/slider/index.js +1 -1
- package/components/snackbar/index.d.ts +2 -2
- package/components/snackbar/index.js +2 -3
- package/components/switch/index.d.ts +4 -4
- package/components/switch/index.js +4 -4
- package/components/text-field/index.d.ts +4 -4
- package/components/text-field/index.js +5 -5
- package/components/tooltip/index.d.ts +2 -2
- package/components/tooltip/index.js +3 -2
- package/components/top-app-bar/top-app-bar-style.js +1 -1
- package/components/top-app-bar/top-app-bar.d.ts +1 -1
- package/components/top-app-bar/top-app-bar.js +1 -1
- package/css-data.en.json +128 -128
- package/css-data.zh-cn.json +111 -111
- package/custom-elements.json +183 -183
- package/html-data.en.json +491 -491
- package/html-data.zh-cn.json +28 -28
- package/jsx.en.d.ts +588 -588
- package/jsx.zh-cn.d.ts +28 -28
- package/mdui.esm.js +8 -8
- package/mdui.global.js +8 -8
- package/package.json +5 -4
- package/web-types.en.json +696 -696
- package/web-types.zh-cn.json +179 -179
|
@@ -2,6 +2,7 @@ import { __decorate } from "tslib";
|
|
|
2
2
|
import { html } from 'lit';
|
|
3
3
|
import { customElement, property, queryAssignedElements, } from 'lit/decorators.js';
|
|
4
4
|
import { createRef, ref } from 'lit/directives/ref.js';
|
|
5
|
+
// eslint-disable-next-line import/extensions
|
|
5
6
|
import { getOverflowAncestors } from '@floating-ui/utils/dom';
|
|
6
7
|
import { $ } from '@mdui/jq/$.js';
|
|
7
8
|
import '@mdui/jq/methods/height.js';
|
|
@@ -36,7 +37,7 @@ import { style } from './style.js';
|
|
|
36
37
|
* @event closed - 下拉组件关闭动画完成时,事件被触发
|
|
37
38
|
*
|
|
38
39
|
* @slot - 下拉组件的内容
|
|
39
|
-
* @slot trigger - 触发下拉组件的元素,例如 [`<mdui-button>`](/docs/2/components/button) 元素
|
|
40
|
+
* @slot trigger - 触发下拉组件的元素,例如 [`<mdui-button>`](/zh-cn/docs/2/components/button) 元素
|
|
40
41
|
*
|
|
41
42
|
* @csspart trigger - 触发下拉组件的元素的容器,即 `trigger` slot 的容器
|
|
42
43
|
* @csspart panel - 下拉组件内容的容器
|
|
@@ -83,7 +84,7 @@ let Dropdown = class Dropdown extends MduiElement {
|
|
|
83
84
|
*/
|
|
84
85
|
this.placement = 'auto';
|
|
85
86
|
/**
|
|
86
|
-
* 点击 [`<mdui-menu-item>`](/docs/2/components/menu#menu-item-api) 后,下拉组件是否保持打开状态
|
|
87
|
+
* 点击 [`<mdui-menu-item>`](/zh-cn/docs/2/components/menu#menu-item-api) 后,下拉组件是否保持打开状态
|
|
87
88
|
*/
|
|
88
89
|
this.stayOpenOnClick = false;
|
|
89
90
|
/**
|
|
@@ -314,9 +315,15 @@ let Dropdown = class Dropdown extends MduiElement {
|
|
|
314
315
|
this.open = !this.open;
|
|
315
316
|
}
|
|
316
317
|
onPanelClick(e) {
|
|
318
|
+
const $target = $(e.target);
|
|
317
319
|
if (!this.disabled &&
|
|
318
320
|
!this.stayOpenOnClick &&
|
|
319
|
-
$
|
|
321
|
+
$target.is('mdui-menu-item')) {
|
|
322
|
+
// 如果点击的是有子菜单的菜单项,不关闭 dropdown。hasSubmenu 是 menu-item 的私有方法
|
|
323
|
+
const menuItem = e.target;
|
|
324
|
+
if (menuItem.hasSubmenu) {
|
|
325
|
+
return;
|
|
326
|
+
}
|
|
320
327
|
this.open = false;
|
|
321
328
|
}
|
|
322
329
|
}
|
|
@@ -21,9 +21,9 @@ import type { TemplateResult, CSSResultGroup } from 'lit';
|
|
|
21
21
|
* @csspart icon - 左侧的图标
|
|
22
22
|
* @csspart loading - 加载中状态的 `<mdui-circular-progress>` 元素
|
|
23
23
|
*
|
|
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)
|
|
24
|
+
* @cssprop --shape-corner-small - `size="small"` 时,组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
|
|
25
|
+
* @cssprop --shape-corner-normal - `size="normal"` 时,组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
|
|
26
|
+
* @cssprop --shape-corner-large - `size="large"` 时,组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
|
|
27
27
|
*/
|
|
28
28
|
export declare class Fab extends ButtonBase<FabEventMap> {
|
|
29
29
|
static styles: CSSResultGroup;
|
package/components/fab/index.js
CHANGED
|
@@ -31,9 +31,9 @@ import { style } from './style.js';
|
|
|
31
31
|
* @csspart icon - 左侧的图标
|
|
32
32
|
* @csspart loading - 加载中状态的 `<mdui-circular-progress>` 元素
|
|
33
33
|
*
|
|
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)
|
|
34
|
+
* @cssprop --shape-corner-small - `size="small"` 时,组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
|
|
35
|
+
* @cssprop --shape-corner-normal - `size="normal"` 时,组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
|
|
36
|
+
* @cssprop --shape-corner-large - `size="large"` 时,组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
|
|
37
37
|
*/
|
|
38
38
|
let Fab = class Fab extends ButtonBase {
|
|
39
39
|
constructor() {
|
|
@@ -3,7 +3,7 @@ import type { LayoutManager, LayoutPlacement } from './helper.js';
|
|
|
3
3
|
import type { PlainObject } from '@mdui/jq/shared/helper.js';
|
|
4
4
|
export declare class LayoutItemBase<E = PlainObject> extends MduiElement<E> {
|
|
5
5
|
/**
|
|
6
|
-
* 该组件在 [`<mdui-layout>`](/docs/2/components/layout) 中的布局顺序,按从小到大排序。默认为 `0`
|
|
6
|
+
* 该组件在 [`<mdui-layout>`](/zh-cn/docs/2/components/layout) 中的布局顺序,按从小到大排序。默认为 `0`
|
|
7
7
|
*/
|
|
8
8
|
order?: number;
|
|
9
9
|
protected layoutManager?: LayoutManager;
|
|
@@ -11,7 +11,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
|
|
|
11
11
|
* </mdui-layout>
|
|
12
12
|
* ```
|
|
13
13
|
*
|
|
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>` 元素
|
|
14
|
+
* @slot - 可以包含 [`<mdui-top-app-bar>`](/zh-cn/docs/2/components/top-app-bar)、[`<mdui-bottom-app-bar>`](/zh-cn/docs/2/components/bottom-app-bar)、[`<mdui-navigation-bar>`](/zh-cn/docs/2/components/navigation-bar)、[`<mdui-navigation-drawer>`](/zh-cn/docs/2/components/navigation-drawer)、[`<mdui-navigation-rail>`](/zh-cn/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;
|
|
@@ -16,7 +16,7 @@ import { layoutStyle } from './layout-style.js';
|
|
|
16
16
|
* </mdui-layout>
|
|
17
17
|
* ```
|
|
18
18
|
*
|
|
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>` 元素
|
|
19
|
+
* @slot - 可以包含 [`<mdui-top-app-bar>`](/zh-cn/docs/2/components/top-app-bar)、[`<mdui-bottom-app-bar>`](/zh-cn/docs/2/components/bottom-app-bar)、[`<mdui-navigation-bar>`](/zh-cn/docs/2/components/navigation-bar)、[`<mdui-navigation-drawer>`](/zh-cn/docs/2/components/navigation-drawer)、[`<mdui-navigation-rail>`](/zh-cn/docs/2/components/navigation-rail)、`<mdui-layout-item>`、`<mdui-layout-main>` 元素
|
|
20
20
|
*/
|
|
21
21
|
let Layout = class Layout extends MduiElement {
|
|
22
22
|
constructor() {
|
|
@@ -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-linear-progress></mdui-linear-progress>
|
|
@@ -9,16 +9,16 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
|
|
|
9
9
|
*
|
|
10
10
|
* @csspart indicator - 指示器部分
|
|
11
11
|
*
|
|
12
|
-
* @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
|
12
|
+
* @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/zh-cn/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;
|
|
@@ -7,7 +7,7 @@ import { MduiElement } from '@mdui/shared/base/mdui-element.js';
|
|
|
7
7
|
import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
|
|
8
8
|
import { style } from './style.js';
|
|
9
9
|
/**
|
|
10
|
-
* @summary
|
|
10
|
+
* @summary 线性进度条组件
|
|
11
11
|
*
|
|
12
12
|
* ```html
|
|
13
13
|
* <mdui-linear-progress></mdui-linear-progress>
|
|
@@ -15,13 +15,13 @@ import { style } from './style.js';
|
|
|
15
15
|
*
|
|
16
16
|
* @csspart indicator - 指示器部分
|
|
17
17
|
*
|
|
18
|
-
* @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
|
18
|
+
* @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/zh-cn/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
|
}
|
|
@@ -30,8 +30,8 @@ declare const ListItem_base: import("@lit/reactive-element/decorators/base.js").
|
|
|
30
30
|
* @csspart headline - 主标题
|
|
31
31
|
* @csspart description - 副标题
|
|
32
32
|
*
|
|
33
|
-
* @cssprop --shape-corner - 列表项的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
|
34
|
-
* @cssprop --shape-corner-rounded - 指定了 `rounded` 属性时,列表项的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
|
33
|
+
* @cssprop --shape-corner - 列表项的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
|
|
34
|
+
* @cssprop --shape-corner-rounded - 指定了 `rounded` 属性时,列表项的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
|
|
35
35
|
*/
|
|
36
36
|
export declare class ListItem extends ListItem_base<ListItemEventMap> {
|
|
37
37
|
static styles: CSSResultGroup;
|
|
@@ -68,7 +68,7 @@ export declare class ListItem extends ListItem_base<ListItemEventMap> {
|
|
|
68
68
|
*/
|
|
69
69
|
endIcon?: string;
|
|
70
70
|
/**
|
|
71
|
-
* 是否禁用该列表项,禁用后,列表项将变为灰色,且其中的 [`<mdui-checkbox>`](/docs/2/components/checkbox)、[`<mdui-radio>`](/docs/2/components/radio)、[`<mdui-switch>`](/docs/2/components/switch) 等也将禁用
|
|
71
|
+
* 是否禁用该列表项,禁用后,列表项将变为灰色,且其中的 [`<mdui-checkbox>`](/zh-cn/docs/2/components/checkbox)、[`<mdui-radio>`](/zh-cn/docs/2/components/radio)、[`<mdui-switch>`](/zh-cn/docs/2/components/switch) 等也将禁用
|
|
72
72
|
*/
|
|
73
73
|
disabled: boolean;
|
|
74
74
|
/**
|
|
@@ -76,7 +76,7 @@ export declare class ListItem extends ListItem_base<ListItemEventMap> {
|
|
|
76
76
|
*/
|
|
77
77
|
active: boolean;
|
|
78
78
|
/**
|
|
79
|
-
* 是否使列表项不可点击。设置后,列表项中的 [`<mdui-checkbox>`](/docs/2/components/checkbox)、[`<mdui-radio>`](/docs/2/components/radio)、[`<mdui-switch>`](/docs/2/components/switch) 等仍可交互
|
|
79
|
+
* 是否使列表项不可点击。设置后,列表项中的 [`<mdui-checkbox>`](/zh-cn/docs/2/components/checkbox)、[`<mdui-radio>`](/zh-cn/docs/2/components/radio)、[`<mdui-switch>`](/zh-cn/docs/2/components/switch) 等仍可交互
|
|
80
80
|
*/
|
|
81
81
|
nonclickable: boolean;
|
|
82
82
|
/**
|
|
@@ -41,14 +41,14 @@ import { listItemStyle } from './list-item-style.js';
|
|
|
41
41
|
* @csspart headline - 主标题
|
|
42
42
|
* @csspart description - 副标题
|
|
43
43
|
*
|
|
44
|
-
* @cssprop --shape-corner - 列表项的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
|
45
|
-
* @cssprop --shape-corner-rounded - 指定了 `rounded` 属性时,列表项的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
|
44
|
+
* @cssprop --shape-corner - 列表项的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
|
|
45
|
+
* @cssprop --shape-corner-rounded - 指定了 `rounded` 属性时,列表项的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
|
|
46
46
|
*/
|
|
47
47
|
let ListItem = class ListItem extends AnchorMixin(RippleMixin(FocusableMixin(MduiElement))) {
|
|
48
48
|
constructor() {
|
|
49
49
|
super(...arguments);
|
|
50
50
|
/**
|
|
51
|
-
* 是否禁用该列表项,禁用后,列表项将变为灰色,且其中的 [`<mdui-checkbox>`](/docs/2/components/checkbox)、[`<mdui-radio>`](/docs/2/components/radio)、[`<mdui-switch>`](/docs/2/components/switch) 等也将禁用
|
|
51
|
+
* 是否禁用该列表项,禁用后,列表项将变为灰色,且其中的 [`<mdui-checkbox>`](/zh-cn/docs/2/components/checkbox)、[`<mdui-radio>`](/zh-cn/docs/2/components/radio)、[`<mdui-switch>`](/zh-cn/docs/2/components/switch) 等也将禁用
|
|
52
52
|
*/
|
|
53
53
|
this.disabled = false;
|
|
54
54
|
/**
|
|
@@ -56,7 +56,7 @@ let ListItem = class ListItem extends AnchorMixin(RippleMixin(FocusableMixin(Mdu
|
|
|
56
56
|
*/
|
|
57
57
|
this.active = false;
|
|
58
58
|
/**
|
|
59
|
-
* 是否使列表项不可点击。设置后,列表项中的 [`<mdui-checkbox>`](/docs/2/components/checkbox)、[`<mdui-radio>`](/docs/2/components/radio)、[`<mdui-switch>`](/docs/2/components/switch) 等仍可交互
|
|
59
|
+
* 是否使列表项不可点击。设置后,列表项中的 [`<mdui-checkbox>`](/zh-cn/docs/2/components/checkbox)、[`<mdui-radio>`](/zh-cn/docs/2/components/radio)、[`<mdui-switch>`](/zh-cn/docs/2/components/switch) 等仍可交互
|
|
60
60
|
*/
|
|
61
61
|
this.nonclickable = false;
|
|
62
62
|
/**
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import '@mdui/icons-shared/arrow-right.js';
|
|
2
|
+
import '@mdui/icons-shared/check.js';
|
|
1
3
|
import '@mdui/jq/methods/css.js';
|
|
2
4
|
import '@mdui/jq/methods/height.js';
|
|
3
5
|
import '@mdui/jq/methods/innerHeight.js';
|
|
@@ -5,8 +7,6 @@ import '@mdui/jq/methods/innerWidth.js';
|
|
|
5
7
|
import '@mdui/jq/methods/width.js';
|
|
6
8
|
import '@mdui/jq/static/contains.js';
|
|
7
9
|
import { MduiElement } from '@mdui/shared/base/mdui-element.js';
|
|
8
|
-
import '@mdui/shared/icons/arrow-right.js';
|
|
9
|
-
import '@mdui/shared/icons/check.js';
|
|
10
10
|
import '../icon.js';
|
|
11
11
|
import type { Ripple } from '../ripple/index.js';
|
|
12
12
|
import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { html } from 'lit';
|
|
3
3
|
import { customElement, property, state } from 'lit/decorators.js';
|
|
4
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
4
5
|
import { createRef, ref } from 'lit/directives/ref.js';
|
|
5
6
|
import { when } from 'lit/directives/when.js';
|
|
7
|
+
import '@mdui/icons-shared/arrow-right.js';
|
|
8
|
+
import '@mdui/icons-shared/check.js';
|
|
6
9
|
import cc from 'classcat';
|
|
7
10
|
import { $ } from '@mdui/jq/$.js';
|
|
8
11
|
import '@mdui/jq/methods/css.js';
|
|
@@ -21,8 +24,6 @@ import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
|
|
|
21
24
|
import { getDuration, getEasing } from '@mdui/shared/helpers/motion.js';
|
|
22
25
|
import { nothingTemplate } from '@mdui/shared/helpers/template.js';
|
|
23
26
|
import { uniqueId } from '@mdui/shared/helpers/uniqueId.js';
|
|
24
|
-
import '@mdui/shared/icons/arrow-right.js';
|
|
25
|
-
import '@mdui/shared/icons/check.js';
|
|
26
27
|
import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
|
|
27
28
|
import { AnchorMixin } from '@mdui/shared/mixins/anchor.js';
|
|
28
29
|
import { FocusableMixin } from '@mdui/shared/mixins/focusable.js';
|
|
@@ -349,7 +350,7 @@ let MenuItem = class MenuItem extends AnchorMixin(RippleMixin(FocusableMixin(Mdu
|
|
|
349
350
|
? html `<mdui-icon name="${this.selectedIcon}" class="i"></mdui-icon>`
|
|
350
351
|
: html `<mdui-icon-check class="i"></mdui-icon-check>`}</slot>`
|
|
351
352
|
: html `<slot name="icon" part="icon" class="icon">${hasIcon
|
|
352
|
-
? html `<mdui-icon name="${this.icon}" class="i"></mdui-icon>`
|
|
353
|
+
? html `<mdui-icon name="${ifDefined(this.icon)}" class="i"></mdui-icon>`
|
|
353
354
|
: nothingTemplate}</slot>`}<div class="label-container"><slot part="label" class="label"></slot></div><slot name="end-text" part="end-text" class="end-text">${this.endText}</slot>${useDefaultEndIcon
|
|
354
355
|
? html `<mdui-icon-arrow-right part="end-icon" class="end-icon arrow-right"></mdui-icon-arrow-right>`
|
|
355
356
|
: html `<slot name="end-icon" part="end-icon" class="end-icon">${this.endIcon
|
|
@@ -26,9 +26,9 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
|
|
|
26
26
|
*
|
|
27
27
|
* @event change - 菜单项选中状态变化时触发
|
|
28
28
|
*
|
|
29
|
-
* @slot - 子菜单项(`<mdui-menu-item
|
|
29
|
+
* @slot - 子菜单项(`<mdui-menu-item>`)、分隔线([`<mdui-divider>`](/zh-cn/docs/2/components/divider))等元素
|
|
30
30
|
*
|
|
31
|
-
* @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
|
31
|
+
* @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
|
|
32
32
|
*/
|
|
33
33
|
export declare class Menu extends MduiElement<MenuEventMap> {
|
|
34
34
|
static styles: CSSResultGroup;
|
package/components/menu/menu.js
CHANGED
|
@@ -37,9 +37,9 @@ import { menuStyle } from './menu-style.js';
|
|
|
37
37
|
*
|
|
38
38
|
* @event change - 菜单项选中状态变化时触发
|
|
39
39
|
*
|
|
40
|
-
* @slot - 子菜单项(`<mdui-menu-item
|
|
40
|
+
* @slot - 子菜单项(`<mdui-menu-item>`)、分隔线([`<mdui-divider>`](/zh-cn/docs/2/components/divider))等元素
|
|
41
41
|
*
|
|
42
|
-
* @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
|
42
|
+
* @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
|
|
43
43
|
*/
|
|
44
44
|
let Menu = class Menu extends MduiElement {
|
|
45
45
|
constructor() {
|
|
@@ -402,7 +402,6 @@ let Menu = class Menu extends MduiElement {
|
|
|
402
402
|
Menu.styles = [componentStyle, menuStyle];
|
|
403
403
|
__decorate([
|
|
404
404
|
property({ reflect: true })
|
|
405
|
-
// eslint-disable-next-line prettier/prettier
|
|
406
405
|
], Menu.prototype, "selects", void 0);
|
|
407
406
|
__decorate([
|
|
408
407
|
property()
|
|
@@ -29,7 +29,7 @@ declare const NavigationBarItem_base: import("@lit/reactive-element/decorators/b
|
|
|
29
29
|
* @csspart active-icon - 激活状态的图标
|
|
30
30
|
* @csspart label - 导航项文本
|
|
31
31
|
*
|
|
32
|
-
* @cssprop --shape-corner-indicator - 指示器的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
|
32
|
+
* @cssprop --shape-corner-indicator - 指示器的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
|
|
33
33
|
*/
|
|
34
34
|
export declare class NavigationBarItem extends NavigationBarItem_base<NavigationBarItemEventMap> {
|
|
35
35
|
static styles: CSSResultGroup;
|
|
@@ -40,7 +40,7 @@ import { navigationBarItemStyle } from './navigation-bar-item-style.js';
|
|
|
40
40
|
* @csspart active-icon - 激活状态的图标
|
|
41
41
|
* @csspart label - 导航项文本
|
|
42
42
|
*
|
|
43
|
-
* @cssprop --shape-corner-indicator - 指示器的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
|
43
|
+
* @cssprop --shape-corner-indicator - 指示器的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
|
|
44
44
|
*/
|
|
45
45
|
let NavigationBarItem = class NavigationBarItem extends AnchorMixin(RippleMixin(FocusableMixin(MduiElement))) {
|
|
46
46
|
constructor() {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const navigationBarStyle = css `:host{--shape-corner:var(--mdui-shape-corner-none);--z-index:2000;position:fixed;right:0;bottom:0;left:0;display:flex;flex:0 0 auto;overflow:hidden;border-radius:var(--shape-corner) var(--shape-corner) 0 0;z-index:var(--z-index);transition
|
|
2
|
+
export const navigationBarStyle = css `:host{--shape-corner:var(--mdui-shape-corner-none);--z-index:2000;position:fixed;right:0;bottom:0;left:0;display:flex;flex:0 0 auto;overflow:hidden;border-radius:var(--shape-corner) var(--shape-corner) 0 0;z-index:var(--z-index);transition:transform var(--mdui-motion-duration-long2) var(--mdui-motion-easing-emphasized);height:5rem;background-color:rgb(var(--mdui-color-surface));box-shadow:var(--mdui-elevation-level2)}:host([scroll-target]:not([scroll-target=''])){position:absolute}:host([hide]:not([hide=false i])){transform:translateY(5.625rem);transition-duration:var(--mdui-motion-duration-short4)}`;
|
|
@@ -23,7 +23,7 @@ declare const NavigationBar_base: import("@lit/reactive-element/decorators/base.
|
|
|
23
23
|
*
|
|
24
24
|
* @slot - `<mdui-navigation-bar-item>` 组件
|
|
25
25
|
*
|
|
26
|
-
* @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
|
26
|
+
* @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
|
|
27
27
|
* @cssprop --z-index - 组件的 CSS `z-index` 值
|
|
28
28
|
*/
|
|
29
29
|
export declare class NavigationBar extends NavigationBar_base<NavigationBarEventMap> {
|
|
@@ -27,7 +27,7 @@ import { navigationBarStyle } from './navigation-bar-style.js';
|
|
|
27
27
|
*
|
|
28
28
|
* @slot - `<mdui-navigation-bar-item>` 组件
|
|
29
29
|
*
|
|
30
|
-
* @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
|
30
|
+
* @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
|
|
31
31
|
* @cssprop --z-index - 组件的 CSS `z-index` 值
|
|
32
32
|
*/
|
|
33
33
|
let NavigationBar = class NavigationBar extends ScrollBehaviorMixin(LayoutItemBase) {
|
|
@@ -6,55 +6,55 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
|
|
|
6
6
|
/**
|
|
7
7
|
* 在手机端,`modal` 始终为 `true`;大于手机端时,`modal` 属性才开始生效
|
|
8
8
|
*
|
|
9
|
-
* @summary
|
|
9
|
+
* @summary 抽屉导航栏组件
|
|
10
10
|
*
|
|
11
11
|
* ```html
|
|
12
12
|
* <mdui-navigation-drawer>content</mdui-navigation-drawer>
|
|
13
13
|
* ```
|
|
14
14
|
*
|
|
15
|
-
* @event open -
|
|
16
|
-
* @event opened -
|
|
17
|
-
* @event close -
|
|
18
|
-
* @event closed -
|
|
15
|
+
* @event open - 抽屉导航栏打开之前触发。可以通过调用 `event.preventDefault()` 阻止抽屉导航栏打开
|
|
16
|
+
* @event opened - 抽屉导航栏打开动画完成之后触发
|
|
17
|
+
* @event close - 抽屉导航栏关闭之前触发。可以通过调用 `event.preventDefault()` 阻止抽屉导航栏关闭
|
|
18
|
+
* @event closed - 抽屉导航栏关闭动画完成之后触发
|
|
19
19
|
* @event overlay-click - 点击遮罩层时触发
|
|
20
20
|
*
|
|
21
|
-
* @slot -
|
|
21
|
+
* @slot - 抽屉导航栏中的内容
|
|
22
22
|
*
|
|
23
23
|
* @csspart overlay - 遮罩层
|
|
24
|
-
* @csspart panel -
|
|
24
|
+
* @csspart panel - 抽屉导航栏容器
|
|
25
25
|
*
|
|
26
|
-
* @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
|
26
|
+
* @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
|
|
27
27
|
* @cssprop --z-index - 组件的 CSS `z-index` 值
|
|
28
28
|
*/
|
|
29
29
|
export declare class NavigationDrawer extends LayoutItemBase<NavigationDrawerEventMap> {
|
|
30
30
|
static styles: CSSResultGroup;
|
|
31
31
|
/**
|
|
32
|
-
*
|
|
32
|
+
* 是否打开抽屉导航栏
|
|
33
33
|
*/
|
|
34
34
|
open: boolean;
|
|
35
35
|
/**
|
|
36
|
-
*
|
|
36
|
+
* 抽屉导航栏打开时,是否显示遮罩层
|
|
37
37
|
*
|
|
38
|
-
* 在窄屏设备上(屏幕宽度小于 [`--mdui-breakpoint-md`](/docs/2/styles/design-tokens#breakpoint)),会始终显示遮罩层,无视该参数
|
|
38
|
+
* 在窄屏设备上(屏幕宽度小于 [`--mdui-breakpoint-md`](/zh-cn/docs/2/styles/design-tokens#breakpoint)),会始终显示遮罩层,无视该参数
|
|
39
39
|
*/
|
|
40
40
|
modal: boolean;
|
|
41
41
|
/**
|
|
42
|
-
* 在有遮罩层的情况下,按下 ESC
|
|
42
|
+
* 在有遮罩层的情况下,按下 ESC 键是否关闭抽屉导航栏
|
|
43
43
|
*/
|
|
44
44
|
closeOnEsc: boolean;
|
|
45
45
|
/**
|
|
46
|
-
*
|
|
46
|
+
* 点击遮罩层时,是否关闭抽屉导航栏
|
|
47
47
|
*/
|
|
48
48
|
closeOnOverlayClick: boolean;
|
|
49
49
|
/**
|
|
50
|
-
*
|
|
50
|
+
* 抽屉导航栏的位置。可选值包括:
|
|
51
51
|
*
|
|
52
52
|
* * `left`:左侧
|
|
53
53
|
* * `right`:右侧
|
|
54
54
|
*/
|
|
55
55
|
placement: /*左侧*/ 'left' | /*右侧*/ 'right';
|
|
56
56
|
/**
|
|
57
|
-
*
|
|
57
|
+
* 默认情况下,抽屉导航栏相对于 `body` 元素显示。当该属性设置为 `true` 时,抽屉导航栏将相对于其父元素显示。
|
|
58
58
|
*
|
|
59
59
|
* **Note**:设置该属性时,必须在父元素上手动设置样式 `position: relative; overflow: hidden;`。
|
|
60
60
|
*/
|
|
@@ -22,56 +22,56 @@ import { style } from './style.js';
|
|
|
22
22
|
/**
|
|
23
23
|
* 在手机端,`modal` 始终为 `true`;大于手机端时,`modal` 属性才开始生效
|
|
24
24
|
*
|
|
25
|
-
* @summary
|
|
25
|
+
* @summary 抽屉导航栏组件
|
|
26
26
|
*
|
|
27
27
|
* ```html
|
|
28
28
|
* <mdui-navigation-drawer>content</mdui-navigation-drawer>
|
|
29
29
|
* ```
|
|
30
30
|
*
|
|
31
|
-
* @event open -
|
|
32
|
-
* @event opened -
|
|
33
|
-
* @event close -
|
|
34
|
-
* @event closed -
|
|
31
|
+
* @event open - 抽屉导航栏打开之前触发。可以通过调用 `event.preventDefault()` 阻止抽屉导航栏打开
|
|
32
|
+
* @event opened - 抽屉导航栏打开动画完成之后触发
|
|
33
|
+
* @event close - 抽屉导航栏关闭之前触发。可以通过调用 `event.preventDefault()` 阻止抽屉导航栏关闭
|
|
34
|
+
* @event closed - 抽屉导航栏关闭动画完成之后触发
|
|
35
35
|
* @event overlay-click - 点击遮罩层时触发
|
|
36
36
|
*
|
|
37
|
-
* @slot -
|
|
37
|
+
* @slot - 抽屉导航栏中的内容
|
|
38
38
|
*
|
|
39
39
|
* @csspart overlay - 遮罩层
|
|
40
|
-
* @csspart panel -
|
|
40
|
+
* @csspart panel - 抽屉导航栏容器
|
|
41
41
|
*
|
|
42
|
-
* @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
|
42
|
+
* @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
|
|
43
43
|
* @cssprop --z-index - 组件的 CSS `z-index` 值
|
|
44
44
|
*/
|
|
45
45
|
let NavigationDrawer = class NavigationDrawer extends LayoutItemBase {
|
|
46
46
|
constructor() {
|
|
47
47
|
super(...arguments);
|
|
48
48
|
/**
|
|
49
|
-
*
|
|
49
|
+
* 是否打开抽屉导航栏
|
|
50
50
|
*/
|
|
51
51
|
this.open = false;
|
|
52
52
|
/**
|
|
53
|
-
*
|
|
53
|
+
* 抽屉导航栏打开时,是否显示遮罩层
|
|
54
54
|
*
|
|
55
|
-
* 在窄屏设备上(屏幕宽度小于 [`--mdui-breakpoint-md`](/docs/2/styles/design-tokens#breakpoint)),会始终显示遮罩层,无视该参数
|
|
55
|
+
* 在窄屏设备上(屏幕宽度小于 [`--mdui-breakpoint-md`](/zh-cn/docs/2/styles/design-tokens#breakpoint)),会始终显示遮罩层,无视该参数
|
|
56
56
|
*/
|
|
57
57
|
this.modal = false;
|
|
58
58
|
/**
|
|
59
|
-
* 在有遮罩层的情况下,按下 ESC
|
|
59
|
+
* 在有遮罩层的情况下,按下 ESC 键是否关闭抽屉导航栏
|
|
60
60
|
*/
|
|
61
61
|
this.closeOnEsc = false;
|
|
62
62
|
/**
|
|
63
|
-
*
|
|
63
|
+
* 点击遮罩层时,是否关闭抽屉导航栏
|
|
64
64
|
*/
|
|
65
65
|
this.closeOnOverlayClick = false;
|
|
66
66
|
/**
|
|
67
|
-
*
|
|
67
|
+
* 抽屉导航栏的位置。可选值包括:
|
|
68
68
|
*
|
|
69
69
|
* * `left`:左侧
|
|
70
70
|
* * `right`:右侧
|
|
71
71
|
*/
|
|
72
72
|
this.placement = 'left';
|
|
73
73
|
/**
|
|
74
|
-
*
|
|
74
|
+
* 默认情况下,抽屉导航栏相对于 `body` 元素显示。当该属性设置为 `true` 时,抽屉导航栏将相对于其父元素显示。
|
|
75
75
|
*
|
|
76
76
|
* **Note**:设置该属性时,必须在父元素上手动设置样式 `position: relative; overflow: hidden;`。
|
|
77
77
|
*/
|
|
@@ -370,7 +370,6 @@ __decorate([
|
|
|
370
370
|
], NavigationDrawer.prototype, "closeOnOverlayClick", void 0);
|
|
371
371
|
__decorate([
|
|
372
372
|
property({ reflect: true })
|
|
373
|
-
// eslint-disable-next-line prettier/prettier
|
|
374
373
|
], NavigationDrawer.prototype, "placement", void 0);
|
|
375
374
|
__decorate([
|
|
376
375
|
property({
|
|
@@ -29,7 +29,7 @@ declare const NavigationRailItem_base: import("@lit/reactive-element/decorators/
|
|
|
29
29
|
* @csspart active-icon - 激活状态的图标
|
|
30
30
|
* @csspart label - 文本内容
|
|
31
31
|
*
|
|
32
|
-
* @cssprop --shape-corner-indicator - 指示器的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
|
32
|
+
* @cssprop --shape-corner-indicator - 指示器的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
|
|
33
33
|
*/
|
|
34
34
|
export declare class NavigationRailItem extends NavigationRailItem_base<NavigationRailItemEventMap> {
|
|
35
35
|
static styles: CSSResultGroup;
|
|
@@ -41,7 +41,7 @@ import { navigationRailItemStyle } from './navigation-rail-item-style.js';
|
|
|
41
41
|
* @csspart active-icon - 激活状态的图标
|
|
42
42
|
* @csspart label - 文本内容
|
|
43
43
|
*
|
|
44
|
-
* @cssprop --shape-corner-indicator - 指示器的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
|
44
|
+
* @cssprop --shape-corner-indicator - 指示器的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
|
|
45
45
|
*/
|
|
46
46
|
let NavigationRailItem = class NavigationRailItem extends AnchorMixin(RippleMixin(FocusableMixin(MduiElement))) {
|
|
47
47
|
constructor() {
|
|
@@ -24,7 +24,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
|
|
|
24
24
|
* @csspart bottom - 底部元素的容器
|
|
25
25
|
* @csspart items - `<mdui-navigation-rail-item>` 组件的容器
|
|
26
26
|
*
|
|
27
|
-
* @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
|
27
|
+
* @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
|
|
28
28
|
* @cssprop --z-index - 组件的 CSS `z-index` 值
|
|
29
29
|
*/
|
|
30
30
|
export declare class NavigationRail extends LayoutItemBase<NavigationRailEventMap> {
|
|
@@ -49,13 +49,13 @@ export declare class NavigationRail extends LayoutItemBase<NavigationRailEventMa
|
|
|
49
49
|
*/
|
|
50
50
|
alignment: /*顶部对齐*/ 'start' | /*居中对齐*/ 'center' | /*底部对齐*/ 'end';
|
|
51
51
|
/**
|
|
52
|
-
* 默认情况下,导航栏相对于 `body`
|
|
52
|
+
* 默认情况下,导航栏相对于 `body` 元素显示。当该属性设置为 `true` 时,导航栏将相对于其父元素显示。
|
|
53
53
|
*
|
|
54
54
|
* **Note**:设置该属性时,必须在父元素上手动设置样式 `position: relative;`。
|
|
55
55
|
*/
|
|
56
56
|
contained: boolean;
|
|
57
57
|
/**
|
|
58
|
-
*
|
|
58
|
+
* 是否在导航栏和页面内容之间添加分隔线
|
|
59
59
|
*/
|
|
60
60
|
divider: boolean;
|
|
61
61
|
private activeKey;
|
|
@@ -33,7 +33,7 @@ import { navigationRailStyle } from './navigation-rail-style.js';
|
|
|
33
33
|
* @csspart bottom - 底部元素的容器
|
|
34
34
|
* @csspart items - `<mdui-navigation-rail-item>` 组件的容器
|
|
35
35
|
*
|
|
36
|
-
* @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
|
36
|
+
* @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值;但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
|
|
37
37
|
* @cssprop --z-index - 组件的 CSS `z-index` 值
|
|
38
38
|
*/
|
|
39
39
|
let NavigationRail = class NavigationRail extends LayoutItemBase {
|
|
@@ -55,13 +55,13 @@ let NavigationRail = class NavigationRail extends LayoutItemBase {
|
|
|
55
55
|
*/
|
|
56
56
|
this.alignment = 'start';
|
|
57
57
|
/**
|
|
58
|
-
* 默认情况下,导航栏相对于 `body`
|
|
58
|
+
* 默认情况下,导航栏相对于 `body` 元素显示。当该属性设置为 `true` 时,导航栏将相对于其父元素显示。
|
|
59
59
|
*
|
|
60
60
|
* **Note**:设置该属性时,必须在父元素上手动设置样式 `position: relative;`。
|
|
61
61
|
*/
|
|
62
62
|
this.contained = false;
|
|
63
63
|
/**
|
|
64
|
-
*
|
|
64
|
+
* 是否在导航栏和页面内容之间添加分隔线
|
|
65
65
|
*/
|
|
66
66
|
this.divider = false;
|
|
67
67
|
// 因为 navigation-rail-item 的 value 可能会重复,所以在每个 navigation-rail-item 元素上都添加了一个唯一的 key,通过 activeKey 来记录激活状态的 key
|
|
@@ -192,7 +192,6 @@ __decorate([
|
|
|
192
192
|
], NavigationRail.prototype, "value", void 0);
|
|
193
193
|
__decorate([
|
|
194
194
|
property({ reflect: true })
|
|
195
|
-
// eslint-disable-next-line prettier/prettier
|
|
196
195
|
], NavigationRail.prototype, "placement", void 0);
|
|
197
196
|
__decorate([
|
|
198
197
|
property({ reflect: true })
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
import '@mdui/icons-shared/circle.js';
|
|
2
|
+
import '@mdui/icons-shared/radio-button-unchecked.js';
|
|
1
3
|
import { MduiElement } from '@mdui/shared/base/mdui-element.js';
|
|
2
|
-
import '@mdui/shared/icons/circle.js';
|
|
3
|
-
import '@mdui/shared/icons/radio-button-unchecked.js';
|
|
4
4
|
import '../icon.js';
|
|
5
5
|
import type { Ripple } from '../ripple/index.js';
|
|
6
6
|
import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
|