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

OPAL Design Patterns


Living documentation of the available design patterns for OPAL applications

Presentation

Interaction

Forms

Presentation


{% include "patterns/panels.html" %}

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.

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" %}

{% endblock %}