面板

文章转载，请注明出处 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;
}