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


<link rel="stylesheet" href="assets/agile/css/agile.layout.css">
<link rel="stylesheet" href="assets/third/flat/flat.component.css">
<link rel="stylesheet" href="assets/third/flat/flat.color.css">
<link rel="stylesheet" href="assets/third/flat/iconline.css">
                

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

颜色和背景

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

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


<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

字体图标

Flat UI 里使用的字体图标有iconline、iconform、iconlogo三种。

所有字体图的使用,样式规则为:iconfont+"空格"+字体样式,通常iconline的字体样式以iconline-开头,iconform的字体样式以iconform-开头、而iconlogo的字体样式以iconlogo-开头。比如:


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

<!-- 这是一个iconlogo的icon图标 -->
<span class="iconfont iconlogo-logo-starrysky"></span>
                

目前支持的字体图标有上百个,具体请下载示例代码查看。

按钮

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


<button>按钮</button>
<button class="submit">确定提交按钮</button>
<button class="cancel">取消重置按钮</button>
<button class="disable">禁用按钮</button>
<button class="link">链接按钮</button>

<button class="outline">按钮</button>
<button class="submit outline">确定提交按钮</button>
<button class="cancel outline">取消重置按钮</button>
<button class="disable outline">禁用按钮</button>
<button class="link outline">链接按钮</button>
                

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


<button>
    <i class="iconfont iconline-home"></i>
    按钮
</button>
<button class="submit">
    <i class="iconfont iconline-rdo-tick"></i>
    提交
</button>
<button class="cancel">
    <i class="iconfont iconline-rdo-cancel"></i>
    取消
</button>
<button class="link">
    <i class="iconfont iconline-rdo-add"></i>
    添加
</button>
                

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


<button>汽泡按钮 <span class="tip">1</span></button>
<button class="submit">汽泡按钮 <span class="tip">1</span></button>
<button class="cancel">汽泡按钮 <span class="tip">1</span></button>
<button class="link">汽泡按钮 <span class="tip">1</span></button>

<button class="outline outline">汽泡按钮 <span class="tip">1</span></button>
<button class="submit outline">汽泡按钮 <span class="tip">1</span></button>
<button class="cancel outline">汽泡按钮 <span class="tip">1</span></button>
<button class="link outline">汽泡按钮 <span class="tip">1</span></button>
                

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


<button class="block">大按钮</button>
<button class="submit block">大按钮</button>
<button class="cancel block">大按钮</button>
<button class="link block">大按钮</button>

<button class="block outline">大按钮</button>
<button class="submit block outline">大按钮</button>
<button class="cancel block outline">大按钮</button>
<button class="link block outline">大按钮</button>
                

气泡

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


<span class="tip">1</span>
                

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

Titlebar

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

下面是一个最简单的Titlebar:


<div class="titlebar">
    <h1>标题</h1>
</div>
                

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

下面是一个带有按钮的Titlebar:


<div class="titlebar">
    <a data-toggle="close" href="#">
    返回
    </a>
    <h1 class="title">标题</h1>
    <a href="#">
    右按钮
    </a>
</div>
                

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


<div class="titlebar">
    <a data-toggle="close" href="#"><i class="iconfont iconline-arrow-left"></i></a>
    <h1 class="title">Title</h1>
</div>
                

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


<div class="titlebar">
    <a data-toggle="close" href="#">
        <i class="iconfont iconline-arrow-left"></i>
        返回
    </a>
    <h1 class="title">Title</h1>
    <a href="#">
        右侧
        <i class="iconfont iconline-arrow-right"></i>
    </a>
</div>
                

Tabbar

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


<div class="tabbar">
       <a class="tab active">tab页</a>
       <a class="tab">tab页</a>
       <a class="tab">tab页</a>
</div>
                

除此之外,页签栏Tabbar还可以显示成滑动块样式,只需要在Tabbar容器上加上一层<div class="tabbar-slider" data-scroll="horizontal">即可,比如:


<div class="tabbar-slider" data-scroll="horizontal">
    <div class="tabbar" style="width:440px;">
       <a class="tab active">tab页</a>
       <a class="tab">tab页</a>
       <a class="tab">tab页</a>
	</div>
</div>
                

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

Menubar

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


<nav class="menubar">
    <a class="menu active" href="#">
        <span class="menu-icon iconfont iconline-mail"></span>
        <span class="menu-text">邮件</span>
    </a>
    <a class="tab-item" href="#">
        <span class="icon icon-person"></span>
        <span class="menu-text">通讯录</span>
    </a>
    <a class="tab-item" href="#">
        <span class="icon icon-star-filled"></span>
        <span class="menu-text">审批</span>
    </a>
    <a class="tab-item" href="#">
        <span class="menu-icon iconfont iconline-map-location"></span>
        <span class="menu-text">定位</span>
    </a>
</nav>
                

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


<nav class="menubar">
    <a class="menu active" href="#">
        <span class="menu-text">邮件</span>
    </a>
    <a class="tab-item" href="#">
        <span class="menu-text">通讯录</span>
    </a>
    <a class="tab-item" href="#">
        <span class="menu-text">审批</span>
    </a>
    <a class="tab-item" href="#">
        <span class="menu-text">定位</span>
    </a>
</nav>
                

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

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

简单列表

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


<ul class="listitem">
    <li>列表</li>
    <li>列表</li>
</ul>
                

带图标列表

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


<ul class="listitem">
    <li>
        <i class="icon iconfont iconline-fav"></i>
        <i class="ricon iconfont iconline-arrow-right"></i>
        <div class="text">带图标列表</div>
    </li>
</ul>
                

富文本列表

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


<ul class="listitem">
    <li>
    	<img src="../../script/flat/image/list/list_img.jpg" style="width:64px;" class="img"/>
    	<i class="ricon iconfont iconline-arrow-right"></i>
       	<div class="text">
          列表标题
            <small class="nowrap ellipsis">列表副标题</small>
        </div>
    </li>
</ul>
                

带按钮列表

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


<ul class="listitem">
    <li class="row-large">
        <button class="ricon">按钮</button>
      	<div class="text" style="padding-right:40px;">
            	按钮列表按钮列表按钮列表按钮列表
        </div>
     </li>
</ul>
                

带表单元素列表

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

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


<ul class="listitem">
    <li class="nopadding">
	  	<a href="#" data-role="checkbox">
	  		<label for="basketball" class="black">篮球</label><input type="checkbox" id="basketball"/>
	  	</a>
  	</li>
</ul>
                

卡片式列表

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

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

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


<div class="card">
    <ul class="listitem">
        <li>列表</li>
        <li>列表</li>
        <li>列表</li>
        <li>列表</li>
        <li>列表</li>
    </ul>
</div>
                

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

普通样式

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


    <form class="form-group">
    	<div class="card">
        	<input type="text" placeholder="姓名">
        </div>
        <div class="card">
        	<input type="search" placeholder="搜索">
        </div>
        <div class="card">
        	<textarea rows="5"></textarea>
        </div>
        <div data-role="select" class="card">
            <select>
                <option>请选择公司</option>
                <option>烽火通信股份有限公司</option>
                <option>烽火星空通信发展有限公司</option>
            </select>
        </div>
        <div class="card">
            <ul>
                <li class="title">爱好 </li>
                <li>
                    <a href="#" data-role="checkbox">
                        <label for="cb1" class="checkbox-label">篮球</label><input type="checkbox" id="cb1"/>
                    </a>
                </li>
                <li>
                    <a href="#" data-role="checkbox">
                        <label for="cb2" class="checkbox-label">足球</label><input type="checkbox" id="cb2"/>
                    </a>
                </li>
            </ul>
        </div>
        <div class="card">
            <ul class="listitem">
                <li class="title">性别</li>
                <li>
                    <a href="#" data-role="radio">
                        <label for="cb3" class="radio-label">男</label><input type="radio" name="sex" id="cb3"/>
                    </a>
                </li>
                <li>
                    <a href="#" data-role="radio">
                        <label for="cb4" class="radio-label">女</label><input type="radio" name="sex" id="cb4"/>
                    </a>
                </li>
            </ul>
        </div>

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

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

        <div data-role="time" class="card">
            <label>请选择时间</label>
            <input type="hidden"/>
        </div>
        <div class="card noborder">
			<button class="submit width-full">提交</button>
		</div>
    </form>
                

带提示的表单

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


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

左右结构表单

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

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


<form class="form-common">
        <label class="label-left">姓名</label>
        <label class="label-right">
        	<input type="text" placeholder="请输入姓名">
        </label>
        <label>Email</label>
        <label class="label-right">
        	<input type="email" placeholder="请输入邮箱">
        </label>
        
        <label class="label-left">用户名</label>
        <label class="label-right">
        	<input type="text" placeholder="请输入用户名">
        </label>

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

    <label class="label-left">爱好</label>
		    <label class="label-right">
		    	<a href="#" data-role="checkbox">
		    		<input type="checkbox" id="baskball"/>
		  			<label for="baskball" class="black">篮球</label>
		  		</a>
		  		<a href="#" data-role="checkbox">
		  			<input type="checkbox" id="football"/>
		  			<label for="football" class="black">足球</label>
		  		</a>
		  		<a href="#" data-role="checkbox">
		    		<input type="checkbox" id="pingpang"/>
		  			<label for="pingpang" class="black">乒乓球</label>
		  		</a>
		  		<a href="#" data-role="checkbox">
		  			<input type="checkbox" id="badminton"/>
		  			<label for="badminton" class="black">羽毛球</label>
		  		</a>
		    </label>


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

</form>