要使用Ratchet UI组件,请在页面中引入如下CSS文件:


<link rel="stylesheet" href="assets/agile/css/agile.layout.css">
<link rel="stylesheet" href="assets/third/ratchet/css/ratchet.min.css">
                

全局样式中定义的一些样式可以用于后面介绍的其他组件。

印刷样式

印刷样式主要是通过字体的样式来实现的,已经内置的印刷样式如下:


<h1>h1. Heading</h1>
<h2>h2. Heading</h2>
<h3>h3. Heading</h3>
<h4>h4. Heading</h4>
<h5>h5. Heading</h5>
<h6>h6. Heading</h6>
<p>欢迎使用Agile移动应用前端框架。</p>
                

颜色和背景

颜色的选择对于用户的视觉感受非常重要,所以选择一些比较缓和的颜色能够让用户感觉放松与和谐。

Agile Lite中精选了一些颜色设置为样式,它们是:


<a href="#" class="button bg-turquoise">turquoise</a>
<a href="#" class="button bg-green-sea">green-sea</a>
<a href="#" class="button bg-emerland">emerland</a>
<a href="#" class="button bg-nephritis">nephritis</a>
<a href="#" class="button bg-peter-river">peter-river</a>
<a href="#" class="button bg-belize-hole">belize-hole</a>
<a href="#" class="button bg-amethyst">amethyst</a>
<a href="#" class="button bg-wisteria">wisteria</a>
<a href="#" class="button bg-wet-asphalt">wet-asphalt</a>
<a href="#" class="button bg-midnight-blue">midnight-blue</a>
<a href="#" class="button bg-concrete">concrete</a>
<a href="#" class="button bg-asbestos ">asbestos </a>
<a href="#" class="button bg-clouds">clouds</a>
<a href="#" class="button bg-sliver">sliver</a>
<a href="#" class="button bg-alizarin">alizarin</a>
<a href="#" class="button bg-pomegranate">pomegranate</a>
<a href="#" class="button bg-carrot">carrot</a>
<a href="#" class="button bg-pumpkin">pumpkin</a>
<a href="#" class="button bg-sun-flower">sun-flower</a>
<a href="#" class="button bg-orange">orange</a>
<a href="#" class="button bg-violet">violet</a>
                

可以看到上面每个A都有一个带有bg的样式,其中bg-之后的内容极为颜色的样式,如果要设置文字的颜色,则取bg-之后的内容,如果要设置背景色,加上bg-即可。

在一个颜色样式前加上bg-即变成背景色,比如,下面一段代码:


<a href="#" class="button bg-turquoise carrot">turquoise</a>
                

该按钮的背景颜色的值为bg-turquoise,文字的颜色值为carrot

字体图标

所有字体图的使用,样式规则为:icon+"空格"+字体样式。比如:


<!-- 这是一个Ratchet的icon图标 -->
<span class="icon icon-home"></span>
                

目前支持的Ratchet字体图有:


<span class="icon icon-back"></span>
<span class="icon icon-bars"></span>
<span class="icon icon-caret"></span>
<span class="icon icon-check"></span>
<span class="icon icon-close"></span>
<span class="icon icon-code"></span>
<span class="icon icon-compose"></span>
<span class="icon icon-download"></span>
<span class="icon icon-edit"></span>
<span class="icon icon-forward"></span>
<span class="icon icon-gear"></span>
<span class="icon icon-home"></span>
<span class="icon icon-info"></span>
<span class="icon icon-list"></span>
<span class="icon icon-more-vertical"></span>
<span class="icon icon-more"></span>
<span class="icon icon-pages"></span>
<span class="icon icon-pause"></span>
<span class="icon icon-person"></span>
<span class="icon icon-play"></span>
<span class="icon icon-plus"></span>
<span class="icon icon-refresh"></span>
<span class="icon icon-search"></span>
<span class="icon icon-share"></span>
<span class="icon icon-sound"></span>
<span class="icon icon-sound2"></span>
<span class="icon icon-sound3"></span>
<span class="icon icon-sound4"></span>
<span class="icon icon-star-filled"></span>
<span class="icon icon-star"></span>
<span class="icon icon-stop"></span>
<span class="icon icon-trash"></span>
<span class="icon icon-up-nav"></span>
<span class="icon icon-up"></span>
<span class="icon icon-right-nav"></span>
<span class="icon icon-right"></span>
<span class="icon icon-down-nav"></span>
<span class="icon icon-down"></span>
<span class="icon icon-left-nav"></span>
<span class="icon icon-left"></span>
                

左右浮动

左右浮动主要是通过pull-left(浮动在容器左侧)和pull-right(浮动在容器右侧)达到。

比如下面的示例:


<header class="bar bar-nav">
    <a class="icon icon-left-nav pull-left"></a><!-- 此图标在左侧浮动显示 -->
    <a class="icon icon-left-nav pull-left"></a><!-- 此图标在左侧浮动显示 -->
    <a class="icon icon-compose pull-right"></a><!-- 此图标在右侧浮动显示 -->
    <h1 class="title">Title</h1>
</header>
                

按钮

按钮是最常用的组件之一,通常看到的普通按钮如下:


<button class="btn">Button</button>
<button class="btn btn-primary">Button</button>
<button class="btn btn-positive">Button</button>
<button class="btn btn-negative">Button</button>
<button class="btn btn-link">Button</button>

<button class="btn btn-outlined">Button</button>
<button class="btn btn-primary btn-outlined">Button</button>
<button class="btn btn-positive btn-outlined">Button</button>
<button class="btn btn-negative btn-outlined">Button</button>
                

有时候需要使用图标按钮来增强按钮的意思表达,比如:


<button class="btn">
    <span class="icon icon-search"></span>
    Button
</button>
<button class="btn btn-primary">
    <span class="icon icon-search"></span>
    Button
</button>
<button class="btn btn-positive">
    <span class="icon icon-search"></span>
    Button
</button>
<button class="btn btn-negative">
    <span class="icon icon-search"></span>
    Button
</button>
<button class="btn btn-link">
    <span class="icon icon-left"></span>
    Button
</button>
                

另外,按钮也可以通过增加气泡来表示一些数据信息,比如下面的气泡按钮


<button class="btn">Badge button <span class="badge">1</span></button>
<button class="btn btn-primary">Badge button <span class="badge badge-primary">1</span></button>
<button class="btn btn-positive">Badge button <span class="badge badge-positive">1</span></button>
<button class="btn btn-negative">Badge button <span class="badge badge-negative">1</span></button>

<button class="btn btn-outlined">Badge button <span class="badge badge-inverted">1</span></button>
<button class="btn btn-outlined btn-primary">Badge button <span class="badge badge-primary badge-inverted">1</span></button>
<button class="btn btn-outlined btn-positive">Badge button <span class="badge badge-positive badge-inverted">1</span></button>
<button class="btn btn-outlined btn-negative">Badge button <span class="badge badge-negative badge-inverted">1</span></button>
                

按钮在界面美化中也是不容小觑,有时候需要按钮来充实页面内容,这时候就需要使用大按钮,比如:


<button class="btn btn-block">Block button</button>
<button class="btn btn-primary btn-block">Block button</button>
<button class="btn btn-positive btn-block">Block button</button>
<button class="btn btn-negative btn-block">Block button</button>

<button class="btn btn-block btn-outlined">Block button</button>
<button class="btn btn-primary btn-block btn-outlined">Block button</button>
<button class="btn btn-positive btn-block btn-outlined">Block button</button>
<button class="btn btn-negative btn-block btn-outlined">Block button</button>
                

气泡

气泡主要是用于提示用户有新的消息或者数据需要处理,比如:


<span class="badge">1</span>
<span class="badge badge-primary">1</span>
<span class="badge badge-positive">1</span>
<span class="badge badge-negative">1</span>
                

导航容器用于页面的导航,常见导航有位于顶部的title导航、位于底部的tab导航、页面中的不同位置的导航等。

Title bar

Title bar是一个位于顶部的导航,主要显示页面的标题信息以及简单的按钮操作,比如:返回、设置等。

下面是一个最简单的Title bar:


<header class="bar bar-nav">
    <h1 class="title">Title</h1>
</header>
                

当然,我们也可以给Title bar增加一些按钮或图标。

下面是一个带有按钮button的Title bar:


<header class="bar bar-nav">
    <button class="btn pull-left">
    Left
    </button>
    <button class="btn pull-right">
    Right
    </button>
    <h1 class="title">Title</h1>
</header>
                

下面则是一个带有icon图标的Title bar:


<header class="bar bar-nav">
    <a class="icon icon-left-nav pull-left"></a>
    <a class="icon icon-compose pull-right"></a>
    <h1 class="title">Title</h1>
</header>
                

当然,Title bar也可以既有button又有icon


<header class="bar bar-nav">
    <button class="btn btn-link btn-nav pull-left">
        <span class="icon icon-left-nav"></span>
        Left
    </button>
    <button class="btn btn-link btn-nav pull-right">
        Right
        <span class="icon icon-right-nav"></span>
    </button>
    <h1 class="title">Title</h1>
</header>
                

Segment

有时候我们还需要在Titile bar中显示Segment分段选择导航,用于对不同页面的展示切换,下面就是这样的一个例子:


<header class="bar bar-nav">
    <button class="btn pull-left">
    Left
    </button>
    <button class="btn pull-right">
    Right
    </button>
    <div class="segmented-control">
        <a class="control-item active">One</a>
        <a class="control-item">Two</a>
        <a class="control-item">Three</a>
    </div>
</header>
                

通常Segment导航里的按钮会与Article一一对应,当点击Segment的不同按钮则会切换显示不同的Article,这时候就需要给Segment的A链接设置data-toggle="article"href指向要打开的Article的id,这样就可以达到通过Segment来控制Article的显示。

Tab bar

Tab bar是最常见的导航,它通常位于页面底部,每一个Tab都控制不同的页面展示,下面就是一个Tab bar的例子:


<nav class="bar bar-tab">
    <a class="tab-item active" href="#">
        <span class="icon icon-home"></span>
        <span class="tab-label">Home</span>
    </a>
    <a class="tab-item" href="#">
        <span class="icon icon-person"></span>
        <span class="tab-label">Profile</span>
    </a>
    <a class="tab-item" href="#">
        <span class="icon icon-star-filled"></span>
        <span class="tab-label">Favorites</span>
    </a>
    <a class="tab-item" href="#">
        <span class="icon icon-search"></span>
        <span class="tab-label">Search</span>
    </a>
        <a class="tab-item" href="#">
        <span class="icon icon-gear"></span>
        <span class="tab-label">Settings</span>
    </a>
</nav>
                

有时候Tab bar只需要显示简单的文字即可表达意思,不需要显示icon,那么,代码可以这么写:


<nav class="bar bar-tab">
    <a class="tab-item active" href="#">
    Label
    </a>
    <a class="tab-item" href="#">
    Label
    </a>
    <a class="tab-item" href="#">
    Label
    </a>
</nav>
                

同样的,Tab bar导航里的菜单也经常会与Article一一对应,当点击Tab bar的不同菜单则会切换显示不同的Article,这时候也是需要给Tab bar的A链接设置data-toggle="article"href指向要打开的Article的id,这样就可以达到通过Tab bar来控制Article的显示。

Standard bar

Section中的页面,除了Article之外,在顶部和底部都可以固定相应区域显示一些导航,使用Standard bar可以将固定区域分为最顶部、顶部下一层、最底部、底部上一层。

下面的例子分别画出了这四部分区域:


<!-- Segmented control 位于最顶部 -->
<nav class="bar bar-standard">
    <div class="segmented-control">
        <a class="control-item active">Thing one</a>
        <a class="control-item">Thing two</a>
        <a class="control-item">Thing three</a>
    </div>
</nav>

<!-- Block button 位于顶部下一层 -->
<div class="bar bar-standard bar-header-secondary">
    <button class="btn btn-block">Block level button</button>
</div>

<!-- Block button 位于底部上一层 -->
<div class="bar bar-standard bar-footer-secondary">
    <button class="btn btn-block">Block level button</button>
</div>

<!-- Icons 位于最底部 -->
<div class="bar bar-standard bar-footer">
    <a class="icon icon-compose pull-left"></a>
    <a class="icon icon-gear pull-right"></a>
</div>
                

列表容器Table views主要用于展示列表数据,有的只有简单的文字,有的需要带上图标,而有的还需要显示小气泡、按钮甚至富文本等。

简单列表

下面就是一个最简单的列表容器:


<ul class="table-view">
    <li class="table-view-cell">Item 1</li>
    <li class="table-view-cell table-view-cell">Item 2</li>
    <li class="table-view-divider">Divider</li>
    <li class="table-view-cell">Item 3</li>
</ul>
                

箭头导航列表

箭头导航列表可以让列表通过箭头指示让用户清晰认识列表的导航作用,下面就是一个带有箭头导航的列表:


<ul class="table-view">
    <li class="table-view-cell">
        <a class="navigate-right">
            Item 1
        </a>
    </li>
    <li class="table-view-cell">
        <a class="navigate-right">
            Item 2
        </a>
    </li>
    <li class="table-view-cell">
        <a class="navigate-right">
            Item 3
        </a>
    </li>
</ul>
                

可以通过样式.navigate-right.navigate-left来控制箭头的方向。

带小气泡列表

当导航中需要以数字提示作为辅助信息,就需要使用带badges气泡的列表展示。

请看下面代码:


<ul class="table-view">
    <li class="table-view-cell">Item 1 <span class="badge">4</span></li>
    <li class="table-view-cell">Item 2 <span class="badge">1</span></li>
    <li class="table-view-cell">Item 3 <span class="badge">5</span></li>
</ul>
                

当然,如果既希望有箭头又希望有气泡也是可以的,比如:


<ul class="table-view">
    <li class="table-view-cell">
        <a class="navigate-right">
            <span class="badge">5</span>
            Item 1
        </a>
    </li>
    <li class="table-view-cell">
        <a class="navigate-right">
            <span class="badge">5</span>
            Item 2
        </a>
    </li>
    <li class="table-view-cell">
        <a class="navigate-right">
            <span class="badge">5</span>
            Item 3
        </a>
    </li>
</ul>
                

带图标列表

没有图标的列表有时候显得有点单调,所以加上图标列表会更生动,比如:


<ul class="table-view">
    <li class="table-view-cell media">
        <a class="navigate-right">
            <span class="media-object pull-left icon icon-trash"></span>
            <div class="media-body">
            Item 1
            </div>
        </a>
    </li>
    <li class="table-view-cell media">
        <a class="navigate-right">
            <span class="media-object pull-left icon icon-gear"></span>
            <div class="media-body">
            Item 2
            </div>
        </a>
    </li>
    <li class="table-view-cell media">
        <a class="navigate-right">
            <span class="media-object pull-left icon icon-pages"></span>
            <div class="media-body">
            Item 3
            </div>
        </a>
    </li>
</ul>
                

富文本列表

列表的形式还可能是富文本的,带有图片,导航以及内容较多的文本内容等,比如:


<ul class="table-view">
    <li class="table-view-cell media">
        <a class="navigate-right">
            <img class="media-object pull-left" src="../../image/42x42.gif">
            <div class="media-body">
                Item 1
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
            </div>
        </a>
    </li>
    <li class="table-view-cell media">
        <a class="navigate-right">
            <img class="media-object pull-left" src="../../image/42x42.gif">
            <div class="media-body">
                Item 1
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
            </div>
        </a>
    </li>
    <li class="table-view-cell media">
        <a class="navigate-right">
            <img class="media-object pull-left" src="../../image/42x42.gif">
            <div class="media-body">
                Item 1
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
            </div>
        </a>
    </li>
</ul>
                

带按钮列表

在列表中使用按钮可以丰富列表的操作,比如:


<ul class="table-view">
    <li class="table-view-cell">Item 1 <button class="btn">Button</button></li>
    <li class="table-view-cell">Item 2 <button class="btn btn-primary">Button</button></li>
    <li class="table-view-cell">Item 3 <button class="btn btn-positive">Button</button></li>
</ul>
                

带表单元素列表

列表中有可能需要带表单元素来做辅助操作,比如开关、checkbox、radio等。

下面就是一个带有表单元素列表的示例:


<ul class="table-view">
    <li class="table-view-cell">
        Item 1
        <div class="toggle active" data-on="开" data-on-value="on" data-off="关" data-off-value="off"></div>
    </li>
    <li class="table-view-cell">
        Item 2
        <div class="active toggle"></div>
    </li>
    <li class="table-view-cell">
        Item 3
        <div class="active toggle"></div>
    </li>

    <li class="table-view-divider">Divider</li>
    <li class="table-view-cell">
        <a href="#" data-role="checkbox">
            <label for="cb1" class="checkbox-label">篮球</label><input type="checkbox" id="cb1"/>
        </a>
    </li>
    <li class="table-view-cell">
        <a href="#" data-role="checkbox">
            <label for="cb2" class="checkbox-label">足球</label><input type="checkbox" id="cb2"/>
        </a>
    </li>
</ul>
                

卡片式列表

卡片式列表可以清晰把数据进行分组。

table-view放置于一个样式为card的容器中即可达到卡片式列表的效果。

下面就是一卡片式列表的示例:


<div class="card">
    <ul class="table-view">
        <li class="table-view-cell">Item 1</li>
        <li class="table-view-cell">Item 2</li>
        <li class="table-view-cell table-view-divider">Divider</li>
        <li class="table-view-cell">Item 3</li>
        <li class="table-view-cell">Item 4</li>
    </ul>
</div>
                

表单控件主要用于表单内容的展示,但是由于移动设备屏幕的差异,传统的表单的左右结构不合适,所以需要扩充适合于移动设备的布局方式和操作方式。

普通样式

由于移动设备的屏幕较小,所以默认样式的表单控件都是各占一行的,如下:


<div class="scroller demo-btn">
    <form>
        <input type="text" placeholder="姓名">
        <input type="search" placeholder="搜索">
        <textarea rows="5"></textarea>
        <div data-role="select">
            <select>
                <option>请选择公司</option>
                <option>烽火通信股份有限公司</option>
                <option>烽火星空通信发展有限公司</option>
            </select>
        </div>
        <div class="split-div-large"></div>
        <div class="card" style="margin:0px;">
            <ul class="table-view">
                <li class="table-view-cell">
                    <font class="sliver">爱好</font>
                </li>
                <li class="table-view-cell">
                    <a href="#" data-role="checkbox">
                        <label for="cb1" class="checkbox-label">篮球</label><input type="checkbox" id="cb1"/>
                    </a>
                </li>
                <li class="table-view-cell">
                    <a href="#" data-role="checkbox">
                        <label for="cb2" class="checkbox-label">足球</label><input type="checkbox" id="cb2"/>
                    </a>
                </li>
            </ul>
        </div>
        <div class="split-div-large"></div>
        <div class="card" style="margin:0px;">
            <ul class="table-view">
                <li class="table-view-cell">
                    <font class="sliver">性别</font>
                </li>
                <li class="table-view-cell">
                    <a href="#" data-role="radio">
                        <label for="cb3" class="radio-label">男</label><input type="radio" name="sex" id="cb3"/>
                    </a>
                </li>
                <li class="table-view-cell">
                    <a href="#" data-role="radio">
                        <label for="cb4" class="radio-label">女</label><input type="radio" name="sex" id="cb4"/>
                    </a>
                </li>
            </ul>
        </div>

        <div class="split-div-large"></div>

        <div data-role="file">
            <label>请选择文件</label>
            <input name="file" type="hidden">
        </div>

        <div class="split-div-large"></div>

        <div data-role="date">
            <label>请选择日期</label>
            <input type="hidden"/>
        </div>

        <div class="split-div-large"></div>

        <div data-role="time">
            <label>请选择时间</label>
            <input type="hidden"/>
        </div>

        <div class="split-div-large"></div>
        <button class="btn btn-positive btn-block">提交</button>
    </form>

</div>
                

带提示的表单

有时候为了节约控件,可以将表单元素的名称和提示语合并,比如下面的代码:


<form class="input-group">
    <input type="text" placeholder="姓名">

    <input type="email" placeholder="邮件">
    <input type="text" placeholder="用户名">
    <div data-role="select">
        <select>
            <option>公司</option>
            <option>烽火通信股份有限公司</option>
            <option>烽火星空通信发展有限公司</option>
        </select>
    </div>
</form>
                

左右结构表单

传统的表单一般是左右结构的,如果控件允许,也为了符合用户再PC和移动设备的体验一致,也可以使用左右结构的表单。

下面的代码就是一个左右结构表单的列子:


<form class="input-group">
    <div class="input-row">
        <label>姓名</label>
        <input type="text" placeholder="请输入姓名">
    </div>
    <div class="input-row">
        <label>Email</label>
        <input type="email" placeholder="请输入邮箱">
    </div>
    <div class="input-row">
        <label>用户名</label>
        <input type="text" placeholder="请输入用户名">
    </div>
    <div class="input-row">
        <label>在职</label>
        <div class="toggle" data-on="是" data-on-value="1" data-off="否" data-off-value="0"></div>
    </div>

    <div class="input-row">
        <label>公司</label>
        <div data-role="select">
            <select>
                <option>请选择公司</option>
                <option>烽火通信股份有限公司</option>
                <option>烽火星空通信发展有限公司</option>
            </select>
        </div>
    </div>

    <div class="input-row">
        <label>兴趣</label>
        <div class="control-container">
            <label for="bb" class="checkbox-label"><input type="checkbox" id="bb"/>篮球</label>
            <label for="fb" class="checkbox-label"><input type="checkbox" id="fb"/>足球</label>
            <label for="vb" class="checkbox-label"><input type="checkbox" id="vb"/>排球</label>
        </div>
    </div>

    <div class="input-row">
        <label>性别</label>
        <div class="control-container">
            <label for="nan" class="radio-label"><input type="radio" name="sexy" id="nan"/>男</label>
            <label for="nv" class="radio-label"><input type="radio" name="sexy" id="nv"/>女</label>
        </div>
    </div>

    <div class="input-row">
        <label>基本情况</label>
        <textarea rows="4" placeholder="请输入基本情况"></textarea>
    </div>
    <div class="input-row">
        <label>日期</label>
        <div data-role="date">
            <label>请选择日期</label>
            <input type="hidden"/>
        </div>
    </div>
    <div class="input-row">
        <label>时间</label>
        <div data-role="time">
            <label>请选择时间</label>
            <input type="hidden"/>
        </div>
    </div>
    <div class="input-row">
        <label>文件</label>
        <div data-role="file">
            <label>请选择文件</label>
            <input type="hidden"/>
        </div>
    </div>

</form>