Violin.css

# List

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <!-- Default -->
    <div class="inv-list">

        <a href="#" class="inv-list__item">
            <span>#1 Opção</span>
          </a>
        <a href="#" class="inv-list__item">
            <span>#2 Opção</span>
          </a>
        <a href="#" class="inv-list__item">
            <span>#3 Opção</span>
          </a>
        <a href="#" class="inv-list__item">
            <span>#4 Opção</span>
          </a>
        <a href="#" class="inv-list__item">
            <span>#5 Opção</span>
          </a>
        <a href="#" class="inv-list__item">
            <span>#6 Opção</span>
          </a>
        <a href="#" class="inv-list__item">
            <span>#7 Opção</span>
          </a>
        <a href="#" class="inv-list__item">
            <span>#8 Opção</span>
          </a>
    </div>

    <!-- Multiselect -->
    <div class="inv-list">
        <label class="inv-list__item inv-list__item--addon inv-list__item--check-all">
          <input type="checkbox" class="inv-checkbox"  />
          <span>Selecionar todos </span>
        </label>

        <label class="inv-list__item inv-list__item--addon">
            <input type="checkbox" class="inv-checkbox"  />
            <span>#1 Opção</span>
          </label>
        <label class="inv-list__item inv-list__item--addon">
            <input type="checkbox" class="inv-checkbox"  />
            <span>#2 Opção</span>
          </label>
        <label class="inv-list__item inv-list__item--addon">
            <input type="checkbox" class="inv-checkbox"  />
            <span>#3 Opção</span>
          </label>
        <label class="inv-list__item inv-list__item--addon">
            <input type="checkbox" class="inv-checkbox"  />
            <span>#4 Opção</span>
          </label>
        <label class="inv-list__item inv-list__item--addon">
            <input type="checkbox" class="inv-checkbox"  />
            <span>#5 Opção</span>
          </label>
        <label class="inv-list__item inv-list__item--addon">
            <input type="checkbox" class="inv-checkbox"  />
            <span>#6 Opção</span>
          </label>
        <label class="inv-list__item inv-list__item--addon">
            <input type="checkbox" class="inv-checkbox"  />
            <span>#7 Opção</span>
          </label>
        <label class="inv-list__item inv-list__item--addon">
            <input type="checkbox" class="inv-checkbox"  />
            <span>#8 Opção</span>
          </label>
    </div>

`
`

    <div class="inv-list">
      {{#if multiselect}}
        <label class="inv-list__item inv-list__item--addon inv-list__item--check-all">
          {{> @checkbox}}
          <span>Selecionar todos </span>
        </label>
      {{/if}}

      {{#each list as |title|}}
        {{#if ../multiselect}}
          <label class="inv-list__item inv-list__item--addon">
            {{> @checkbox}}
            <span>{{ title }}</span>
          </label>
        {{else}}
          <a href="#" class="inv-list__item">
            <span>{{ title }}</span>
          </a>
        {{/if}}
      {{/each}}
    </div>

`
`

    /* Default */
    {
      "list": [
        "#1 Opção",
        "#2 Opção",
        "#3 Opção",
        "#4 Opção",
        "#5 Opção",
        "#6 Opção",
        "#7 Opção",
        "#8 Opção"
      ]
    }

    /* Multiselect */
    {
      "list": [
        "#1 Opção",
        "#2 Opção",
        "#3 Opção",
        "#4 Opção",
        "#5 Opção",
        "#6 Opção",
        "#7 Opção",
        "#8 Opção"
      ],
      "multiselect": true
    }

`
File:

- Content:
  `

      .inv-list {
        background-color: var(--color-system--white);
        max-height: 280px;
        overflow-y: auto;
        width: 100%;
        display: flex;
        flex-direction: column;
      }

      .inv-list__item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        min-height: 40px;
        color: var(--color-system--dark);
        font-size: 14px;
        padding-left: var(--space-16);
        font-weight: 300;
        text-decoration: none;
        transition: 0.2s background-color;
        cursor: pointer;
      }

      .inv-list__item:hover {
        background-color: var(--color-default--white);
      }

      .inv-list__item:active {
        background-color: var(--color-system--light);
      }

      .inv-list__item--selected {
        background-color: var(--color-default--white);
      }

      .inv-list__item--addon {
        padding-left: 0;
      }

      .inv-list__item--check-all {
        border-bottom: solid 1px var(--color-default--white);
        min-height: 32px;
        color: var(--color-default--dark);
        font-weight: 600;
      }

      .inv-list__item--addon > .inv-checkbox {
        margin-left: var(--space-8);
        margin-right: var(--space-8);
      }

      .inv-list__item > span {
        max-height: 30px;
        overflow: hidden;
        margin-right: var(--space-8);
      }

  `
- URL: /components/raw/list/list.css
- Filesystem Path: src/components/list/list.css
- Size: 1.1 KB

- Handle: @list
- Variants (2): Default , Multiselect
- Preview:
  - With layout
  - Component only
- Filesystem Path: src/components/list/list.hbs
- References (1): @checkbox
- Referenced by (6): @dropdown, @dropdown--open, @dropdown--action, @dropdown--counter, @dropdown--select, @dropdown--multiselect

## List

Utilizadas nos campos de select

Contendo a classe base `.inv-list`, e elementos com a classe `.inv-list__item`

### Default List

Lista de itens padrão para seleção

`

    <div class="inv-list">
      <a href="#" class="inv-list__item">
        <span>#Opção 1</span>
      </a>
    </div>

    <div class="inv-list">
      <label for="1" class="inv-list__item inv-list__item--addon">
        <input id="1" type="checkbox" class="inv-checkbox" />
        <span>
          #Meu item da lista
        </span>
      </label>
    </div>

`

Modificadores | Uso
--- | ---
`.inv-list__item--selected` | Modifica o item da lista para o mesmo estar selecionado
`.inv-list__item--addon` | Modifica o item da lista para inserir um novo componente na lateral esquerda
`.inv-list__item--check-all` | Modifica o item da lista, seleção de itens internos

### Selected item

Modifica o item da lista para o mesmo estar selecionado

`

    <div class="inv-list">
      <a href="#" class="inv-list__item inv-list__item--selected">
        <span>#Opção 1</span>
      </a>
    </div>

`

### Addon item

Modifica o item da lista para inserir um novo componente na lateral esquerda

`

    <div class="inv-list">
      <label for="1" class="inv-list__item inv-list__item--addon">
        <input id="1" type="checkbox" class="inv-checkbox" />
        <span>
          #Meu item da lista 1
        </span>
      </label>
      <label for="2" class="inv-list__item inv-list__item--addon">
        <input id="2" type="checkbox" class="inv-checkbox" />
        <span>
          #Meu item da lista 2
        </span>
      </label>
    </div>

`

### Check all

Modifica o item da lista, seleção de itens internos

`

    <div class="inv-list">
      <label for="selecionarTodos" class="inv-list__item inv-list__item--addon inv-list__item--check-all">
        <input id="selecionarTodos" type="checkbox" class="inv-checkbox" />
        <span>Selecionar todos </span>
      </label>
      <label for="1" class="inv-list__item inv-list__item--addon">
        <input id="1" type="checkbox" class="inv-checkbox" />
        <span>
          #Meu item da lista 1
        </span>
      </label>
      <label for="2" class="inv-list__item inv-list__item--addon">
        <input id="2" type="checkbox" class="inv-checkbox" />
        <span>
          #Meu item da lista 2
        </span>
      </label>
    </div>

`