Banner

See: https://material.io/components/banners

A banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.

Banners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.

class materialweb.tags.banner.Banner(*args, **kwargs)

Provides template tag: Banner.

Example usage:

{% load materialweb %}

{% Banner %}
  {% Banner_Content %}
    {% Banner_Text %}
      {% trans "There was a problem processing a transaction on your credit card." %}
    {% endBanner_Text %}
  {% endBanner_Content %}
  {% Banner_Actions %}
    {% Button type="button" class="mdc-banner__primary-action" %}
      {% Button_Label %}
        {% trans "Fix it" %}
      {% endButton_Label %}
    {% endButton %}
  {% endBanner_Actions %}
{% endBanner %}

Example output:

<div class="mdc-banner" role="banner">
  <div class="mdc-banner__content" role="status" aria-live="assertive">
    <div class="mdc-banner__graphic-text-wrapper">
      <div class="mdc-banner__text">
        There was a problem processing a transaction on your credit card.
      </div>
    </div>
    <div class="mdc-banner__actions">
      <button type="button" class="mdc-button mdc-banner__primary-action">
        <span class="mdc-button__ripple"></span>
        <span class="mdc-button__label">Fix it</span>
      </button>
    </div>
  </div>
</div>

WANT_CHILDREN = True

Template Tag needs closing end tag.

MODES = ('default', 'stacked')

Available variants.

class materialweb.tags.banner.Content(*args, **kwargs)

Provides template tag: Banner_Content.

Example usage:

{% load materialweb %}

{% Banner_Content %}
  {% Banner_Icon class="material-icons" %}
    error_outline
  {% endBanner_Icon %}
  {% Banner_Text %}
    {% trans "There was a problem processing a transaction on your credit card." %}
  {% endBanner_Text %}
{% endBanner_Content %}

Example output:

<div class="mdc-banner__graphic-text-wrapper">
  <div class="mdc-banner__graphic" role="img" alt="">
    <i class="material-icons mdc-banner__icon">error_outline</i>
  </div>
  <div class="mdc-banner__text">
    There was a problem processing a transaction on your credit card.
  </div>
</div>

WANT_CHILDREN = True

Template Tag needs closing end tag.

class materialweb.tags.banner.Icon(*args, **kwargs)

Provides template tag: Banner_Icon.

Example usage:

{% load materialweb %}

{% trans "Back" as label %}
{% Banner_Icon label=label class="material-icons" %}
  arrow_back
{% endBanner_Icon %}

Example output:

<div class="mdc-banner__graphic" role="img" alt="Back" title="Back">
  <span class="mdc-banner__icon material-icons">
    arrow_back
  </span>
</div>

WANT_CHILDREN = True

Template Tag needs closing end tag.

class materialweb.tags.banner.Text(*args, **kwargs)

Provides template tag: Banner_Text.

Example usage:

{% load materialweb %}

{% Banner_Text %}
  {% trans "Message that needs immediate action." %}
{% endBanner_Text %}

Example output:

<div class="mdc-banner__text">
  Message that needs immediate action.
</div>

WANT_CHILDREN = True

Template Tag needs closing end tag.

class materialweb.tags.banner.Actions(*args, **kwargs)

Provides template tag: Banner_Actions.

Example usage:

{% load materialweb %}

{% Banner_Actions %}
  {% Button type="button" id="btnFixIt" class="mdc-banner__primary-action" %}
    {% Button_Label %}
      {% trans "Fix it" %}
    {% endButton_Label %}
  {% endButton %}
{% endBanner_Actions %}

Example output:

<div class="mdc-banner__actions">
  <button type="button" class="mdc-button mdc-banner__primary-action">
    <span class="mdc-button__ripple"></span>
    <span class="mdc-button__label">Fix it</span>
  </button>
</div>

WANT_CHILDREN = True

Template Tag needs closing end tag.