List

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

Lists are continuous, vertical indexes of text or images.

class materialweb.tags.lists.List(*args, **kwargs)

Provides template tag: List.

Example usage:

{% load materialweb %}

{% List %}
  {% List_Item tabindex="0" %}
    {% List_Content %}
      {% trans "Single-line item" %}
    {% endList_Content %}
  {% endList_Item %}

  {% List_Item %}
    {% List_Content %}
      {% trans "Single-line item" %}
    {% endList_Content %}
  {% endList_Item %}
{% endList %}

Example output:

<ul class="mdc-list">
  <li class="mdc-list-item" tabindex="0">
    <span class="mdc-list-item__ripple"></span>
    <span class="mdc-list-item__text">Single-line item</span>
  </li>
  <li class="mdc-list-item">
    <span class="mdc-list-item__ripple"></span>
    <span class="mdc-list-item__text">Single-line item</span>
  </li>
</ul>

WANT_CHILDREN = True

Template Tag needs closing end tag.

MODES = ('one_line', 'two_line')

Available variants.

DEFAULT_TAG = 'ul'

Rendered HTML tag.

class materialweb.tags.lists.Item(*args, **kwargs)

Provides template tag: List_Item.

Example usage:

{% load materialweb %}

{% List mode="two_line" %}
  {% List_Item tabindex="0" %}
    {% List_Content %}
      {% List_LinePrimary %}
        {% trans "Two-line item" %}
      {% endList_LinePrimary %}

      {% List_LineSecondary %}
        {% trans "Secondary text" %}
      {% endList_LineSecondary %}
    {% endList_Content %}
  {% endList_Item %}

  {% List_Item %}
    {% List_Content %}
      {% List_LinePrimary %}
        {% trans "Two-line item" %}
      {% endList_LinePrimary %}

      {% List_LineSecondary %}
        {% trans "Secondary text" %}
      {% endList_LineSecondary %}
    {% endList_Content %}
  {% endList_Item %}
{% endList %}

Example output:

<ul class="mdc-list mdc-list--two-line">
  <li class="mdc-list-item" tabindex="0">
    <span class="mdc-list-item__ripple"></span>
    <span class="mdc-list-item__text">
      <span class="mdc-list-item__primary-text">Two-line item</span>
      <span class="mdc-list-item__secondary-text">Secondary text</span>
    </span>
  </li>
  <li class="mdc-list-item">
    <span class="mdc-list-item__ripple"></span>
    <span class="mdc-list-item__text">
      <span class="mdc-list-item__primary-text">Two-line item</span>
      <span class="mdc-list-item__secondary-text">Secondary text</span>
    </span>
  </li>
</ul>

WANT_CHILDREN = True

Template Tag needs closing end tag.

NODE_PROPS = ('activated',)

Extended Template Tag arguments.

DEFAULT_TAG = 'li'

Rendered HTML tag.

template_default()

Get formatted literal string for default ListItem.

class materialweb.tags.lists.Image(*args, **kwargs)

Provides template tag: List_Image.

Example usage:

{% load materialweb %}

{% List_Image class="material-icons" %}
  more_horz
{% endList_Image %}

Example output:

<span aria-hidden="true" class="mdc-list-item__graphic material-icons">
  more_horz
</span>

WANT_CHILDREN = True

Template Tag needs closing end tag.

DEFAULT_TAG = 'span'

Rendered HTML tag.

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

Provides template tag: List_Text.

Example usage:

{% load materialweb %}

{% List_Text %}
  {% trans "line item" %}
{% endList_Text %}

Example output:

<span class="mdc-list-item__text">line item</span>

WANT_CHILDREN = True

Template Tag needs closing end tag.

DEFAULT_TAG = 'span'

Rendered HTML tag.

class materialweb.tags.lists.LinePrimary(*args, **kwargs)

Provides template tag: List_LinePrimary.

Example usage:

{% load materialweb %}

{% List_LinePrimary %}
  {% trans "Two-line item" %}
{% endList_LinePrimary %}

Example output:

<span class="mdc-list-item__primary-text">Two-line item</span>

WANT_CHILDREN = True

Template Tag needs closing end tag.

DEFAULT_TAG = 'span'

Rendered HTML tag.

class materialweb.tags.lists.LineSecondary(*args, **kwargs)

Provides template tag: List_LineSecondary.

Example usage:

{% load materialweb %}

{% List_LineSecondary %}
  {% trans "Secondary text" %}
{% endList_LineSecondary %}

Example output:

<span class="mdc-list-item__secondary-text">Secondary text</span>

WANT_CHILDREN = True

Template Tag needs closing end tag.

DEFAULT_TAG = 'span'

Rendered HTML tag.

class materialweb.tags.lists.Group(*args, **kwargs)

Provides template tag: List_Group.

Example usage:

{% load materialweb %}

{% List_Group %}
  {% List_Header %}{% trans "List 1" %}{% endList_Header %}
  {% List %}
    {% List_Item tabindex="0" %}
      {% List_Content %}{% trans "line item %}{% endList_Content %}
    {% endList_Item %}

    {% List_Item %}
      {% List_Content %}{% trans "line item %}{% endList_Content %}
    {% endList_Item %}

    {% List_Item %}
      {% List_Content %}{% trans "line item %}{% endList_Content %}
    {% endList_Item %}
  {% endList %}
{% endList_Group %}

Example output:

<div class="mdc-list-group">
  <h3 class="mdc-list-group__subheader">List 1</h3>
  <ul class="mdc-list">
    <li class="mdc-list-item" tabindex="0">
      <span class="mdc-list-item__ripple"></span>
      <span class="mdc-list-item__text">line item</span>
    </li>
    <li class="mdc-list-item">
      <span class="mdc-list-item__ripple"></span>
      <span class="mdc-list-item__text">line item</span>
    </li>
    <li class="mdc-list-item">
      <span class="mdc-list-item__ripple"></span>
      <span class="mdc-list-item__text">line item</span>
    </li>
  </ul>
</div>

WANT_CHILDREN = True

Template Tag needs closing end tag.

class materialweb.tags.lists.GroupHeader(*args, **kwargs)

Provides template tag: List_Header.

Example usage:

{% load materialweb %}

{% List_Group %}
  {% List_Header %}
    {% trans "List 1" %}
  {% endList_Header %}
{% endList_Group %}

Example output:

<div class="mdc-list-group">
  <h3 class="mdc-list-group__subheader">List 1</h3>
</div>

WANT_CHILDREN = True

Template Tag needs closing end tag.

DEFAULT_TAG = 'h3'

Rendered HTML tag.

class materialweb.tags.lists.Divider(*args, **kwargs)

Provides template tag: List_Divider.

Example usage:

{% load materialweb %}

{% List_Divider %}

Example output:

<li role="separator" class="mdc-list-divider"></li>

DEFAULT_TAG = 'li'

Rendered HTML tag.

class materialweb.tags.lists.SelectList(*args, **kwargs)

Provides template tag: SelectList.

Example usage:

{% load materialweb %}

{% SelectList mode="radio" value="2" %}
  {% SelectList_Item name="demo-list-radio-item-group" value="1" %}
    {% trans "Option 1" %}
  {% endSelectList_Item %}

  {% SelectList_Item name="demo-list-radio-item-group" value="2" %}
    {% trans "Option 2" %}
  {% endSelectList_Item %}
{% endSelectList %}

Example output:

<ul class="mdc-list" role="radiogroup">
  <li class="mdc-list-item" role="radio" aria-checked="false">
    <span class="mdc-list-item__ripple"></span>
    <span class="mdc-list-item__graphic">
      <div class="mdc-radio">
        <input class="mdc-radio__native-control"
              type="radio"
              id="demo-list-radio-item-1"
              name="demo-list-radio-item-group"
              value="1">
        <div class="mdc-radio__background">
          <div class="mdc-radio__outer-circle"></div>
          <div class="mdc-radio__inner-circle"></div>
        </div>
      </div>
    </span>
    <label for="demo-list-radio-item-1" class="mdc-list-item__text">
      Option 1
    </label>
  </li>
  <li role="radio" aria-checked="true" tabindex="0"
      class="mdc-list-item">
    <span class="mdc-list-item__ripple"></span>
    <span class="mdc-list-item__graphic">
      <div class="mdc-radio">
        <input class="mdc-radio__native-control"
              type="radio"
              id="demo-list-radio-item-2"
              name="demo-list-radio-item-group"
              value="2"
              checked>
        <div class="mdc-radio__background">
          <div class="mdc-radio__outer-circle"></div>
          <div class="mdc-radio__inner-circle"></div>
        </div>
      </div>
    </span>
    <label for="demo-list-radio-item-2" class="mdc-list-item__text">
      Option 2
    </label>
  </li>
  <li class="mdc-list-item" role="radio" aria-checked="false">
    <span class="mdc-list-item__ripple"></span>
    <span class="mdc-list-item__graphic">
      <div class="mdc-radio">
        <input class="mdc-radio__native-control"
              type="radio"
              id="demo-list-radio-item-3"
              name="demo-list-radio-item-group"
              value="3">
        <div class="mdc-radio__background">
          <div class="mdc-radio__outer-circle"></div>
          <div class="mdc-radio__inner-circle"></div>
        </div>
      </div>
    </span>
    <label for="demo-list-radio-item-3" class="mdc-list-item__text">
      Option 3
    </label>
  </li>
</ul>

WANT_CHILDREN = True

Template Tag needs closing end tag.

MODES = ('list', 'radio', 'checkbox')

Available variants.

NODE_PROPS = ('value',)

Extended Template Tag arguments.

DEFAULT_TAG = 'ul'

Rendered HTML tag.

class materialweb.tags.lists.SelectItem(*args, **kwargs)

Select List item.

WANT_CHILDREN = True

Template Tag needs closing end tag.

NODE_PROPS = ('name', 'value')

Extended Template Tag arguments.

DEFAULT_TAG = 'li'

Rendered HTML tag.