移动目录
This commit is contained in:
CrescentLeaf
67
mdui_patched/components/bottom-app-bar/index.d.ts
vendored
Normal file
67
mdui_patched/components/bottom-app-bar/index.d.ts
vendored
Normal file
@@ -0,0 +1,67 @@
|
||||
import { LayoutItemBase } from '../layout/layout-item-base.js';
|
||||
import type { LayoutPlacement } from '../layout/helper.js';
|
||||
import type { ScrollPaddingPosition } from '@mdui/shared/mixins/scrollBehavior.js';
|
||||
import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
|
||||
declare const BottomAppBar_base: import("@lit/reactive-element/decorators/base.js").Constructor<import("@mdui/shared/mixins/scrollBehavior.js").ScrollBehaviorMixinInterface> & typeof LayoutItemBase;
|
||||
/**
|
||||
* @summary 底部应用栏组件
|
||||
*
|
||||
* ```html
|
||||
* <mdui-bottom-app-bar>
|
||||
* ..<mdui-button-icon icon="check_box--outlined"></mdui-button-icon>
|
||||
* ..<mdui-button-icon icon="edit--outlined"></mdui-button-icon>
|
||||
* ..<mdui-button-icon icon="mic_none--outlined"></mdui-button-icon>
|
||||
* ..<mdui-button-icon icon="image--outlined"></mdui-button-icon>
|
||||
* ..<div style="flex-grow: 1"></div>
|
||||
* ..<mdui-fab icon="add"></mdui-fab>
|
||||
* </mdui-bottom-app-bar>
|
||||
* ```
|
||||
*
|
||||
* @event show - 开始显示时，事件被触发。可以通过调用 `event.preventDefault()` 阻止显示
|
||||
* @event shown - 显示动画完成时，事件被触发
|
||||
* @event hide - 开始隐藏时，事件被触发。可以通过调用 `event.preventDefault()` 阻止隐藏
|
||||
* @event hidden - 隐藏动画完成时，事件被触发
|
||||
*
|
||||
* @slot - 底部应用栏内部的元素
|
||||
*
|
||||
* @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
||||
* @cssprop --z-index - 组件的 CSS `z-index` 值
|
||||
*/
|
||||
export declare class BottomAppBar extends BottomAppBar_base<BottomAppBarEventMap> {
|
||||
static styles: CSSResultGroup;
|
||||
/**
|
||||
* 是否隐藏
|
||||
*/
|
||||
hide: boolean;
|
||||
/**
|
||||
* 是否让底部应用栏中的 [`<mdui-fab>`](/docs/2/components/fab) 组件脱离应用栏。如果为 `true`，则当应用栏隐藏后，[`<mdui-fab>`](/docs/2/components/fab) 仍会停留在页面上
|
||||
*/
|
||||
fabDetach: boolean;
|
||||
/**
|
||||
* 滚动行为。可选值为：
|
||||
*
|
||||
* * `hide`：滚动时隐藏
|
||||
*/
|
||||
scrollBehavior?: 'hide';
|
||||
protected get scrollPaddingPosition(): ScrollPaddingPosition;
|
||||
protected get layoutPlacement(): LayoutPlacement;
|
||||
protected firstUpdated(_changedProperties: PropertyValues): void;
|
||||
protected render(): TemplateResult;
|
||||
/**
|
||||
* 滚动行为
|
||||
* 当前仅支持 hide 这一个行为，所以不做行为类型判断
|
||||
*/
|
||||
protected runScrollThreshold(isScrollingUp: boolean): void;
|
||||
}
|
||||
export interface BottomAppBarEventMap {
|
||||
show: CustomEvent<void>;
|
||||
shown: CustomEvent<void>;
|
||||
hide: CustomEvent<void>;
|
||||
hidden: CustomEvent<void>;
|
||||
}
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'mdui-bottom-app-bar': BottomAppBar;
|
||||
}
|
||||
}
|
||||
export {};
|
||||
105
mdui_patched/components/bottom-app-bar/index.js
Normal file
105
mdui_patched/components/bottom-app-bar/index.js
Normal file
@@ -0,0 +1,105 @@
|
||||
import { __decorate } from "tslib";
|
||||
import { html } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
|
||||
import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
|
||||
import { ScrollBehaviorMixin } from '@mdui/shared/mixins/scrollBehavior.js';
|
||||
import { LayoutItemBase } from '../layout/layout-item-base.js';
|
||||
import { style } from './style.js';
|
||||
/**
|
||||
* @summary 底部应用栏组件
|
||||
*
|
||||
* ```html
|
||||
* <mdui-bottom-app-bar>
|
||||
* ..<mdui-button-icon icon="check_box--outlined"></mdui-button-icon>
|
||||
* ..<mdui-button-icon icon="edit--outlined"></mdui-button-icon>
|
||||
* ..<mdui-button-icon icon="mic_none--outlined"></mdui-button-icon>
|
||||
* ..<mdui-button-icon icon="image--outlined"></mdui-button-icon>
|
||||
* ..<div style="flex-grow: 1"></div>
|
||||
* ..<mdui-fab icon="add"></mdui-fab>
|
||||
* </mdui-bottom-app-bar>
|
||||
* ```
|
||||
*
|
||||
* @event show - 开始显示时，事件被触发。可以通过调用 `event.preventDefault()` 阻止显示
|
||||
* @event shown - 显示动画完成时，事件被触发
|
||||
* @event hide - 开始隐藏时，事件被触发。可以通过调用 `event.preventDefault()` 阻止隐藏
|
||||
* @event hidden - 隐藏动画完成时，事件被触发
|
||||
*
|
||||
* @slot - 底部应用栏内部的元素
|
||||
*
|
||||
* @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
|
||||
* @cssprop --z-index - 组件的 CSS `z-index` 值
|
||||
*/
|
||||
let BottomAppBar = class BottomAppBar extends ScrollBehaviorMixin(LayoutItemBase) {
|
||||
constructor() {
|
||||
super(...arguments);
|
||||
/**
|
||||
* 是否隐藏
|
||||
*/
|
||||
this.hide = false;
|
||||
/**
|
||||
* 是否让底部应用栏中的 [`<mdui-fab>`](/docs/2/components/fab) 组件脱离应用栏。如果为 `true`，则当应用栏隐藏后，[`<mdui-fab>`](/docs/2/components/fab) 仍会停留在页面上
|
||||
*/
|
||||
this.fabDetach = false;
|
||||
}
|
||||
get scrollPaddingPosition() {
|
||||
return 'bottom';
|
||||
}
|
||||
get layoutPlacement() {
|
||||
return 'bottom';
|
||||
}
|
||||
firstUpdated(_changedProperties) {
|
||||
super.firstUpdated(_changedProperties);
|
||||
this.addEventListener('transitionend', (event) => {
|
||||
if (event.target === this) {
|
||||
this.emit(this.hide ? 'hidden' : 'shown');
|
||||
}
|
||||
});
|
||||
}
|
||||
render() {
|
||||
return html `<slot></slot>`;
|
||||
}
|
||||
/**
|
||||
* 滚动行为
|
||||
* 当前仅支持 hide 这一个行为，所以不做行为类型判断
|
||||
*/
|
||||
runScrollThreshold(isScrollingUp) {
|
||||
// 向下滚动
|
||||
if (!isScrollingUp && !this.hide) {
|
||||
const eventProceeded = this.emit('hide', { cancelable: true });
|
||||
if (eventProceeded) {
|
||||
this.hide = true;
|
||||
}
|
||||
}
|
||||
// 向上滚动
|
||||
if (isScrollingUp && this.hide) {
|
||||
const eventProceeded = this.emit('show', { cancelable: true });
|
||||
if (eventProceeded) {
|
||||
this.hide = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
BottomAppBar.styles = [componentStyle, style];
|
||||
__decorate([
|
||||
property({
|
||||
type: Boolean,
|
||||
reflect: true,
|
||||
converter: booleanConverter,
|
||||
})
|
||||
], BottomAppBar.prototype, "hide", void 0);
|
||||
__decorate([
|
||||
property({
|
||||
type: Boolean,
|
||||
reflect: true,
|
||||
converter: booleanConverter,
|
||||
attribute: 'fab-detach',
|
||||
})
|
||||
], BottomAppBar.prototype, "fabDetach", void 0);
|
||||
__decorate([
|
||||
property({ reflect: true, attribute: 'scroll-behavior' })
|
||||
], BottomAppBar.prototype, "scrollBehavior", void 0);
|
||||
BottomAppBar = __decorate([
|
||||
customElement('mdui-bottom-app-bar')
|
||||
], BottomAppBar);
|
||||
export { BottomAppBar };
|
||||
1
mdui_patched/components/bottom-app-bar/style.d.ts
vendored
Normal file
1
mdui_patched/components/bottom-app-bar/style.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
export declare const style: import("lit").CSSResult;
|
||||
2
mdui_patched/components/bottom-app-bar/style.js
Normal file
2
mdui_patched/components/bottom-app-bar/style.js
Normal file
@@ -0,0 +1,2 @@
|
||||
import { css } from 'lit';
|
||||
export const style = 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;align-items:center;justify-content:flex-start;border-radius:var(--shape-corner) var(--shape-corner) 0 0;z-index:var(--z-index);transition:bottom var(--mdui-motion-duration-long2) var(--mdui-motion-easing-emphasized);padding:0 1rem;height:5rem;background-color:rgb(var(--mdui-color-surface-container));box-shadow:var(--mdui-elevation-level2)}:host([scroll-target]:not([scroll-target=''])){position:absolute}:host([hide]:not([hide=false i])){transition-duration:var(--mdui-motion-duration-short4);bottom:-5.625rem}::slotted(:not(:first-child)){margin-left:.5rem}::slotted(mdui-fab){box-shadow:var(--mdui-elevation-level0)}:host([fab-detach]:not([fab-detach=false i])) ::slotted(mdui-fab){position:absolute;transition:bottom var(--mdui-motion-duration-long2) var(--mdui-motion-easing-standard);right:1rem;bottom:.75rem}:host([fab-detach][hide][scroll-behavior~=hide]:not([hide=false i],[fab-detach=false i])) ::slotted(mdui-fab){transition-duration:var(--mdui-motion-duration-short4);bottom:1rem;box-shadow:var(--mdui-elevation-level2)}:host([fab-detach][hide][scroll-behavior~=hide][scroll-target]:not([fab-detach=false i],[hide=false i],[scroll-target=''])) ::slotted(mdui-fab){bottom:6.625rem}:host([hide]:not([hide=false i])) ::slotted(:not(mdui-fab)),:host([hide]:not([hide=false i],[fab-detach])) ::slotted(mdui-fab),:host([hide][fab-detach=false i]:not([hide=false i])) ::slotted(mdui-fab){transform:translateY(8.75rem);transition:transform var(--mdui-motion-duration-0) var(--mdui-motion-easing-emphasized-accelerate) var(--mdui-motion-duration-short4)}::slotted(:first-child){transition:transform var(--mdui-motion-duration-short3) var(--mdui-motion-easing-emphasized-decelerate) var(--mdui-motion-duration-short1)}::slotted(:nth-child(2)){transition:transform var(--mdui-motion-duration-short3) var(--mdui-motion-easing-emphasized-decelerate) var(--mdui-motion-duration-short3)}::slotted(:nth-child(3)){transition:transform var(--mdui-motion-duration-short3) var(--mdui-motion-easing-emphasized-decelerate) var(--mdui-motion-duration-short4)}::slotted(:nth-child(4)){transition:transform var(--mdui-motion-duration-short3) var(--mdui-motion-easing-emphasized-decelerate) var(--mdui-motion-duration-medium1)}::slotted(:nth-child(5)){transition:transform var(--mdui-motion-duration-short3) var(--mdui-motion-easing-emphasized-decelerate) var(--mdui-motion-duration-medium2)}::slotted(:nth-child(6)){transition:transform var(--mdui-motion-duration-short3) var(--mdui-motion-easing-emphasized-decelerate) var(--mdui-motion-duration-medium3)}`;
|
||||
Reference in New Issue
Block a user