聂文文学习笔记-SUI Mobile组件库

阅读数:2657 发布时间:2016-06-22 09:02:46

作者:w1nww 标签: 聂文文 委培班 w1 SUI SUI Mobile SUI Mobile组件库

SUI Mobile组件库

前言

SUI Mobile有自己的布局风格和样式。熟悉组件库会让你少走弯路,极大的提升你的效率,做出SUI Mobile风格的页面。
不要多想先认真学学SUI Mobile是怎么做的吧!

使用rem

rem 是相对于 html 元素的 font-size 的一个单位。不会受到父级元素的影响。 统一使用rem对页面进行整体缩放。

路由

Router默认开启,会自动拦截所有链接的Touch行为

路由功能前提

  1. 每个 url 对应的 html 文档, 所有的展示内容都必须放在 div.page-group 里。
  2. html 文档中, 每个可以用来切换显示的块都应该有 page 的 class。

禁用路由:在 zepto 之后, msui 之前使用 script $.config = {router: false} 来禁用. 部分禁用:链接上增加 class="external" 内联页面:每一个 .page 容器都应该有一个全局唯一的id,路由器可以跳转到id对应的内联页面 <a href='#{page-id}'>跳转</a> 后退:.back

基本结构

标题栏 bar bar-nav

工具栏 bar bar-tab

侧栏

内容区

如果你希望页面内容所有两边有间距,可以把内容放在 .content-padded 容器中。

标签页

卡片 card

列表

其中:

item-content - item-mediaitem-inner的主要弹性(flex)容器。必选元素。 item-media - 媒体元素(如图标,图片等)的容器。可选元素。 item-inner - item-titleitem-after的主要弹性(flex)容器。必选元素。 item-title - 单行列表项目标题。必选元素。 item-after - 列表项目标签。可以包含任意额外的html元素。可选元素。 在 .item-content 上加上 .item-link 会增加一个向右的箭头。

联系人列表

多媒体列表

表单列表

就是列表里插入表单组件。

按钮

按钮 button

列表按钮 list-button

按钮组 button-row

栅格

no-gutter 无间距

相关文章推荐: