wiki:plugin:bootswrapper:panel

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
wiki:plugin:bootswrapper:panel [2015/07/12 22:46] Giuseppe Di Terlizziwiki:plugin:bootswrapper:panel [2016/08/21 01:52] (current) Giuseppe Di Terlizzi
Line 1: Line 1:
 ====== Panels ====== ====== Panels ======
  
-{{page>:wiki:plugin:bootswrapper&inline&nofooter&noheader}}+===== Basic example =====
  
-<code html><panel type="default" title="Title of Panel" subtitle="Subtitleicon="glyphicon glyphicon-home">+<panel type="default">Basic panel example</panel> 
 +\\ 
 +<code html5><panel type="default">Basic panel example</panel></code> 
 + 
 +===== Panel with heading ===== 
 + 
 +<panel type="default" title="Panel title"
 +Panel content 
 +</panel> 
 +\\ 
 +<code html5><panel type="defaulttitle="Panel title">
 Panel content Panel content
 </panel></code> </panel></code>
  
-<panel type="default" title="Title of Panel" subtitle="Subtitle" icon="glyphicon glyphicon-home">+===== Panel with subtitle ===== 
 + 
 +<panel type="default" title="Panel title" subtitle="Panel subtitle">
 Panel content Panel content
 </panel> </panel>
 +\\
 +<code html5><panel type="default" title="Panel title" subtitle="Panel subtitle">
 +Panel content
 +</panel></code>
 +
 +===== Contextual alternatives =====
 +
 +Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.
 +
 +<panel type="primary" title="Panel title">Panel content</panel>
 +<panel type="success" title="Panel title">Panel content</panel>
 +<panel type="info" title="Panel title">Panel content</panel>
 +<panel type="warning" title="Panel title">Panel content</panel>
 +<panel type="danger" title="Panel title">Panel content</panel>
 +\\
 +<code html5>
 +<panel type="primary" title="Panel title">Panel content</panel>
 +<panel type="success" title="Panel title">Panel content</panel>
 +<panel type="info" title="Panel title">Panel content</panel>
 +<panel type="warning" title="Panel title">Panel content</panel>
 +<panel type="danger" title="Panel title">Panel content</panel>
 +</code>
 +
 +===== With tables =====
 +
 +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>
 +\\
 +<code html5><panel type="default" title="Panel title" subtitle="Panel subtitle" icon="glyphicon glyphicon-home">
 +Panel content
 +</panel></code>
 +
  
 ==== Attributes ==== ==== Attributes ====
Line 18: Line 130:
 | ''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) |
 +| ''no-body''  | optional | | Don't add a panel body. Useful to add other particular tags (or tables) inside a panels |
  
  • wiki/plugin/bootswrapper/panel.1436734002.txt.gz
  • Last modified: 9 years ago
  • by Giuseppe Di Terlizzi