跳转至

抽屉相关

自定义抽屉

Tip

图标请参考 https://www.mdui.org/docs/material_icon

欢迎使用 快捷生成工具 ！

Warning

请遵循 JSON 语法，否则两行泪（哭）

普通按钮

name value remark
name 按钮名称
link 按钮链接 不需要可填“#”
icon 按钮图标 可前往 MDUI Docs 获取图标名
type 0

举例

{
  "name":"友人帐",
  "link":"https://xxx.xxx/links.html",
  "icon":"links",
  "type":"0"
}

归档按钮

name value
name 归档
link #
icon access_time
type 1

举例

{
  "name":"归档",
  "link":"#",
  "icon":"access_time",
  "type":"1"
}

分类按钮

name value
name 分类
link #
icon view_list
type 2

举例

{
  "name":"分类",
  "link":"#",
  "icon":"view_list",
  "type":"2"
}

页面按钮

name value
name 页面
link #
icon view_carousel
type 3

举例

{
  "name":"页面",
  "link":"#",
  "icon":"view_carousel",
  "type":"3"
}

列表按钮

name value remark
name 按钮名称
link 按钮链接 不需要可填“#”
icon 按钮图标 可前往 MDUI Docs 获取图标名
type 4
list 子列表 注意遵循 JSON 语法

举例

{
  "name":"列表",
  "link":"#",
  "icon":"settings",
  "type":"4",
  "list": [{
  "name": "子列表",
  "link": "http://domain.com/"
  },{
    "name": "子列表",
    "link": "http://domain.com/"
  },{
    "name": "子列表",
    "link": "http://domain.com/"
  }]
}

分割线

name value
type 5 
{
  "type":"5"
}

RSS 订阅按钮

name value
type 6
  • "type" 类型 6 为RSS订阅按钮。
{
  "type":"6"
}

使用例

[
  {
    "name":"分类",
    "link":"#",
    "icon":"view_list",
    "type":"2"
  },{
    "name":"归档",
    "link":"#",
    "icon":"access_time",
    "type":"1"
  },{
    "name":"页面",
    "link":"#",
    "icon":"view_carousel",
    "type":"3"
  },{
    "type":"5"
  },{
    "type":"6"
  }
]

抽屉底部功能

展示位置

展示位置位于 抽屉 的 底部位置

使用方法

抽屉底部功能仅支持展示 6 个！多了将无法显示！！！

Warning

添加时请遵循 JSON 语法

先来看一个例子吧！

{
  "home":"xxx.com/admin"
}

左侧（home）为MDUI框架中的图标名称

右侧（xxx.com/admin）为 A标签 中的链接

抽屉底部引用

推荐搭配 绝对定位 进行使用！若对 CSS 不太了解可以直接套用下列例子试试（x

在这里你可以实现抽屉的底部背景图片，例子如下。 ~~（只是例子非标准，只是例子非标准，只是例子非标准，重要的话说三遍）~~

<div style="width: 100%;height: 300px;position: absolute;bottom: 50px;">
  <div class="" style="background: center center no-repeat url(//xxxxxxxxxxxxx);background-size: cover;height: 100%;"></div>
</div>

其中，父容器的 width: 100%;position: absolute; 不建议改用哦，而 height 可以根据自己喜欢进行修改~

当使用了 抽屉底部功能 时，推荐在父容器上添加 bottom: 50px; 。

若想实现背景图片裁切，不想居中，可以对子容器的 background 属性进行调整，如下。

<div style="width: 100%;height: 600px;position: absolute;bottom: 50px;">
  <div class="" style="background: center top 200px no-repeat url(//xxxxxxxxxxxxx);background-size: cover;height: 100%;"></div>
</div>

效果如下：

drawerFooter