Both sides previous revision Previous revision Next revision | Previous revision |
wiki:plugin:bootswrapper:panel [2016/08/21 01:37] – Giuseppe Di Terlizzi | wiki:plugin:bootswrapper:panel [2016/08/21 01:52] (current) – Giuseppe Di Terlizzi |
---|
</code> | </code> |
| |
===== Panel with icons ===== | ===== With tables ===== |
| |
<panel type="default" title="Title of Panel" subtitle="Subtitle" icon="glyphicon glyphicon-home"> | Add any non-bordered table within a panel for a seamless design. If there is a ''no-body'' attribute, we add an extra border to the top of the table for separation. |
| |
| <panel type="default" title="Panel title" no-body="true"> |
| <panel-body>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</panel-body> |
| ^ # ^ First Name ^ Last Name ^ Username ^ |
| ^ 1 | Mark | Otto | @mdo | |
| ^ 2 | Jacob | Thornton | @fat | |
| ^ 3 | Larry | the Bird | @twitter | |
| </panel> |
| |
| \\ |
| |
| <code html5><panel type="default" title="Panel title" no-body="true"> |
| <panel-body>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</panel-body> |
| ^ # ^ First Name ^ Last Name ^ Username ^ |
| ^ 1 | Mark | Otto | @mdo | |
| ^ 2 | Jacob | Thornton | @fat | |
| ^ 3 | Larry | the Bird | @twitter | |
| </panel></code> |
| |
| If there is no panel body, the component moves from panel header to table without interruption. |
| |
| <panel type="default" title="Panel title" no-body="true"> |
| ^ # ^ First Name ^ Last Name ^ Username ^ |
| ^ 1 | Mark | Otto | @mdo | |
| ^ 2 | Jacob | Thornton | @fat | |
| ^ 3 | Larry | the Bird | @twitter | |
| </panel> |
| |
| \\ |
| |
| <code html5><panel type="default" title="Panel title" no-body="true"> |
| ^ # ^ First Name ^ Last Name ^ Username ^ |
| ^ 1 | Mark | Otto | @mdo | |
| ^ 2 | Jacob | Thornton | @fat | |
| ^ 3 | Larry | the Bird | @twitter | |
| </panel></code> |
| |
| ===== With list groups ===== |
| |
| Easily include full-width [[list-group|list groups]] within any panel. |
| |
| <panel type="default" title="Panel title" no-body="true"> |
| <panel-body>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</panel-body> |
| <list-group> |
| * Cras justo odio |
| * Dapibus ac facilisis in |
| * Morbi leo risus |
| * Porta ac consectetur ac |
| * Vestibulum at eros |
| </list-group></panel> |
| |
| \\ |
| |
| <code html5><panel type="default" title="Panel title" no-body="true"> |
| <panel-body>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</panel-body> |
| <list-group> |
| * Cras justo odio |
| * Dapibus ac facilisis in |
| * Morbi leo risus |
| * Porta ac consectetur ac |
| * Vestibulum at eros |
| </list-group></panel></code> |
| |
| |
| ===== With icons ===== |
| |
| <panel type="default" title="Panel title" subtitle="Panel subtitle" icon="glyphicon glyphicon-home"> |
Panel content | Panel content |
</panel> | </panel> |
\\ | \\ |
<code html5><panel type="default" title="Title of Panel" subtitle="Subtitle" icon="glyphicon glyphicon-home"> | <code html5><panel type="default" title="Panel title" subtitle="Panel subtitle" icon="glyphicon glyphicon-home"> |
Panel content | Panel content |
</panel></code> | </panel></code> |
| ''subtitle'' | optional | | Subtitle of panel | | | ''subtitle'' | optional | | Subtitle of panel | |
| ''icon'' | optional | | Font icon class (eg. Glyphicon or Font-Awesome) | | | ''icon'' | optional | | Font icon class (eg. Glyphicon or Font-Awesome) | |
| ''nobody'' | optional | | Don't add a panel body. Useful to add other particular tags (or tables) inside a panels | | | ''no-body'' | optional | | Don't add a panel body. Useful to add other particular tags (or tables) inside a panels | |
| |