Panel¶
Processor name: panel
You can include an panel using the following text tag:
{panel type="teacher-note" subtitle="true"}
# Teacher Note
## Curriculum guides for Algorithms
This text is the panel's contents.
{panel end}
The title and subtitle are the first Level 1 and Level 2 Headings within the panel. They are within the panel rather than given as parameters to allow translation systems to easily identify which text should be translated.
Required Tag Parameters¶
type
- The type of panel to create.- The type is saved as a CCS class (with
panel-
prefix) in the panel (this allows colouring of all the same types of panels).
- The type is saved as a CCS class (with
Optional Tag Parameters¶
subtitle
- Boolean flag to indicate whether the panel should display a subtitle.- If given as
true
, then the subtitle is the first Level 2 Heading within the panel.
- If given as
expanded
- A value to state the panel’s state:- If given as ‘true’, the panel contains the CSS class
panel-expanded
to state it should be expanded on load. - If set to ‘always’, the panel contains the CSS class
panel-expanded-always
to state it should be expanded at load and cannot be closed. - When
expanded
is not given or not a value above, the panel contains no extra CSS classes and be closed on load.
- If given as ‘true’, the panel contains the CSS class
The default HTML for a panel is:
<div class='panel panel-{{ type }}{% if expanded == 'always'%} panel-expanded-always{% elif expanded == 'true' %} panel-expanded{% endif %}'>
<div class='panel-header'>
<strong>{{ title }}{% if subtitle %}:</strong> {{ subtitle }}{% else %}</strong>{% endif %}
</div>
<div class='panel-body'>
{% autoescape false -%}
{{ content }}
{% endautoescape -%}
</div>
</div>
Using the following example tag:
{panel type="teacher-note" subtitle="true"}
# Teacher Note
## Curriculum guides for Algorithms
This text is the panel's contents.
{panel end}
The resulting HTML would be:
<div class="panel panel-teacher-note">
<div class="panel-header">
<strong>Teacher Note:</strong> Curriculum guides for Algorithms
</div>
<div class="panel-body">
<p>This text is the panel's contents.</p>
</div>
</div>
Overriding HTML for Panels¶
When overriding the HTML for panels, the following Jinja2 placeholders are available:
{{ type }}
- The type of panel to be created.{{ expanded }}
- Text either set to ‘true’ or ‘always’ to state if the panel should be expanded. See parameter description above.{{ title }}
- The provided title text.{{ subtitle }}
- The provided subtitle text.{{ content }}
- The text enclosed by the panel tags.
Example
For example, providing the following HTML:
<div class="card">
<div class="card-header">
<h5 class="mb-0">
<strong>{{ title }}{% if subtitle %}:</strong> {{ subtitle }}{% else %}</strong>{% endif %}
</h5>
</div>
<div class="collapse{% if expanded == 'always'%} show-always{% elif expanded == 'true' %} show{% endif %}">
<div class="card-block">
{{ content }}
</div>
</div>
</div>
with the following tag:
{panel type="note" expanded="true"}
# Note
This panel uses Bootstrap 4 card structure.
{panel end}
would result in:
<div class="card">
<div class="card-header">
<h5 class="mb-0">
<strong>Note</strong>
</h5>
</div>
<div class="collapse show">
<div class="card-block">
<p>This panel uses Bootstrap 4 card structure.</p>
</div>
</div>
</div>