面板
文章转载,请注明出处 H-ui前端框架,网址http://www.h-ui.net/
默认面板效果,内容放到hui-panel-body
默认面板
带标题的面板
面板标题
面板内容
其他颜色面板
面板标题
面板内容
面板标题
面板内容
面板标题
面板内容
面板标题
面板内容
面板标题
面板内容
默认面板之间是紧挨在一起,没有间距的,如果需要设置间距,请在 class="hui-panel 后面追加间距样式,如:mt-20,效果如同上面的例子。
举个栗子: <div class="hui-panel hui-panel-danger mt-20">
HTML
SCSS
CSS
<div class="hui-panel hui-panel-default"> <div class="hui-panel-body">默认面板</div> </div> <h2>带标题的面板</h2> <div class="hui-panel hui-panel-default"> <div class="hui-panel-header">面板标题</div> <div class="hui-panel-body">面板内容</div> </div> <h2>其他颜色面板</h2> <div class="hui-panel hui-panel-primary"> <div class="hui-panel-header">面板标题</div> <div class="hui-panel-body">面板内容</div> </div> <div class="hui-panel hui-panel-secondary mt-20"> <div class="hui-panel-header">面板标题</div> <div class="hui-panel-body">面板内容</div> </div> <div class="hui-panel hui-panel-success mt-20"> <div class="hui-panel-header">面板标题</div> <div class="hui-panel-body">面板内容</div> </div> <div class="hui-panel hui-panel-warning mt-20"> <div class="hui-panel-header">面板标题</div> <div class="hui-panel-body">面板内容</div> </div> <div class="hui-panel hui-panel-danger mt-20"> <div class="hui-panel-header">面板标题</div> <div class="hui-panel-body">面板内容</div> </div>
.hui-panel { background-color: #fff; border: solid 1px transparent; .hui-panel-header { border-bottom: solid 1px transparent; padding: 8px 15px; font-size: 14px; font-weight: 700; margin-bottom: -1px; } .hui-panel-body { padding: 15px; } .hui-panel-footer { background-color: #f5f5f5; border-top: 1px solid #ddd; padding: 5px 20px; } /*默认面板*/ &.hui-panel-default { border-color: #ddd; >.hui-panel-header { border-color: #ddd; background-color: #f5f5f5; color: #444; } } /*主要面板*/ &.hui-panel-primary { border-color: #5a98de; >.hui-panel-header { border-color: #5a98de; background-color: #5a98de; color: #fff; } } /*次要面板*/ &.hui-panel-secondary { border-color: #3bb4f2; >.hui-panel-header { border-color: #3bb4f2; background-color: #3bb4f2; color: #fff; } } /*成功面板*/ &.hui-panel-success { border-color: #5eb95e; >.hui-panel-header { border-color: #5eb95e; background-color: #5eb95e; color: #fff; } } /*警告面板*/ &.hui-panel-warning { border-color: #f37b1d; >.hui-panel-header { border-color: #f37b1d; background-color: #f37b1d; color: #fff; } } /*危险面板*/ &.hui-panel-danger { border-color: #dd514c; >.hui-panel-header { border-color: #dd514c; background-color: #dd514c; color: #fff; } } }
.hui-panel { background-color: #fff; border: solid 1px transparent; } .hui-panel .hui-panel-header { border-bottom: solid 1px transparent; padding: 8px 15px; font-size: 14px; font-weight: 700; margin-bottom: -1px; } .hui-panel .hui-panel-body { padding: 15px; } .hui-panel .hui-panel-footer { background-color: #f5f5f5; border-top: 1px solid #ddd; padding: 5px 20px; } .hui-panel.hui-panel-default { border-color: #ddd; } .hui-panel.hui-panel-default > .hui-panel-header { border-color: #ddd; background-color: #f5f5f5; color: #444; } .hui-panel.hui-panel-primary { border-color: #5a98de; } .hui-panel.hui-panel-primary > .hui-panel-header { border-color: #5a98de; background-color: #5a98de; color: #fff; } .hui-panel.hui-panel-secondary { border-color: #3bb4f2; } .hui-panel.hui-panel-secondary > .hui-panel-header { border-color: #3bb4f2; background-color: #3bb4f2; color: #fff; } .hui-panel.hui-panel-success { border-color: #5eb95e; } .hui-panel.hui-panel-success > .hui-panel-header { border-color: #5eb95e; background-color: #5eb95e; color: #fff; } .hui-panel.hui-panel-warning { border-color: #f37b1d; } .hui-panel.hui-panel-warning > .hui-panel-header { border-color: #f37b1d; background-color: #f37b1d; color: #fff; } .hui-panel.hui-panel-danger { border-color: #dd514c; } .hui-panel.hui-panel-danger > .hui-panel-header { border-color: #dd514c; background-color: #dd514c; color: #fff; }