在微信上关注我们
Usually, panel is used to arrange content with title.
The default .am-panel has basic shadow, padding and margin. Add .am-panel-default to have default border. The content should be placed in .am-panel-bd.
<div class="am-panel am-panel-default">
<div class="am-panel-bd">This is a basic panel.</div>
</div>Title can be put in .am-panel-hd, but we suggest to use h1 - h6 and add the .am-panel-title class.
<div class="am-panel am-panel-default">
<div class="am-panel-hd">Title</div>
<div class="am-panel-bd">
Content
</div>
</div>
<section class="am-panel am-panel-default">
<header class="am-panel-hd">
<h3 class="am-panel-title">Title</h3>
</header>
<div class="am-panel-bd">
Content
</div>
</section>Use following classes to set color of panel.
.am-panel-primary.am-panel-secondary.am-panel-success.am-panel-warning.am-panel-danger<div class="am-panel am-panel-primary">...</div>
<div class="am-panel am-panel-secondary">...</div>
<div class="am-panel am-panel-success">...</div>
<div class="am-panel am-panel-warning">...</div>
<div class="am-panel am-panel-danger">...</div>Use footer .am-panel-footer for secondary information. Footer won't inherite styles from .am-panel-primary - .am-panel-danger.
<section class="am-panel am-panel-default">
<main class="am-panel-bd">
Title
</main>
<footer class="am-panel-footer">Footer</footer>
</section>Use .am-table in .am-panel. (Not in .am-panel-bd)
| Name | URL | Created Date |
|---|---|---|
| Amaze UI | amazeui.org | 2014-01-01 |
| Amaze UI | amazeui.org | 2014-01-01 |
| Amaze UI | amazeui.org | 2014-01-01 |
<div class="am-panel am-panel-default">
<div class="am-panel-hd">
<h3 class="am-panel-title">Title</h3>
</div>
<div class="am-panel-bd">
Other contents.
</div>
<table class="am-table">
...
</table>
<div class="am-panel-footer">...</div>
</div><div class="am-panel am-panel-default">
<div class="am-panel-hd">
<h3 class="am-panel-title">Title</h3>
</div>
<div class="am-panel-bd">
Other contents
</div>
<ul class="am-list am-list-static">
<li>...</li>
</ul>
<div class="am-panel-footer">...</div>
</div>Use panel in .am-panel-group.