SUI Mobile有自己的布局风格和样式。熟悉组件库会让你少走弯路,极大的提升你的效率,做出SUI Mobile风格的页面。
不要多想先认真学学SUI Mobile是怎么做的吧!
rem 是相对于 html 元素的 font-size 的一个单位。不会受到父级元素的影响。 统一使用rem对页面进行整体缩放。
Router默认开启,会自动拦截所有链接的Touch行为
禁用路由:在 zepto 之后, msui 之前使用 script $.config = {router: false} 来禁用.
部分禁用:链接上增加 class="external"
内联页面:每一个 .page 容器都应该有一个全局唯一的id,路由器可以跳转到id对应的内联页面 <a href='#{page-id}'>跳转</a>
后退:.back
page-group
page
.content .content-block
bar bar-nav
title
button pull-left
icon icon-left pull-right
带链接和图标
<button class="button button-link button-nav pull-left">
<span class="icon icon-left"></span>
返回
</button>
<div class="buttons-row">
<a href="#tab1" class="tab-link active button">Tab 1</a>
<a href="#tab2" class="tab-link button">Tab 2</a>
<a href="#tab3" class="tab-link button">Tab 3</a>
</div>
bar bar-tab
tab-item external
.open-panel .close-panel
data-panel={panel的选择}
.panel-left .panel-right
.panel-cover .panel-reveal
$.config.swipePanel $.config.swipePanelOnlyClose
如果你希望页面内容所有两边有间距,可以把内容放在 .content-padded 容器中。
一级标签页 buttons-tab
二级标签页 buttons-row
fixed-tab
通过在"fixed-tab"元素上添加data-offset="44"来调整高度
card
card-header
card-content card-content-inner
card-footer
其中:
item-content - item-media和item-inner的主要弹性(flex)容器。必选元素。 item-media - 媒体元素(如图标,图片等)的容器。可选元素。 item-inner - item-title和item-after的主要弹性(flex)容器。必选元素。 item-title - 单行列表项目标题。必选元素。 item-after - 列表项目标签。可以包含任意额外的html元素。可选元素。 在 .item-content 上加上 .item-link 会增加一个向右的箭头。
list-group-title - 分组标题。
item-subtitle - 额外的单行标题。可选元素。 item-text - 额外的两行布局的容器,用来放置细节描述。可选元素。
就是列表里插入表单组件。
按钮 button
列表按钮 list-button
按钮组 button-row
no-gutter
无间距
相关文章推荐: