> For the complete documentation index, see [llms.txt](https://akyos.gitbook.io/book/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://akyos.gitbook.io/book/wordpress/details-du-theme/components.md).

# Components

Une liste de de `<x-component>` est déjà présent sur le thème&#x20;

<details>

<summary>Accordéon</summary>

Paramètres :&#x20;

* title : Le titre sur lequel il faut cliquer pour déplier l'accordéon

`<x-accordion :title="$title">{!! $content !!}</x-accordion>`

</details>

<details>

<summary>Bouton</summary>

Paramètres :&#x20;

* appearance : La classe du bouton

`<x-button :href="$link" appearance="primary"> En savoir plus </x-button>`

</details>

<details>

<summary>Slider</summary>

Paramètres :&#x20;

* per : Nombre de slides par vue
* perMd : Nombre de slides par vue au-dessus de 1024px
* perSm : Nombre de slides par vue au-dessus de 768px
* perXs : Nombre de slide par vue au-dessus de 480px
* name : Identifiant du slider
* modules : Les modules utilisées par le slider (Autoplay, Pagination, Navigation)
* extra : Permet de configurer d'autres champs du slider via Swiper.JS

```php
<x-slider
      name="images"
      per="{{ $per }}"
      perMd="3"
      perSm="2"
      perXs="1"
      modules="{{ $modules }}"
      extra="{!! ['spaceBetween' => 20, 'autoHeight' => true] !!}"
    >
      @foreach($images as $slide)
        <x-slide>
          <x-image :lg="$slide['image']"/>
        </x-slide>
      @endforeach
</x-slider>
```

:warning: Pour chaque slide, utilisez `<x-slide>`

</details>

<details>

<summary>Title</summary>

Paramètres :&#x20;

* appearance : Classe du titre (primary/secondary/light..)
* position : Position du titre (left/center/right)
* tag : Balise du titre

```php
<x-title
    :position="$title['position']"
    :tag="$title['tag']">
    {!! $title['value'] !!}
</x-title>
```

</details>

<details>

<summary>Image</summary>

Paramètres :&#x20;

* lg : Identifiant du média Wordpress&#x20;

`<x-image :lg="$image"/>`

</details>

<details>

<summary>Post</summary>

Affiche une carte pour un article.

Paramètres :&#x20;

* post : Identifiant du post

`<x-post :post="$post"/>`

</details>