Template:Panel

From ATLauncher Wiki
Jump to: navigation, search

Description[edit]

Used to contain some content in a nicely-organised way. Panels provide a means to box some content up, and make it a little more prominent.

Examples[edit]

Panel with just some content[edit]

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CODE

{{Panel
  | content = {{Lorem}}
}}


Panel with custom width[edit]

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CODE

{{Panel
  | width = 25% (or any pixel value, e.g. 400px)
  | content = {{Lorem}}
}}


Panel with heading[edit]

Sup, I have a heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CODE

{{Panel
  | heading = Sup, I have a heading
  | content = {{Lorem}}
}}

By default, panel headings aren't rendered as proper H3 tags, and are therefore excluded from the page's table of contents generation.

To revert this behaviour, simply add |useFullHeading = true.

Panel with footer[edit]

Sup, I have a heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CODE

{{Panel
  | heading = Sup, I have a heading
  | content = {{Lorem}}
  | footer = Check it out, I have a footer as well
}}


Panel with a table[edit]

Panels with tables
Table HeadingTable HeadingTable HeadingTable Heading
Supply a tableinstead of contentand the table willlead on seamlessly
Which is prettydamn cool.

CODE

{{Panel
  | heading = Panels with tables
  | table = 
    <div class="table-responsive">
      <table class="table table-striped table-bordered">
        <tr>
          <th>Table Heading</th><th>Table Heading</th><th>Table Heading</th><th>Table Heading</th>
        </tr>
        <tr>
          <td>Supply a table</td><td>instead of content</td><td>and the table will</td><td>lead on seamlessly</td>
        </tr>
        <tr>
          <td colspan="2">Which is pretty</td><td colspan="2">damn cool.</td>
        </tr>
      </table>
    </div>
}}


Panel with content and table[edit]

Panels with content and a table

If you supply content as well as a table, the table's appearance will lead on from the content to appear set-in.

Table HeadingTable HeadingTable HeadingTable Heading
Table DataTable DataTable DataTable Data
Table DataTable DataTable DataTable Data
Table DataTable DataTable DataTable Data

CODE

{{Panel
  | heading = Panels with content and a table
  | content = If you supply content '''''as well''''' as a table, the table's appearance will lead on from the content to appear set-in.
  | table =
    <div class="table-responsive">
      <table class="table table-striped">
        <tr><th>Table Heading</th><th>Table Heading</th><th>Table Heading</th><th>Table Heading</th></tr>
        <tr><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>
        <tr><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>
        <tr><td>Table Data</td><td>Table Data</td><td>Table Data</td><td>Table Data</td></tr>
      </table>
    </div>
}}


Panels with list-groups[edit]

Panels with list-groups

Panels can have list-groups attached. See Responsive_Components#List_group for more details on how to format these.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

CODE

{{Panel
  | heading = Panels with list-groups
  | content = Panels can have list-groups attached. See [[Bootstrap_Documentation/Responsive_Components#List_group|Responsive_Components#List_group]] for more details on how to format these.
  | list-group =
    <ul class="list-group">
      <li class="list-group-item">Cras justo odio</li>
      <li class="list-group-item">Dapibus ac facilisis in</li>
      <li class="list-group-item">Morbi leo risus</li>
      <li class="list-group-item">Porta ac consectetur ac</li>
      <li class="list-group-item">Vestibulum at eros</li>
    </ul>
}}


Contextual alternatives[edit]

Supply a type - one of either primary, success, info, warning, or danger - and you can change the general appearance of the panel depending on the context. If not supplied, will default to the 'default' type.

Panel Default[edit]

Heading
Grid Tool Station.png

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CODE

{{Panel
  | heading = Heading
  | content =   
[[File:Grid Tool Station.png|thumb|right]]
{{Lorem}}
  | footer = Footer
}}

Panel primary[edit]

Heading
Grid Tool Station.png

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CODE

{{Panel
  | type = primary
  | heading = Heading
  | content =   
[[File:Grid Tool Station.png|thumb|right]]
{{Lorem}}
  | footer = Footer
}}

Panel success[edit]

Heading
Grid Tool Station.png

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CODE

{{Panel
  | type = success
  | heading = Heading
  | content =   
[[File:Grid Tool Station.png|thumb|right]]
{{Lorem}}
  | footer = Footer
}}

Panel info[edit]

Heading
Grid Tool Station.png

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CODE

{{Panel
  | type = info
  | heading = Heading
  | content =   
[[File:Grid Tool Station.png|thumb|right]]
{{Lorem}}
  | footer = Footer
}}

Panel warning[edit]

Heading
Grid Tool Station.png

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CODE

{{Panel
  | type = warning
  | heading = Heading
  | content =   
[[File:Grid Tool Station.png|thumb|right]]
{{Lorem}}
  | footer = Footer
}}

Panel danger[edit]

Heading
Grid Tool Station.png

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CODE

{{Panel
  | type = danger
  | heading = Heading
  | content =   
[[File:Grid Tool Station.png|thumb|right]]
{{Lorem}}
  | footer = Footer
}}