docs: mobile drawer menu trigger (#6927)
parent
d185a3af21
commit
93415d0442
|
@ -1,19 +1,5 @@
|
|||
@import './theme/static/index.less';
|
||||
|
||||
.drawer {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
-webkit-transition: width 0s ease 0.3s, height 0s ease 0.3s,
|
||||
-webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
||||
transition: width 0s ease 0.3s, height 0s ease 0.3s,
|
||||
-webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
||||
transition: width 0s ease 0.3s, height 0s ease 0.3s,
|
||||
transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
||||
transition: width 0s ease 0.3s, height 0s ease 0.3s,
|
||||
transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86),
|
||||
-webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
||||
}
|
||||
|
||||
.drawer > * {
|
||||
-webkit-transition: opacity 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86),
|
||||
-webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86),
|
||||
|
@ -31,14 +17,6 @@
|
|||
-webkit-box-shadow 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
||||
}
|
||||
|
||||
.drawer.drawer-open {
|
||||
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
||||
transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
||||
transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
||||
transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86),
|
||||
-webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
||||
}
|
||||
|
||||
.drawer .drawer-mask {
|
||||
background: #000;
|
||||
opacity: 0;
|
||||
|
@ -63,12 +41,12 @@
|
|||
}
|
||||
|
||||
.drawer-handle {
|
||||
position: absolute;
|
||||
top: 72px;
|
||||
position: fixed;
|
||||
top: 100px;
|
||||
width: 41px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
z-index: 0;
|
||||
z-index: 100;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
font-size: 16px;
|
||||
|
@ -82,38 +60,9 @@
|
|||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.drawer-handle-icon {
|
||||
width: 14px;
|
||||
height: 2px;
|
||||
background: #333;
|
||||
position: relative;
|
||||
-webkit-transition: background 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
||||
transition: background 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
||||
}
|
||||
|
||||
.drawer-handle-icon:after,
|
||||
.drawer-handle-icon:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
background: #333;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
||||
transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
||||
transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
||||
transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86),
|
||||
-webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
||||
}
|
||||
|
||||
.drawer-handle-icon:before {
|
||||
top: -5px;
|
||||
}
|
||||
|
||||
.drawer-handle-icon:after {
|
||||
top: 5px;
|
||||
-webkit-box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
.drawer-left,
|
||||
|
@ -129,16 +78,6 @@
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.drawer-left.drawer-open,
|
||||
.drawer-right.drawer-open {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.drawer-left.drawer-open.no-mask,
|
||||
.drawer-right.drawer-open.no-mask {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.drawer-left {
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
@ -146,14 +85,3 @@
|
|||
.drawer-left .ant-drawer-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.drawer-left .drawer-handle {
|
||||
right: -40px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
.drawer-left .drawer-handle,
|
||||
.drawer-left.drawer-open .drawer-content-wrapper {
|
||||
-webkit-box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
|
|
@ -13,22 +13,20 @@
|
|||
<template v-if="isMobile">
|
||||
<a-drawer
|
||||
key="mobile-menu"
|
||||
v-model:visible="visible"
|
||||
:closable="false"
|
||||
placement="left"
|
||||
class="drawer drawer-left"
|
||||
:visible="visible"
|
||||
wrapper-class-name="drawer-wrapper"
|
||||
width="60%"
|
||||
>
|
||||
<surelyVueVue />
|
||||
<Menu :menus="dataSource" :active-menu-item="activeMenuItem" :is-zh-c-n="isZhCN" />
|
||||
<template #handle>
|
||||
<div class="drawer-handle" @click="handleClickShowButton">
|
||||
<close-outlined v-if="visible" :style="iconStyle" />
|
||||
<MenuOutlined v-else :style="iconStyle" />
|
||||
</div>
|
||||
</template>
|
||||
</a-drawer>
|
||||
<div class="drawer-handle" @click="handleClickShowButton">
|
||||
<close-outlined v-if="visible" :style="iconStyle" />
|
||||
<MenuOutlined v-else :style="iconStyle" />
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<a-col :xxxl="4" :xxl="4" :xl="5" :lg="6" :md="6" :sm="24" :xs="24" class="main-menu">
|
||||
|
|
Loading…
Reference in New Issue