zhuxianfei.com

﹤首页 > 网站推广 > 经验心得

mip-sidebar侧边栏组件详解 mip-sidebar侧边栏组件怎么用

发布时间：2016-12-21 21:00

mip-sidebar侧边栏组件怎么用？废话不多说，不知道怎么使用的请看下文为大家带来的mip-sidebar侧边栏组件详解。

标题 内容
类型 通用
支持布局 N/S
所需脚本 https://mipcache.bdstatic.com/static/v1/mip-sidebar/mip-sidebar.js

示例

基本使用

<header>

<div id="hamburger" class="mip-button" on="tap:sidebar.open">

<div id="logo" href="/">Open mip-sidebar</div>

</div>

</header>

<mip-sidebar

id='sidebar'

layout="nodisplay"

class="mip-hidden">

<ul>

<li>

<mip-link href="#">Home</mip-link>

<button class="mip-button" on="tap:sidebar.close"> X </button>

</li>

<li> Nav item 1</li>

<li>

<mip-fit-text width="220"

height="20"

layout="responsive"

max-font-size="24">

Nav item 2 - <mip-fit-text>

</mip-fit-text>

</li>

<li>

<mip-fit-text width="220"

height="20"

layout="responsive"

max-font-size="24">

Nav item 3 - <mip-fit-text> longer text

</mip-fit-text>

</li>

<li> Nav item 4 - Image

<mip-img class='mip-sidebar-image'

src="http://placeholder.qiniudn.com/100x50"

width="20"

height="20"

alt="an image"></mip-img>

</li>

<li> Nav item 5</li>

<li> Nav item 6</li>

</ul>

</mip-sidebar>

右侧侧边栏

<header>

<div id="hamburger" class="mip-button" on="tap:right-sidebar.open">

<div id="logo" href="/">Open mip-sidebar</div>

</div>

</header>

<mip-sidebar

id='right-sidebar'

layout="nodisplay"

side="right"

class="mip-hidden">

<ul>

<li>

<mip-link href="#">Home</mip-link>

<button class="mip-button" on="tap:right-sidebar.close"> X </button>

</li>

<li> Nav item 1</li>

<li>

<mip-fit-text width="220"

height="20"

layout="responsive"

max-font-size="24">

Nav item 2 - <mip-fit-text>

</mip-fit-text>

</li>

<li>

<mip-fit-text width="220"

height="20"

layout="responsive"

max-font-size="24">

Nav item 3 - <mip-fit-text> longer text

</mip-fit-text>

</li>

<li> Nav item 4 - Image

<mip-img class='mip-sidebar-image'

src="http://placeholder.qiniudn.com/100x50"

width="20"

height="20"

alt="an image"></mip-img>

</li>

<li> Nav item 5</li>

<li> Nav item 6</li>

</mip-sidebar>

属性

id

说明：id

必填：是

格式：字符串

单位：无

默认值：无 使用限制：无

layout

说明：布局设定

必填：是

格式：字符串

单位：无

取值：nodisplay

side

说明：侧边栏位置设定，左边或者右边

必填：否

格式：字符串

单位：无

取值：left, right

默认值：left

mip-share分享组件怎么用？mip-share分享提供页面内分享按钮功能，默认分享当前网址，详细使用方法请看下文的mip-share分享组件详解。

标题 内容
类型 通用
支持布局 responsive,fixed-height,fill,container,fixed
所需脚本 https://mipcache.bdstatic.com/static/v1/mip-share/mip-share.js

示例

基本使用

<div class="mip-share-container">

<mip-share></mip-share>

</div>

fixed布局

<div class="mip-share-container">

<mip-share

layout="fixed"

width="200"

height="158">

</mip-share>

</div>

自定义分享参数

<div class="mip-share-container">

<mip-share

title="分享标题"

content="分享内容"

icon="https://m.baidu.com/se/static/pmd/pmd/share/images/bdu.jpg"

layout="responsive"

width="414"

height="158">

</mip-share>

</div>

属性

url

说明：分享出去的网址

必选项：否

类型：字符串

取值范围：URL

默认值：当前页面的url

title

说明：分享出去的标题

必选项：否

类型：字符串

content

说明：分享出去的内容

必选项：否

类型：字符串

icon

说明：分享出去的图标

必选项：否

类型：字符串

取值范围：URL

mip-nav-slidedown菜单怎么用？mip-nav-slidedown 实现响应式的菜单，在mip官网有引用，详细的用法请看下文为大家带来的mip-nav-slidedown菜单详解。

标题 内容
类型 通用
支持布局 responsive,fixed-height,fill,container,fixed 文档
所需脚本 https://mipcache.bdstatic.com/static/v1/mip-nav-slidedown/mip-nav-slidedown.js

示例

按如下格式添加内容，<a>可以替换为<mip-link>

<div class="mip-nav-wrapper">

<mip-nav-slidedown data-id="bs-navbar" class="mip-element-sidebar container" data-showbrand="1">

<nav id="bs-navbar" class="navbar-collapse collapse navbar navbar-static-top">

<ul class="nav navbar-nav navbar-right">

<li class="index-body">

<a target="_blank" href="//www.mipengine.org/">首页</a>

</li>

<li class="doc-body">

<a target="_blank" href="//www.mipengine.org/doc/00-mip-101.html">教程</a>

</li>

<li class="timeline-body">

<a target="_blank" href="//www.mipengine.org/timeline.html">动态</a>

</li>

<li class="">

<a target="_blank" href="http://www.cnblogs.com/mipengine/" target="_blank">博客</a>

</li>

<li class="navbar-wise-close">

<span id="navbar-wise-close-btn"></span>

</li>

</ul>

</nav>

</mip-nav-slidedown>

</div>

属性

data-id

说明：内部菜单id

必选项：是

类型：字符串

data-showbrand

说明：是否需要左上角显示可点击图标

必选项：否

类型：字符串，0(不显示)，1(显示)

默认值：1

data-brandhref

说明：左上角图标跳转链接，在data-showbrand为1时有效

必选项：否

类型：url

默认：'/'

MIP的中文名为移动网页加速器，用于M端的加速优化，百度mip推出之后,有很多的站长不知道怎么使用这种工具，下面一聚教程网为大家带来了全面系统的使用方法，希望对大家有所帮助。

新手指南

完整 DEMO

什么是 MIP

MIP 加速原理

开发规范

MIP HTML规范

MIP 校验规则

MIP Cache 规范

组件 开发规范

Canonical 使用规范

组件说明

组件概述

组件布局

内置组件

mip-carousel 多图轮播

mip-iframe

mip-img 图片

mip-pix 统计

mip-video 视频

个性化组件

mip-accordion 折叠节点

mip-anim 动图

mip-appdl 下载

mip-audio 音频播放

mip-filter 筛选

mip-fixed 悬浮布局

mip-form 表单

mip-gototop 快速回顶

mip-html-os 操作系统

mip-lightbox 弹层

mip-link 跳转链接

mip-nav-slidedown 菜单

mip-share 分享

mip-sidebar 侧边栏

mip-stats-baidu 百度统计

mip-stats-tianrun 天润统计

mip-vd-tabs tab切换组件

广告组件

mip-ad 广告

类型: ad-baidu 网盟广告

类型: ad-baidu-wm-ext 网盟扩展广告

类型: ad-comm 通用广告

类型: ad-imageplus 图加广告

类型: ad-qwang 全网推荐

类型: ad-ssp 内容联盟广告

工具接口

开发辅助工具和模块

手势

其它

标签：[!--infotagslink--]

您可能感兴趣的文章: