首页> 前端开发> 组件化样式设计之应用

[文章]组件化样式设计之应用

收藏
0 639 0

组件化样式设计之应用

【摘要】

组件化样式设计,它是一个前端css样式设计和开发的一个思路,和我们通常讲的组件化的概念类似,即通过特定的编程规范,实现功能模块的高内聚性和低耦合性。在上一篇文章《组件化样式设计之思路和规范》中,我们介绍了组件样式的设计思路和规范,本文通过学领未来在项目中的一个简单应用页面来介绍组件化样式设计的应用,阅读本文前应先阅读《组件化样式设计之思路和规范》。

【正文】

一、组件划分

image.png

1

如上图(图1)是一个移动端直播数据列表的设计图,根据组件化样式的设计规范,将页面划分为5个组件(图2),其中组件1内嵌套组件2,组件2嵌套组件3;组件4嵌套引入的第三方框架的按钮模块,组件命名如下:

组件1:直播列表头部(lf-live-list-search

组件2:滑块(lf-slide-tip

组件3:列表过滤(lf-fiters

组件4:列表项(lf-live-list

image.png

2

二、Html和样式设计

根据组件的划分进行各个组件的HTMLCSS设计

1、直播列表头部(lf-live-list-search

Html设计

<div class="lf-live-list-search">
    <h2 class="title">
        <i class="fa fa-video-camera" aria-hidden="true" style="margin-right: 10px;"></i>直播
    </h2>
    <div class="sort" >
        <span  class="filter"><span>按时间排序</span><i class="fa fa-filter" aria-hidden="true" style="margin-left: 10px;"></i></span>
    </div>
</div>

CSS设计

/* 直播列表头部*/
.lf-live-list-search{
    margin-top: -10px;
    border-bottom: 1px solid #ddd;
    padding: 8px 10px;
    position: fixed;
    width: 100%;
    z-index: 1000000;
    background: #fff;
    color: #666;
}
/*组件的元素-标题*/
.lf-live-list-search  .title{
    font-size: 16px;
    width: 100px;
}
/*组件的元素-排序*/
.lf-live-list-search .sort {
    position: absolute;
    right: 28px;
    top: 9px;
}
/*组件的元素-排序-过滤器*/
.lf-live-list-search .sort .filter {
    width: 120px;
    display: block;
    text-align: right;
}
/*用于控制或者重写嵌套组件的样式*/ .lf-live-list-search .selected .in-slide-tip{     visibility: visible !important;     -webkit-transform: scale(1);     transform: scale(1);     opacity: 1;     box-shadow: 1px 2px 15px 2px #ccc; }

2、滑块(lf-slide-tip

Html设计

<div class="lf-slide-tip in-slide-tip"></div>

CSS设计

/* 滑块盒子 */
.lf-slide-tip {
    visibility: hidden;
    width: 150px;
    position: absolute;
    top: 37px;
    margin-left: -30px;
    color: #fff;
    z-index: 999;
    border-radius: 2px;
    background-color: #fff;
    /* padding: 20px 30px; */
    transform: scale(.5);
    -webkit-transition: .2s;
    transition: .2s;
    opacity: 0;
    -webkit-transform-origin: center top;
    transform-origin: center top;
}
.lf-slide-tip:after {
    content: '';
    width: 0;
    height: 0;
    border-width: 6px;
    border-bottom-color: #fff;
    position: absolute;
    bottom: 100%;
    left: 60%;
}

3、列表过滤(lf-fiters

Html设计

<ul class="lf-fiters">
    <li class="item">按时间排序<i class="fa fa-check ng-hide" aria-hidden="true" ></i></li>
    <li class="item"  >按热度查看</li>
</ul>

CSS设计

/*过滤器*/
.lf-fiters{padding: 5px 0;}
.lf-fiters .item{
    color: #666;
    padding: 15px 10px;
    border-bottom: 1px solid #ddd;
}
.lf-fiters .item .fa{
    float:right;
    margin-top:2px;
}
.lf-fiters .item:last-child{
    border-bottom: none;
    margin-bottom:20px;
}

4、列表项(lf-live-list

Html设计

<div class="lf-live-list ng-hide" ng-repeat="item in livelist" ng-show="true">
    <img class="cover"src="http://image.learnfuture.com/3FAA9DF769A2.jpg" >
    <h2 class="title">一个馒头引发的血案</h2>
    <p class="user">罗永浩</p>
    <p class="info">
        <span class="item"><i class="fa fa-users" aria-hidden="true"></i>30</span>
    </p>
    <strong class="price">30</strong>
    <p class="info" style="margin-left: 0px;margin-top: 20px;font-size: 14px;">
        <span class="item" style="color:#53bd4e;"><i class="fa fa-play" aria-hidden="true"></i>直播正在进行中...</span>
    </p>
</div>
<div class="lf-live-list">
    <p class="no-more">
        已加载全部
    </p>
</div>

CSS设计

/*直播列表项*/
.lf-live-list {
    padding-bottom: 4px;
    border-bottom: 1px solid #ddd;
    margin-top: 10px;}
.lf-live-list:nth-last-child(1),.lf-live-list:nth-last-child(2),.lf-live-list:nth-last-child(3){
    margin-bottom: 25px;
}
.lf-live-list .cover{
    width: 88px;
    height: 63px;
    position: absolute;
    border: 1px solid #ddd;
    border-radius: 10px;}
.lf-live-list .title{
    font-size: 16px;
    color: #333 !important;
}
.lf-live-list .title,.lf-live-list .user,.lf-live-list .info{
    margin-left: 100px;
    margin-bottom: 4px;
    color: #666;
}
.lf-live-list .user{font-size: 12px;}
.lf-live-list .price{
    position: absolute;
    right: 10px;
    padding: 3px 10px;
    border-radius: 8px;
    margin-top: -30px;
    color: #c2181f;
}
.lf-live-list .play{
    position: absolute;
    right: 10px;
    padding: 3px 10px;
    border-radius: 8px;
    margin-top: -40px;
    color: #009688;
    font-size: 25px;
}
.lf-live-list .info{
    font-size: 12px;
}
.lf-live-list .info .item{}
.lf-live-list .info .item .fa{
    margin-right: 5px;}
.lf-live-list .no-more{
    text-align: center;
    color: #888;
    padding: 10px 20px 20px 20px;}
.lf-live-list .next{}
.lf-live-list .next button{width:100%;}

三、CSSHtml维护

通过代码编辑器的查找功能对组件进行样式的维护,以Webstorm编辑器为例,删除组件lf-live-list

1、 查找名为“lf-live-list”的组件,删除所有class为“lf-live-list”的元素以及其包含的所有子元素;

2、删除所有名为“.lf-live-listcss样式

【小结】

通过一个数据列表的简单例子,介绍了组件化样式的样式设计、编码、维护方法,目前这种设计思路的应用还在初步的探索阶段,因此文中提及的思路和方法并不一定完全正确,或者适合各个项目,请大家酌情参考。

前端开发
最近热帖
{{item.Title}} {{item.ViewCount}}
近期热议
{{item.Title}} {{item.PostCount}}