Acordeões

Componentes expansíveis para mostrar e ocultar conteúdo

Acordeões permitem que os usuários expandam e recolham seções de conteúdo. Use acordeões para exibição progressiva de informações e para organizar o conteúdo.

Acordeão único

Sou um acordeão.

Você pode colocar qualquer conteúdo aqui, incluindo outros componentes, como código:

HelloWorld.java

 class HelloWorld {
     public static void main(String[] args) {
         System.out.println("Hello, World!");
     }
 }

Accordion example

<Accordion title="Sou um acordeão.">
  Você pode colocar qualquer conteúdo aqui, incluindo outros componentes, como código:

   ```java HelloWorld.java
    class HelloWorld {
        public static void main(String[] args) {
            System.out.println("Hello, World!");
        }
    }
  ```
</Accordion>

Grupos de Accordion

Agrupe accordions relacionados usando <AccordionGroup>. Isso cria uma seção coesa de accordions que podem ser expandidos ou recolhidos individualmente.

Getting started

Você pode inserir outros componentes dentro de accordions.

HelloWorld.java

class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

Advanced features

Adicione ícones para deixar os accordions mais distintos visualmente e fáceis de identificar.

Troubleshooting

Mantenha conteúdo relacionado organizado em grupos.

Accordion Group Example

<AccordionGroup>
  <Accordion title="Getting started">
    Você pode inserir outros componentes dentro de accordions.

    ```java HelloWorld.java
    class HelloWorld {
        public static void main(String[] args) {
            System.out.println("Hello, World!");
        }
    }
    ```
  </Accordion>

  <Accordion title="Advanced features" icon="alien-8bit">
    Adicione ícones para deixar os accordions mais distintos visualmente e fáceis de identificar.
  </Accordion>

  <Accordion title="Troubleshooting">
    Mantenha conteúdo relacionado organizado em grupos.
  </Accordion>
</AccordionGroup>

Propriedades

title · string · required

Título na prévia do Accordion.

description · string

Detalhe abaixo do título na prévia do Accordion.

defaultOpen · boolean · default: "false"

Define se o Accordion fica aberto por padrão.

icon · string

O ícone a ser exibido.

Opções:

• nome do ícone do Font Awesome
• nome do ícone do Lucide
• código SVG compatível com JSX, entre chaves
• URL para um ícone hospedado externamente
• caminho para um arquivo de ícone no seu projeto

Para ícones SVG personalizados:

1. Converta seu SVG usando o conversor SVGR.
2. Cole seu código SVG no campo de entrada de SVG.
3. Copie o elemento completo <svg>...</svg> do campo de saída JSX.
4. Coloque o código SVG compatível com JSX entre chaves: icon={<svg ...> ... </svg>}.
5. Ajuste height e width conforme necessário.

iconType · string

O estilo do ícone do Font Awesome. Usado apenas com ícones do Font Awesome.

Opções: regular, solid, light, thin, sharp-solid, duotone, brands.