Button¶

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

Buttons allow users to take actions, and make choices, with a single tap.

class materialweb.tags.button.Button(*args, **kwargs)¶

Provides template tag: Button.

Example usage:

{% load materialweb %}

{% Button mode="raised" type="submit" %}
  {% Button_Label %}
    {% trans "Submit" %}
  {% endButton_Label %}
{% endButton %}

{% url 'login' as url %}
{% Button mode="outlined" tag="a" href=url %}
  {% Button_Label %}
    {% trans "Log In" %}
  {% endButton_Label %}
{% endButton %}

Example output:

<div class="mdc-touch-target-wrapper">
  <button type="submit" class="mdc-button mdc-button--raised">
    <span class="mdc-button__ripple"></span>
    <span class="mdc-button__label">Submit</span>
  </button>
</div>

<div class="mdc-touch-target-wrapper">
  <a href="/login" class="mdc-button mdc-button--outlined">
    <span class="mdc-button__ripple"></span>
    <span class="mdc-button__label">Log In</span>
  </a>
</div>

WANT_CHILDREN = True¶: Template Tag needs closing end tag.

MODES = ('outlined', 'raised')¶: Available variants.

DEFAULT_TAG = 'button'¶: Rendered HTML tag.

class materialweb.tags.button.Label(*args, **kwargs)¶

Provides template tag: Banner_Label.

Example usage:

{% load materialweb %}

{% Button_Label id="mylabel" %}
  {% trans "My Accessible Button" %}
{% endButton_Label %}

Example output:

<span id="mylabel" class="mdc-button__label">My Accessible Button</span>

WANT_CHILDREN = True¶: Template Tag needs closing end tag.

DEFAULT_TAG = 'span'¶: Rendered HTML tag.

class materialweb.tags.button.Icon(*args, **kwargs)¶

Provides template tag: Button_Icon.

Example usage:

{% load materialweb %}

{% Button_Icon %}
  <i class="fa fa-circle"></i>
{% endButton_Icon %}

Example output:

<span aria-hidden="true" class="mdc-button__icon">
  <i class="fa fa-circle"></i>
</span>

WANT_CHILDREN = True¶: Template Tag needs closing end tag.

DEFAULT_TAG = 'span'¶: Rendered HTML tag.

class materialweb.tags.button.IconButton(*args, **kwargs)¶

Provides template tag: IconButton.

See: https://material.io/develop/web/components/buttons/icon-buttons

Example usage:

{% load materialweb %}

{% trans "Save" as label %}
{% IconButton label=label type="button" class="material-icons" %}
  save
{% endIconButton %}

<button aria-label="Save" title="Save" type="button"
    class="mdc-icon-button material-icons">
  save
</button>

WANT_CHILDREN = True¶: Template Tag needs closing end tag.

DEFAULT_TAG = 'button'¶: Rendered HTML tag.

class materialweb.tags.button.ToggleButton(*args, **kwargs)¶

Provides template tag: ToggleButton.

See: https://material.io/develop/web/components/buttons/icon-buttons

Example usage:

{% load materialweb %}

{% trans "Add to favorites" as label %}
{% ToggleButton state=False icon_when_on="favorite" icon_when_off="favorite_border" label=label id="add-to-favorites" %}

Example output:

<button id="add-to-favorites" class="mdc-icon-button"
    aria-label="Add to favorites" aria-pressed="false">
  <i class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">
    favorite
  </i>
  <i class="material-icons mdc-icon-button__icon">
    favorite_border
  </i>
</button>

NODE_PROPS = ('type', 'state', 'icon_when_on', 'icon_when_off')¶: Extended Template Tag arguments.