ivyDesign

Appearance

Drawer 抽屉 ​

常规用法 ​

打开 Drawer

dfadsfds

html
<ivy-button
  type="success"
  onclick="document.getElementById('drawer').open = true"
  >打开 Drawer</ivy-button
>

<ivy-drawer id="drawer" header="Drawer标题"></ivy-drawer>

隐藏标题 ​

打开 Drawer
html
<ivy-button type="success" onclick="document.getElementById('drawer1').open()"
  >打开 Drawer</ivy-button
>

<ivy-drawer id="drawer1" title="Drawer标题" hide-title></ivy-drawer>

设置 zIndex ​

通过给组件设置zIndex样式来设置层级

打开 Drawer
html
<ivy-button type="success" onclick="document.getElementById('drawer2').open()">
  打开 Drawer
</ivy-button>
<ivy-drawer
  id="drawer2"
  title="Drawer标题"
  hide-title
  style="z-index: 9000;"
></ivy-drawer>

点击遮罩层是否关闭 ​

通过给组件设置maskClosable属性来设置点击遮罩层是否关闭本组件

打开 Drawer关闭 Drawer
html
<ivy-button
  type="success"
  onclick="document.getElementById('drawer3').open = true"
>
  打开 Drawer
</ivy-button>
<ivy-drawer id="drawer3" title="Drawer标题" .maskClosable="false">
  <ivy-button
    type="primary"
    onclick="document.getElementById('drawer3').open = false"
  >
    关闭 Drawer
  </ivy-button>
</ivy-drawer>