Ayant utilisé à plusieurs reprises le switch de Prestashop, j’ai décidé d’en faire un composant Laravel blade afin de l’utiliser sans modération.

C’est la première version, elle est tout à fait perfectible, je n’ai mis aucun effet, mais est particulièrement malléable par contre.

Le code du composant est le suivant :

@props(['name', 'value' => false, 'data' => '', 'on_off' => false, 'class' => '', 'rights' => true])

@php

$data = json_decode(stripslashes($data), true);

@endphp

<div class="switch inline {{ $class }} @if (!$rights) disabled @endif">

<div class="switch_selector true text-center inline-block {{ $class }} @if ($on_off) on @endif rounded-tl-md rounded-bl-md @if ($value) active @endif">

<input type="radio" name="{{ $name }}" id="{{ $name }}_on" @if ($value == '1') class="checked"@endif value="1" />

<label for="{{ $name }}_on" class="radioCheck">

@if (substr($data[1], 1, 8) == 'i class=')

{!! $data[1] !!}

@else

{{ __($data[1]) }}

@endif

</label>

</div><div class="switch_selector false text-center inline-block {{ $class }} @if ($on_off) off @endif rounded-tr-md rounded-br-md @if (!$value) active @endif">

<input type="radio" name="{{ $name }}" id="{{ $name }}_off"@if ($value == '0') class="checked"@endif value="0" />

<label for="{{ $name }}_off" class="radioCheck">

@if (substr($data[0], 1, 8) == 'i class=')

{!! $data[0] !!}

@else

{{ __($data[0]) }}

@endif

</label>

</div>

</div>

Il est à noter que les data étant passés impérativement sous forme de chaine, ils sont encodés en JSON puis désencodés à l’arrivée.

Bien entendu ce code représente une piste de travail en fonction des besoins de chacun, pour mon projet il est donc en Laravel blade avec des classes tailwind css mais peut facilement être porté sur une autre technologie.

L’appel se fait de la manière suivant :

<x-form.switch required="{{ $required }}" name="{{ $name }}" id="{{ $id }}" :value="$value" :data="$data" :on_off="true" class="{{ $class }} {{ $object_class }}" :rights="$rights" />

Dernière chose, pour certains switchs, j’utilise des icônes plutôt que du texte, dans ce cas, les data sont envoyés comme ceci :

$data = addslashes(json_encode(['<i class="fa-solid fa-xmark"></i>', '<i class="fa-solid fa-check"></i>']));

On peut bien évidemment mixer, chaque valeur du tableau représente la valeur 0 et 1 du switch.

Avec ce code et ces data, on obtient :

si l’option est inactive, et :

Si l’option est active.