Violin.css

# Dropdown: Action

Ready

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

`

    <div class="inv-dropdown">
        <div class="inv-dropdown__content inv-dropdown__content--open">
            <input id="" name="" type="text" class="inv-input inv-input--focused" value="" placeholder="Ex: 000-00-000" />
            <i class="material-icons inv-input-icon ">

        </i>

            <div class="inv-dropdown__box">

                <div class="inv-dropdown-action">
                    <div class="inv-dropdown-action__result">
                        Nenhum resultado cadastrado.
                    </div>
                    <div class="inv-dropdown-action__action">
                        Aperte Enter para adicionar um novo.
                    </div>
                </div>

            </div>
        </div>
        <button class="inv-clear-input">
        <i class="material-icons">clear</i>
      </button>
    </div>

`
`

    <div class="inv-dropdown">
      <div class="inv-dropdown__content {{ternary dropdown.open "inv-dropdown__content--open" "" }}">
        {{> @input}}
        {{> @input-icon}}

        {{#if dropdown.counter}}
          <div class="inv-dropdown-counter">
            3/10
          </div>
        {{/if}}

        <div class="inv-dropdown__box">

          {{#if dropdown.action}}
            <div class="inv-dropdown-action">
              <div class="inv-dropdown-action__result">
                Nenhum resultado cadastrado.
              </div>
              <div class="inv-dropdown-action__action">
                Aperte Enter para adicionar um novo.
              </div>
            </div>
          {{/if}}

          {{#if dropdown.select}}
            {{ render '@list' }}
          {{/if}}

          {{#if dropdown.multiselect}}
            {{ render '@list--multiselect' }}
          {{/if}}

        </div>
      </div>
      {{> @clear-input}}
    </div>

`
`

    {
      "icon": "arrow_drop_down",
      "dropdown": {
        "open": true,
        "action": true
      },
      "input": {
        "modifier": "inv-input--focused"
      }
    }

`
File:

- Content:
  `

      .inv-dropdown-action {
        max-width: 120px;
        padding-top: 12px;
        padding-bottom: 12px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        font-size: 14px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .inv-dropdown-action__result {
        color: var(--color-system--dark);
        font-weight: normal;
      }

      .inv-dropdown-action__action {
        color: var(--color-primary--regular);
        font-weight: bold;
      }

  `
- URL: /components/raw/dropdown/dropdown-action.css
- Filesystem Path: src/components/dropdown/dropdown-action.css
- Size: 432 Bytes

- Content:
  `

      .inv-dropdown-counter {
        position: absolute;
        top: calc(50% - 12px);
        right: 32px;
        background-color: var(--color-default--white);
        color: var(--color-system--regular);
        height: 24px;
        padding-left: 8px;
        padding-right: 8px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        font-size: 14px;
      }

  `
- URL: /components/raw/dropdown/dropdown-counter.css
- Filesystem Path: src/components/dropdown/dropdown-counter.css
- Size: 317 Bytes

- Content:
  `

      .inv-dropdown {
        min-width: 224px;
      }

      .inv-dropdown,
      .inv-dropdown__content {
        position: relative;
        display: flex;
        flex: 1;
      }

      .inv-dropdown__content--open > .inv-input {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
      }

      .inv-dropdown__content > .inv-input {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }

      .inv-dropdown__content > i {
        position: absolute;
        top: calc(50% - 12px);
        right: 8px;
      }

      .inv-dropdown__box {
        position: absolute;
        top: 38px;
        left: 0;
        width: calc(100% - 4px);
        min-height: 40px;
        background-color: var(--color-system--white);
        border: solid 2px var(--color-primary--regular);
        border-top-width: 1px;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-10px);
        z-index: -1;
        transition: all 0.2s ease-in-out 0s, visibility 0s linear 0.2s, z-index 0s linear 0.01s;
      }

      .inv-dropdown__content--open > .inv-dropdown__box {
        z-index: var(--z-index-3);
        visibility: visible;
        opacity: 1;
        transform: translateY(0%);
        transition-delay: 0s, 0s, 0.2s;
      }

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

- Handle: @dropdown--action
- Variants (6): Default , Open , Action , Counter , Select , Multiselect
- Preview:
  - With layout
  - Component only
- Filesystem Path: src/components/dropdown/dropdown.hbs
- References (5): @input, @input-icon, @list, @list--multiselect, @clear-input

## Dropdown

Campos de seleção de itens

Tendo a classe base `.inv-dropdown`, o dropdown é formado por:

- Conteúdo - `inv-dropdown__content`
  - Input - `inv-input`
  - Input icon - `inv-input-icon`
  - Contador de valores selecionados - `inv-dropdown-counter` (Opcional)
  - Box de listagem - `inv-dropdown__box`
    - Caixa de texto de ação - `inv-dropdown-action` (Opcional)
    - Componente de listagem - `inv-list`
- Campo para limpar valores - `clear-input`

### Default Dropdown

`

    <div class="inv-dropdown">
      <div class="inv-dropdown__content">
        <input id="" name="" type="text" class="inv-input " placeholder="Selecione uma cidade" />
        <i class="material-icons inv-input-icon">arrow_drop_down</i>

        <div class="inv-dropdown__box">
          <!-- Caixa de texto de ação / Listagem -->
        </div>
      </div>
      <button class="inv-clear-input">
        <i class="material-icons">clear</i>
      </button>
    </div>

`

### Dropdown com campo de ação

Utilizado para exibir textos indicativos ao invés da listagem (ex: texto de nenhum resultado encontrado)

`

    <!-- Caixa de ação -->
    <div class="inv-dropdown-action">
      <div class="inv-dropdown-action__result">
        Nenhum resultado cadastrado.
      </div>
      <div class="inv-dropdown-action__action">
        Aperte Enter para adicionar um novo.
      </div>
    </div>

``

    <!-- Utilização no dropdown -->
    <div class="inv-dropdown">
      <div class="inv-dropdown__content inv-dropdown__content--open">
        <input id="" name="" type="text" class="inv-input inv-input--focused" placeholder="Selecione uma cidade" />
        <i class="material-icons inv-input-icon">arrow_drop_down</i>

        <div class="inv-dropdown__box">
          <!-- Caixa de ação -->
          <div class="inv-dropdown-action">
            <div class="inv-dropdown-action__result">
              Nenhum resultado cadastrado.
            </div>
            <div class="inv-dropdown-action__action">
              Aperte Enter para adicionar um novo.
            </div>
          </div>
        </div>
      </div>

      <button class="inv-clear-input">
        <i class="material-icons">clear</i>
      </button>
    </div>

`

### Dropdown com contador

Utilizado para exibir a contagem de itens selecionados

`

    <div class="inv-dropdown-counter">3/10</div>

``

    <!-- Utilização no dropdown -->
    <div class="inv-dropdown">
      <div class="inv-dropdown__content inv-dropdown__content--open">
        <input id="" name="" type="text" class="inv-input inv-input--focused" placeholder="Ex: 000-00-000" />
        <i class="material-icons inv-input-icon">arrow_drop_down</i>

        <!-- Contador -->
        <div class="inv-dropdown-counter">3/10</div>

        <div class="inv-dropdown__box">
          <!-- Caixa de texto de ação / Listagem -->
        </div>
      </div>
      <button class="inv-clear-input">
        <i class="material-icons">clear</i>
      </button>
    </div>

`

### Dropdown com listagem de itens

Basta utilizar o componente de listagem

`

    <!-- Listagem simples -->
    <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>
    </div>

    <!-- Listagem com checkboxes -->
     <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>
    </div>

``

    <!-- Utilização no dropdown -->
    <div class="inv-dropdown">
      <div class="inv-dropdown__content inv-dropdown__content--open">
        <input id="" name="" type="text" class="inv-input inv-input--focused" placeholder="Ex: 000-00-000" />
        <i class="material-icons inv-input-icon">arrow_drop_down</i>

        <div class="inv-dropdown__box">
          <!-- Listagem -->
          <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>
          </div>
        </div>
      </div>
      <button class="inv-clear-input">
        <i class="material-icons">clear</i>
      </button>
    </div>

`

Modificadores | Uso
--- | ---
`.inv-dropdown__content--open` | Modifica o dropdown para abrir a listagem

### Dropdown Content Open

Torna a listagem visível.

Para isso ser possível, deve ser adicionado o modificador `inv-dropdown__content--open` no elemento `inv-dropdown__content`.

Também será necessário ativar o estado do input adicionando o modificador `inv-input--focused`

`

    <div class="inv-dropdown">
      <div class="inv-dropdown__content inv-dropdown__content--open">
        <input id="" name="" type="text" class="inv-input inv-input--focused" placeholder="Selecione uma cidade" />
        <i class="material-icons inv-input-icon">arrow_drop_down</i>

        <div class="inv-dropdown__box">
          <!-- Caixa de texto de ação / Listagem -->
        </div>
      </div>
      <button class="inv-clear-input">
        <i class="material-icons">clear</i>
      </button>
    </div>

`