{% extends 'opal.html' %} {% load forms %} {% load panels %} {% load staticfiles %} {% block content %}

OPAL Design Patterns

Living documentation of the available design patterns for OPAL applications

Presentation

Interaction

Forms

Presentation

Panels {% icon 'fa-paragraph' %}

A way of presenting discrete units of information.

Panel Primary

The Heading

The Body

Panel Default

The Heading

The Body

Panel Active

The Heading

The Body


Aligned Pairs {% icon 'fa-paragraph' %}

Use on occasions when we want to display information in key - value pairs to users but that data is not tabular.

{% aligned_pair model="43" label="First Data Point" %} {% aligned_pair model="22" label="Next Data Point" %}

Usage:


{% templatetag openblock %} load panels {% templatetag closeblock %}
{% templatetag openblock %} aligned_pair model="43" label="First Data Point" {% templatetag closeblock %}
{% templatetag openblock %} aligned_pair model="22" label="Next Data Point" {% templatetag closeblock %}
          

Interaction


Modals {% icon 'fa-paragraph' %}

Present the user with an atomic interaction. Modals are based on the Angular UI-Bootstrap Modal.

Modals are available in three sizes - default, large and small.

Forms

Buttons {% icon 'fa-paragraph' %}

Buttons lead with icons chosen from Font Awesome.


Checkboxes {% icon 'fa-paragraph' %}

Fields which have a boolean state

{% checkbox label="Make it so" model="dummy_model" %}

Checkbox Lists {% icon 'fa-paragraph' %}

List of items which each have a boolean state.

When used in a form, should be aligned with the form inputs (typically offset-md-3).

Name of Group


Radio Buttons {% icon 'fa-paragraph' %}

List of mutually exclusive items

When used in a form, should be aligned with the form inputs (typically offset-md-3).

Name of Group


{% endblock %}