CollapseChangeArrowIcon

src/components/CollapseChangeArrowIcon.vue

Documentation Low 0 usos

Componente de demonstração — não é um componente de produção. É uma página de showcase/documentação interna do Vuexy mostrando como customizar o ícone de seta do vs-collapse-item via a prop icon-arrow. Exibe um vx-card com code-toggler contendo 4 exemplos de vs-collapse-item com ícones Feather diferentes. Inclui um vs-alert com link para a lista de ícones. Não tem props próprias. Não é usado em nenhum arquivo de produção.

props

usos em produção

componente Vuesax documentado

Atenção — componente de documentação, não de produção. Este arquivo tem 0 usos em produção. É um artefato herdado do template Vuexy Admin que documenta a API do vs-collapse-item do Vuesax. Não use CollapseChangeArrowIcon em nenhuma view. Para documentação oficial do vs-collapse, consulte a documentação do Vuesax 3.x.

Demonstração: vs-collapse-item com icon-arrow

A prop icon-arrow do vs-collapse-item aceita qualquer nome de ícone Feather (com icon-pack="feather"). O ícone substitui a seta padrão e é rotacionado 180° quando o item está aberto. Clique nos headers abaixo para testar a interatividade. O item com disabled não responde a cliques.

Lista completa de ícones disponíveis para icon-arrow: Feather Icons · Material Icons (link original do componente)

Ícone padrão icon-arrow="arrow-down"

Conteúdo do collapse com ícone arrow-down — ícone padrão do Vuesax. Este item está expandido por padrão para demonstração.

Ícone estrela icon-arrow="star"

Conteúdo com ícone star. A estrela rotaciona 180° ao expandir, igual a qualquer outro ícone Feather — o comportamento de rotação é automático do Vuesax.

Ícone bookmark icon-arrow="bookmark"

Conteúdo com ícone bookmark. Qualquer ícone Feather pode ser usado como seta, independentemente de fazer sentido semântico como indicador de abertura.

Chevrons duplos icon-arrow="chevrons-down"

Conteúdo com chevrons-down — chevrons duplos que reforçam visualmente a ação de expandir.

Item desativado disabled

<!-- CollapseChangeArrowIcon demonstra o uso da prop icon-arrow no vs-collapse-item. -->
<!-- icon-arrow aceita qualquer ícone Feather. Padrão: "arrow-down". -->
<vs-collapse>
  <vs-collapse-item
    title="Ícone padrão (arrow-down)"
    icon-arrow="arrow-down"
    icon-pack="feather"
  >
    Conteúdo do collapse com ícone padrão.
  </vs-collapse-item>

  <vs-collapse-item
    title="Ícone estrela (icon-star)"
    icon-arrow="star"
    icon-pack="feather"
  >
    Conteúdo com ícone de estrela.
  </vs-collapse-item>

  <vs-collapse-item
    title="Ícone bookmark"
    icon-arrow="bookmark"
    icon-pack="feather"
  >
    Conteúdo com ícone de marcador.
  </vs-collapse-item>

  <vs-collapse-item
    title="Ícone chevrons-down"
    icon-arrow="chevrons-down"
    icon-pack="feather"
  >
    Conteúdo com chevrons duplos.
  </vs-collapse-item>

  <vs-collapse-item
    title="Item desativado"
    disabled
    icon-pack="feather"
  >
    Este item está desativado.
  </vs-collapse-item>
</vs-collapse>

Estrutura do Componente (código interno)

CollapseChangeArrowIcon.vue é um wrapper de documentação herdado do template Vuexy Admin. Não renderiza nenhuma lógica de negócio — apenas envolve os exemplos de vs-collapse-item num vx-card com code-toggler e um vs-alert informativo. É o padrão que o Vuexy usa internamente para documentar componentes Vuesax.

Wrapper externo <vx-card code-toggler>

Alerta info <vs-alert color="warning" icon="bookmark">

Conteúdo <vs-collapse> com 5 vs-collapse-item

Props próprias nenhuma

Usos em produção 0 arquivos

<!-- CollapseChangeArrowIcon.vue — componente de documentação interno. -->
<!-- Estrutura interna: vx-card com code-toggler + vs-alert informativo. -->
<!-- Não é usado em nenhuma view de produção (0 usos). -->
<vx-card title="Collapse — Customização do Ícone de Seta" code-toggler>
  <vs-alert
    color="warning"
    icon="bookmark"
    active="true"
  >
    Lista de ícones disponíveis:
    <a href="https://material.io/icons/" target="_blank">Material Icons</a>
  </vs-alert>

  <vs-collapse>
    <vs-collapse-item title="Arrow Down" icon-arrow="icon-arrow-down" icon-pack="feather">...</vs-collapse-item>
    <vs-collapse-item title="Star"       icon-arrow="icon-star"       icon-pack="feather">...</vs-collapse-item>
    <vs-collapse-item title="Bookmark"   icon-arrow="icon-bookmark"   icon-pack="feather">...</vs-collapse-item>
    <vs-collapse-item title="Chevrons"   icon-arrow="icon-chevrons-down" icon-pack="feather">...</vs-collapse-item>
    <vs-collapse-item title="Disabled"   disabled icon-pack="feather">...</vs-collapse-item>
  </vs-collapse>
</vx-card>

API

CollapseChangeArrowIcon — props, slots, eventos

Item	Valor
Props	Nenhuma — componente de documentação sem interface pública
Slots	Nenhum
Eventos emitidos	Nenhum
Usos em produção	0 arquivos

O que demonstra: vs-collapse-item prop icon-arrow

Prop	Tipo	Valores demonstrados	Observação
`icon-arrow`	String	`icon-arrow-down`, `icon-star`, `icon-bookmark`, `icon-chevrons-down`	Nome do ícone Feather. Padrão `arrow-down` se omitido.
`icon-pack`	String	`"feather"`	Obrigatório para ícones Feather. Padrão do Vuesax é `"material-icons"`.
`disabled`	Boolean	`true`	1 dos 5 exemplos usa disabled — item não pode ser expandido.

Dependências

vs-collapse, vs-collapse-item (Vuesax 3.x), vs-alert, vx-card com code-toggler. Icon pack: Feather Icons (já incluído no Pedbot Admin via feather-icon).

Referências externas

Recurso	URL
Documentação oficial vs-collapse (Vuesax 3.x)	lusaxweb.github.io/vuesax/components/collapse/
Feather Icons	feathericons.com