您的位置：首页 > 网站推广 > 经验心得  >  mip-sidebar侧边栏组件详解 mip-sidebar侧边栏组件怎么用

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

 更新时间：2016年12月21日 21:00  点击：1914
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--]

相关文章

  • Vue组件跨层级获取组件操作

    这篇文章主要介绍了Vue组件跨层级获取组件操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28

  • Vue实现动态查询规则生成组件

    今天我们来给大家介绍下在Vue开发中我们经常会碰到的一种需求场景，本文主要介绍了Vue动态查询规则生成组件，需要的朋友们下面随着小编来一起学习学习吧...2021-05-27

  • js组件SlotMachine实现图片切换效果制作抽奖系统

    这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19

  • vue中使用element日历组件的示例代码

    这篇文章主要介绍了vue中如何使用element的日历组件，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-09-30

  • 微信小程序自定义tabbar组件

    这篇文章主要为大家详细介绍了微信小程序自定义tabbar组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-03-14

  • Vue多选列表组件深入详解

    这篇文章主要介绍了Vue多选列表组件深入详解，这个是vue的基本组件，有需要的同学可以研究下...2021-03-03

  • Bootstrap进度条组件知识详解

    在网页中，经常见到进度条效果，那么这些个性的进度条组件效果是怎么实现的呢，下面脚本之家小编给大家分享Bootstrap进度条组件知识详解，感兴趣的朋友要求学习吧...2016-05-04

  • vue递归实现自定义tree组件

    这篇文章主要为大家详细介绍了vue递归实现自定义tree组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-08-20

  • Vue 过渡（动画）transition组件案例详解

    这篇文章主要介绍了Vue 过渡（动画）transition组件案例详解，非常不错，具有参考借鉴价值，需要的朋友参考下...2017-01-26

  • Vue父子组件传值的一些坑

    这篇文章主要介绍了Vue父子组件传值的一些坑，帮助大家更好的理解和使用vue父子组件，感兴趣的朋友可以了解下...2020-09-16

  • 使用Angular CDK实现一个Service弹出Toast组件功能

    本文主要写用cdk实现一个简单的Toast组件，使用的是cdk中的overlay模块，需要手动安装环境，具体安装方法及相关实现代码跟随小编一起看看吧...2021-07-28

  • BootStrap 附加导航组件

    Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架,主要基于 HTML、CSS、JAVASCRIPT 的。接下来通过本文给大家介绍BootStrap 附加导航组件的知识，感兴趣的朋友一起学习吧...2016-07-29

  • Vue 组件复用多次自定义参数操作

    这篇文章主要介绍了Vue 组件复用多次自定义参数操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27

  • C#控制台程序使用Log4net日志组件详解

    这篇文章主要为大家详细介绍了C#控制台程序使用Log4net日志组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-25

  • BootStrap Progressbar 实现大文件上传的进度条的实例代码

    这篇文章主要介绍了BootStrap Progressbar 实现大文件上传的进度条的实例代码的相关资料，非常不错，具有参考借鉴价值，需要的朋友可以参考下...2016-07-01

  • Bootstarp创建可折叠的组件

    这篇文章主要为大家详细介绍了Bootstarp创建可折叠组件的对应方法，以实例为大家分享了Bootstrap折叠组件，感兴趣的小伙伴们可以参考一下...2016-02-26

  • React 高阶组件HOC用法归纳

    高阶组件就是接受一个组件作为参数并返回一个新组件（功能增强的组件）的函数。这里需要注意高阶组件是一个函数，并不是组件，这一点一定要注意，本文给大家分享React 高阶组件HOC使用小结，一起看看吧...2021-06-13

  • vue实现从外部修改组件内部的变量的值

    这篇文章主要介绍了vue实现从外部修改组件内部的变量的值，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-31

  • 解析element-ui中upload组件传递文件及其他参数的问题

    这篇文章主要介绍了element-ui中upload组件如何传递文件及其他参数,分析一下我使用element-ui遇到的问题以及解决方法，需要的朋友可以参考下...2021-11-10

  • 详解vue组件之间的通信

    这篇文章主要介绍了vue组件之间的通信，帮助大家更好的理解和学习前端的相关知识，感兴趣的朋友可以了解下...2020-08-30