aperte s para abrir a busca
Storybook Storybook
v1.81.11

# CDropdown

Dropdown apresenta uma lista de opções na qual o usuário pode selecionar uma ou várias opções. Uma opção selecionada pode representar um valor em um formulário ou pode ser usada como uma ação para filtrar ou classificar o conteúdo existente..

# Exemplos de Dropdown

<template>
  <c-dropdown
    label="Escolha uma ação" 
    :options="options" 
    :value="value"
    @change="handleChange"
  />
</template>

<script>
module.exports = {
  data: () => ({
      options: [
        {
          label: 'Adicionar',
          value: 'ADD'
        },
        {
          label: 'Editar',
          value: 'EDIT'
        },
        {
          label: 'Remover',
          value: 'REMOVE'
        }
      ],
      value: {
        label: 'Adicionar',
        value: 'ADD'
      },
      value1: ''
  }),
    methods: {
    handleChange (value) {
      this.value = value
    }
  }
}
</script>

Olá, Jon Snow

Olá, Jon Snow

Escolha uma das opções
 <template>
  <div class="ui-flex ui-flex-row">
    <c-dropdown-action>
      <template slot="label" slot-scope="props">
        <div class="ui-mr-2">
          <p class="c-text-label c-text-primary-300">
            Olá, Jon Snow
          </p>
          <p class="c-text-input">
            Olá, Jon Snow
          </p>
        </div>
      </template>
      <template>
        <c-options>
          Minha conta
        </c-options>
        <c-options>
          Configuração
        </c-options>
        <c-options>
          Cobranças
        </c-options>
        <c-options>
          Sair
        </c-options>
      </template>
    </c-dropdown-action>

    <c-dropdown-action label="Escolha uma das opções">
      <template>
        <c-options>
          Minha conta
        </c-options>
        <c-options>
          Configuração
        </c-options>
        <c-options>
          Cobranças
        </c-options>
        <c-options>
          Sair
        </c-options>
      </template>
    </c-dropdown-action>

    <c-dropdown-action class="ui-ml-4" placement="right-bottom">
      <template slot="label" slot-scope="props">
        <icon name="Favicon" class="ui-pointer" color="#444"/>
      </template>
      <template>
        <c-options
          @mouseover="() => isHover='concurso'"
          @mouseleave="() => isHover=null"
        >
          <span>
            <icon 
              class="ui-inline-block"
              name="Favicon" 
              :color="isHover ==='concurso' ? '#fff' : '#6e58cd'"
            />
          </span>
          <span>
            Estratégia concursos
          </span>
        </c-options>
        <c-options
        @mouseover="() => isHover='medicina'"
        @mouseleave="() => isHover=null"
        >
          <span>
            <icon 
              class="ui-inline-block"
              name="Favicon" 
              :color="isHover === 'medicina' ? '#fff' : '#3399ff'"
            />
          </span>
          <span>
            Estratégia Medicina
          </span>
        </c-options>
        <c-options
          @mouseover="() => isHover='militar'"
          @mouseleave="() => isHover=null"
        >
          <span>
            <icon 
              class="ui-inline-block"
              name="Favicon" 
              :color="isHover === 'militar' ? '#fff' : '#01d17c'"
            />
          </span>
          <span>
            Estratégia Militar
          </span>
        </c-options>
        <c-options
          @mouseover="() => isHover='vestibulares'"
          @mouseleave="() => isHover=null"
        >
         <span>
            <icon 
              class="ui-inline-block"
              name="Favicon" 
              :color="isHover === 'vestibulares' ? '#fff' : '#ff8b3d'"
            />
          </span>
          <span>
            Estratégia Vestibulares
          </span>
        </c-options>
      </template>
    </c-dropdown-action>
  </div>
 </template>

<script>
module.exports = {
  data: () => ({
    isHover: false
  }) 
}
</script>

<template>
  <div class="ui-flex ui-flex-row ui-w-full">
    <div class="columns">
      <c-dropdown-small
        :options="options1"
        name="no-filter"
        :value="value1"
        @change="handleChange"
      />
    </div>

    <div class="ui-ml-4">
      <c-dropdown-small 
        name="with-filter"
        :options="options2" 
        :value="value2"
        @change="setCheckBox"
        @filter-input="filterInput"
        :hasCheckbox="true"
      />
    </div>
  </div>
</template>

<script>
  module.exports = {
  data: () => ({
      options1: [
        {
          label: 'Adicionar',
          value: 'ADD'
        },
        {
          label: 'Editar',
          value: 'EDIT'
        },
        {
          label: 'Remover',
          value: 'REMOVE'
        }
      ],
      value1: {
        label: 'Adicionar',
        value: 'ADD'
      },
      options2: [
        {
          label: 'Sala VIP',
          value: 'ADD',
          checked: true
        },
        {
          label: 'Lives',
          value: 'EDIT',
          checked: false
        },
        {
          label: 'Monitoria',
          value: 'REMOVE',
          checked: false
        }
      ],
      value2: {
        label: 'Todos os grupos',
        value: 'ADD'
      }
  }),
    methods: {
    handleChange (value) {
      this.value1 = value
    },
    filterInput (event) {
      console.log('event', event)
    },
    setCheckBox (value) {
      const updateIndex = this.options2.findIndex(
        item => item.value === value.value
      )
      this.options2[updateIndex].checked
        ? (this.options2[updateIndex].checked = false)
        : (this.options2[updateIndex].checked = true)
    },
  }
}
</script>

# Sucesso

<template>
  <c-dropdown   
  label="Sucesso"
  :options="options"
  :value="value"
  @change="handleChange"
  success
/>
</template>

<script>
module.exports = {
  data: () => ({
      options: [
        {
          label: 'Adicionar',
          value: 'ADD'
        },
        {
          label: 'Editar',
          value: 'EDIT'
        },
        {
          label: 'Remover',
          value: 'REMOVE'
        }
      ],
      value: {
        label: 'Adicionar',
        value: 'ADD'
      },
      value1: ''
  }),
    methods: {
    handleChange (value) {
      this.value = value
    }
  }
}
</script>

# Desabilitado

<template>
  <c-dropdown
  label="Desabilitado"
  :options="options"
  :value="value"
  @change="handleChange"
  disabled
/>
</template>

<script>
module.exports = {
  data: () => ({
      options: [
        {
          label: 'Adicionar',
          value: 'ADD'
        },
        {
          label: 'Editar',
          value: 'EDIT'
        },
        {
          label: 'Remover',
          value: 'REMOVE'
        }
      ],
      value: {
        label: 'Adicionar',
        value: 'ADD'
      },
      value1: ''
  }),
    methods: {
    handleChange (value) {
      this.value = value
    }
  }
}
</script>

# Placement

Através do nosso componente interno de Popup é possível definir o placement (posição de origem) na qual o dropdown será renderizado servindo tanto para o CDropdown como o CDropdownSmall.

No exemplo abaixo por ser ao vivo, basta trocar o valor da prop de placement por um dos valores disponíveis aqui (opens new window).

<template>
  <c-dropdown
    label="Placement"
    placement="top"
    :options="options"
    :value="options[0]"
  />
</template>

<script>
module.exports = {
  data () {
    return {
      options: [
        {
          label: 'Adicionar',
          value: 'add'
        },
        {
          label: 'Editar',
          value: 'edit'
        },
        {
          label: 'Compartilhar',
          value: 'share'
        },
        {
          label: 'Remover',
          value: 'remove'
        },
      ]
    }
  }
}
</script>

Para utilizar o CDropdown, é preciso primeiro importar um dos componentes disponíveis (CDropdown, CDropdownAction ou CDropdownSmall).

import { CDropdown } from '@estrategiahq/coruja-web-ui';
1

# Props

As props disponíveis para configurar o componente são:

Nome Tipo Default Descrição
isDisabled boolean false Permite habilitar/desabilitar o dropdown, pode utilizar as opções true ou false.
isSuccess boolean false Permite marcar o dropdown, pode utilizar as opções true ou false.
hasFilter boolean false Permite filtrar o dropdown, pode utilizar as opções true ou false.
label string Define o label para o dropdown.
options boolean, null false Define o options para o dropdown.
value boolean, null false Define o valor para o dropdown.
placement string bottom Permite passar o tipo de placement do Popup no qual o Dropdown será renderizado. Ver aqui as opções válidas. (opens new window)

# Slots

Podem conter qualquer tipo de código template, incluindo HTML ou outro componente. Temos defínido os seguintes slots:

Nome Descrição
default Slot padrão do Vue.
label Se não definir um label na props do componente, você pode definir um label, com um slot chamado label.

# Events

Usado para definir alguma ação.

Nome Tipo Descrição
@change function Emitido quando o valor do componente é alterado.

# Props Dropdown Action

As props disponíveis para configurar o componente são:

Nome Tipo Default Descrição
color string primary Define a cor do elemento podendo ser primary, green, orange, red e gray.

# Slots Dropdown Action

Podem conter qualquer tipo de código template, incluindo HTML ou outro componente. Temos defínido os seguintes slots:

Nome Descrição
icon Define um ícone, após o conteúdo do dropdown e define também a props: color.

# Events Dropdown Action

Usado para definir alguma ação.

Nome Tipo Descrição
@change function Emitido quando o valor do componente é alterado e para marcar e desmarcar uma opção.

# Props Dropdown Small

As props disponíveis para configurar o componente são:

Nome Tipo Default Descrição
iHover boolean false Altera o estado do icone, pode utilizar as opções true ou false.
hasFilter boolean false Permite filtrar o dropdown, pode utilizar as opções true ou false.
placement string bottom Permite passar o tipo de placement do Popup no qual o Dropdown será renderizado. Ver aqui as opções válidas. (opens new window)

# Slots Dropdown Small

Podem conter qualquer tipo de código template, incluindo HTML ou outro componente. Temos defínido os seguintes slots:

Nome Descrição
icon Define um ícone, após o conteúdo do dropdown e define também a props: color.

# Events Dropdown Small

Usado para definir alguma ação.

Nome Tipo Descrição
@filter-input function Emitido para filtar o valor do componente.
@change function Emitido quando o valor do componente é alterado e para marcar e desmarcar uma opção.