跳到主要内容

抽屉

抽屉用于展示额外的信息或操作选项，通常以侧滑方式临时覆盖部分页面内容。

何时使用​

  • 临时展示与当前页面相关的辅助功能，如筛选、排序。
  • 作为复杂分类或二级导航的入口。
  • 用作信息预览或详情查看面板。

一、属性​

1. 功能​

1）关闭按钮​

设置是否显示关闭按钮，默认开启。

  • 开启效果：

    关闭按钮开启

  • 关闭效果：

    关闭按钮关闭

2）销毁组件​

设置抽屉关闭时是否销毁组件（从 DOM 中移除）。默认禁用。

  • 启用销毁：关闭时内容组件会被完全移除，释放资源。
  • 禁用销毁：内容组件隐藏但保留在页面中，状态保持。

示意图：

销毁示意

3）展示蒙层​

设置抽屉展开时是否显示背景蒙层，默认启用。

  • 可配置是否允许点击蒙层关闭抽屉。

  • 展示蒙层效果：

    展示蒙层

  • 不展示蒙层效果：

    不展示蒙层

配置项位置：

展示蒙层配置

2. 外观​

1）方向、宽度、高度​

  • 支持 5 个展开方向：
    • 中间
    • 顶部
    • 右侧
    • 底部
    • 左侧

不同方向示意：

中间 顶部 右边 底部 左边

配置入口：

方向与尺寸配置

2）显示圆角​

设置是否显示圆角，默认关闭。

  • 启用圆角：

    显示圆角

  • 关闭圆角：

    不显示圆角

二、样式​

无特殊样式配置，详见通用样式。

三、常见使用场景​

1. 用于筛选条件​

示例场景：在新闻类 App 中，通过抽屉选择新闻类别进行筛选。

2. 作为二级导航入口​

示例场景：在商城类应用中，点击一级类目后，抽屉展示二级分类列表。

示意图：

二级导航

3. 展示详情或预览信息​

示例场景：点击列表项后，在抽屉中展示详细信息或内容预览。

示意图：

信息预览