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
Last revisionBoth sides next revision
wiki:plugin:bootswrapper:panel [2015/07/12 22:56] Giuseppe Di Terlizziwiki:plugin:bootswrapper:panel [2016/08/21 01:47] Giuseppe Di Terlizzi
Line 1: Line 1:
 ====== Panels ====== ====== Panels ======
  
-{{page>:wiki:plugin:bootswrapper:menu&inline&nofooter}}+===== 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 with subtitle =====
 +
 +<panel type="default" title="Panel title" subtitle="Panel subtitle">
 +Panel content
 +</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>
 +
 +===== Panel with icons =====
  
 <panel type="default" title="Title of Panel" subtitle="Subtitle" icon="glyphicon glyphicon-home"> <panel type="default" title="Title of Panel" subtitle="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">
 +Panel content
 +</panel></code>
 +
  
 ==== Attributes ==== ==== Attributes ====
Line 18: Line 103:
 | ''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.txt
  • Last modified: 8 years ago
  • (external edit)