github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

doc: update drawer

feat-css-var
tangjinzhou 2022-02-27 15:47:43 +08:00
parent c528d74c11
commit 259f5fdef6
8 changed files with 36 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/drawer/__tests__/__snapshots__/demo.test.js.snap
View File

@ -15,9 +15,7 @@ exports[`renders ./components/drawer/demo/extra.vue correctly 1`] = `
`;
exports[`renders ./components/drawer/demo/form-in-drawer.vue correctly 1`] = `
<button class="ant-btn ant-btn-primary" type="button">
<!----><span role="img" aria-label="plus" class="anticon anticon-plus"><svg focusable="false" class="" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span><span>New account</span>
</button>
<button class="ant-btn ant-btn-primary" type="button"><span role="img" aria-label="plus" class="anticon anticon-plus"><svg focusable="false" class="" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span><span>New account</span></button>
<!---->
`;

2
components/drawer/demo/basic.vue
View File

@ -8,7 +8,7 @@ title:
## zh-CN
基础抽屉，点击触发按钮抽屉从右滑出，点击遮罩区关闭
基础抽屉，点击触发按钮抽屉从右滑出，点击遮罩区关闭。
## en-US

10
components/drawer/demo/form-in-drawer.vue
View File

@ -18,7 +18,7 @@ Use form in drawer with submit button.
<template>
<a-button type="primary" @click="showDrawer">
<PlusOutlined />
<template #icon><PlusOutlined /></template>
New account
</a-button>
<a-drawer
@ -97,9 +97,11 @@ Use form in drawer with submit button.
</a-col>
</a-row>
</a-form>
<template #footer>
<a-button style="margin-right: 8px" @click="onClose">Cancel</a-button>
<a-button type="primary" @click="onClose">Submit</a-button>
<template #extra>
<a-space>
<a-button @click="onClose">Cancel</a-button>
<a-button type="primary" @click="onClose">Submit</a-button>
</a-space>
</template>
</a-drawer>
</template>

4
components/drawer/demo/render-in-current.vue
View File

@ -8,11 +8,11 @@ title:
## zh-CN
渲染在当前 dom 里。自定义容器，查看 getContainer。
渲染在当前 dom 里。自定义容器，查看 `getContainer`。
## en-US
Render in current dom. custom container, check getContainer.
Render in current dom. custom container, check `getContainer`.
</docs>

2
components/drawer/index.en-US.md
View File

@ -22,7 +22,7 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
| autofocus | Whether Drawer should get focused after open | boolean | true | 3.0.0 |
| bodyStyle | Style of the drawer content part | CSSProperties | - | |
| class | The class name of the container of the Drawer dialog | string | - | |
| closable | Whether a close (x) button is visible on top right of the Drawer dialog or not | boolean | true | |
| closable | Whether a close (x) button is visible on top left of the Drawer dialog or not | boolean | true | |
| closeIcon | Custom close icon | VNode \| slot | <CloseOutlined /> | 3.0.0 |
| contentWrapperStyle | Style of the drawer wrapper of content part | CSSProperties | - | 3.0.0 |
| destroyOnClose | Whether to unmount child components on closing drawer or not | boolean | false | |

16
components/drawer/index.tsx
View File

@ -20,6 +20,8 @@ import { tuple, withInstall } from '../_util/type';
import omit from '../_util/omit';
import devWarning from '../vc-util/devWarning';
type ILevelMove = number | [number, number];
const PlacementTypes = tuple('top', 'right', 'bottom', 'left');
export type placementType = typeof PlacementTypes[number];
@ -43,8 +45,8 @@ const drawerProps = () => ({
mask: PropTypes.looseBool,
maskStyle: PropTypes.object,
/** @deprecated Use `style` instead */
wrapStyle: PropTypes.style,
style: PropTypes.style,
wrapStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
style: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
class: PropTypes.any,
/** @deprecated Use `class` instead */
wrapClassName: PropTypes.string,
@ -68,7 +70,11 @@ const drawerProps = () => ({
footer: PropTypes.any,
footerStyle: PropTypes.object,
level: PropTypes.any,
levelMove: PropTypes.any,
levelMove: {
type: [Number, Array, Function] as PropType<
ILevelMove | ((e: { target: HTMLElement; open: boolean }) => ILevelMove)
>,
},
handle: PropTypes.any,
/** @deprecated Use `@afterVisibleChange` instead */
afterVisibleChange: PropTypes.func,
@ -199,7 +205,7 @@ const Drawer = defineComponent({
const offsetStyle = computed(() => {
// https://github.com/ant-design/ant-design/issues/24287
const { visible, mask, placement, size, width, height } = props;
const { visible, mask, placement, size = 'default', width, height } = props;
if (!visible && !mask) {
return {};
}
@ -254,7 +260,7 @@ const Drawer = defineComponent({
const renderCloseIcon = (prefixCls: string) => {
const { closable } = props;
const $closeIcon = props.closeIcon ? slots.closeIcon?.() : props.closeIcon;
const $closeIcon = slots.closeIcon ? slots.closeIcon?.() : props.closeIcon;
return (
closable && (
<button key="closer" onClick={close} aria-label="Close" class={`${prefixCls}-close`}>

4
components/drawer/index.zh-CN.md
View File

@ -22,7 +22,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/7z8NJQhFb/Drawer.svg
| autofocus | 抽屉展开后是否将焦点切换至其 Dom 节点 | boolean | true | 3.0.0 |
| bodyStyle | 可用于设置 Drawer 内容部分的样式 | CSSProperties | - | |
| class | 对话框外层容器的类名 | string | - | |
| closable | 是否显示右上角的关闭按钮 | boolean | true | |
| closable | 是否显示左上角的关闭按钮 | boolean | true | |
| closeIcon | 自定义关闭图标 | VNode \| slot | <CloseOutlined /> | 3.0.0 |
| contentWrapperStyle | 可用于设置 Drawer 包裹内容部分的样式 | CSSProperties | - | 3.0.0 |
| destroyOnClose | 关闭时销毁 Drawer 里的子元素 | boolean | false | |
@ -52,4 +52,4 @@ cover: https://gw.alipayobjects.com/zos/alicdn/7z8NJQhFb/Drawer.svg
| 名称 | 描述 | 类型 | 默认值 | 版本 |
| ------------------ | ------------------------------------ | ----------------- | ------ | ---- |
| afterVisibleChange | 切换抽屉时动画结束后的回调 | function(visible) | 无 | |
| close | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | 无 | |
| close | 点击遮罩层或左上角叉或取消按钮的回调 | function(e) | 无 | |

30
components/drawer/style/drawer.less
View File

@ -2,6 +2,7 @@
@drawer-prefix-cls: ~'@{ant-prefix}-drawer';
@picker-prefix-cls: ~'@{ant-prefix}-picker';
@drawer-animation-ease: @ease-out-quint;
.@{drawer-prefix-cls} {
@drawer-header-close-padding: ceil(((@drawer-header-close-size - @font-size-lg) / 2));
@ -10,17 +11,14 @@
z-index: @zindex-modal;
width: 0%;
height: 100%;
transition: transform @animation-duration-slow @ease-base-out,
height 0s ease @animation-duration-slow, width 0s ease @animation-duration-slow;
> * {
transition: transform @animation-duration-slow @ease-base-out,
box-shadow @animation-duration-slow @ease-base-out;
}
transition: width 0s ease @animation-duration-slow, height 0s ease @animation-duration-slow;
&-content-wrapper {
position: absolute;
width: 100%;
height: 100%;
transition: transform @animation-duration-slow @drawer-animation-ease,
box-shadow @animation-duration-slow @drawer-animation-ease;
}
.@{drawer-prefix-cls}-content {
@ -38,7 +36,7 @@
}
&.@{drawer-prefix-cls}-open {
width: 100%;
transition: transform @animation-duration-slow @ease-base-out;
transition: transform @animation-duration-slow @drawer-animation-ease;
}
}
@ -89,7 +87,7 @@
}
&.@{drawer-prefix-cls}-open {
height: 100%;
transition: transform @animation-duration-slow @ease-base-out;
transition: transform @animation-duration-slow @drawer-animation-ease;
}
}
@ -115,6 +113,7 @@
.@{drawer-prefix-cls}-content-wrapper {
box-shadow: @shadow-1-up;
}
&.no-mask {
bottom: 1px;
transform: translateY(1px);
@ -126,11 +125,12 @@
height: 100%;
opacity: 1;
transition: none;
animation: antdDrawerFadeIn @animation-duration-slow @ease-base-out;
animation: antdDrawerFadeIn @animation-duration-slow @drawer-animation-ease;
pointer-events: auto;
}
&-title {
flex: 1;
margin: 0;
color: @heading-color;
font-weight: 500;
@ -185,6 +185,7 @@
&-title {
display: flex;
flex: 1;
align-items: center;
justify-content: space-between;
}
@ -197,8 +198,7 @@
&-wrapper-body {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
flex-flow: column nowrap;
width: 100%;
height: 100%;
}
@ -226,17 +226,10 @@
height: 0;
background-color: @modal-mask-bg;
opacity: 0;
filter: ~'alpha(opacity=45)';
transition: opacity @animation-duration-slow linear, height 0s ease @animation-duration-slow;
pointer-events: none;
}
&-open {
&-content {
box-shadow: @shadow-2;
}
}
// =================== Hook Components ===================
.@{picker-prefix-cls} {
&-clear {
@ -249,6 +242,7 @@
0% {
opacity: 0;
}
100% {
opacity: 1;
}