$attributes->merge : ¿qué estoy haciendo mal?

11 Jul, 2023 Programación 0

Tengo el siguiente componente de blade en Laravel. Estoy usando Tailwind, ubicado en views/components/indigo-button-sm.blade.php

<button {{="" $attributes-="">merge(['type' => 'button', 'class' => 'inline-flex justify-center py-1 px-1 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500']) }}>
    {{ $slot }}
</button>

Quiero poder cambiar el componente sobre la marcha un poco. Es decir, utilizo el componente anterior para mostrar un botón “guardar”. Pero luego quiero mostrar un botón que diga “confirmar” tu entrada y cambiar levemente el aspecto del botón para indicar visualmente que esta es una opción diferente.

Específicamente, tengo un autocompletado y el usuario está ingresando un elemento que estoy proporcionando con más de 2,000 opciones (escuelas). Pero si el usuario escribe una escuela que no está en mi lista de la base de datos, quiero que confirmen que escribieron correctamente su escuela, así que quiero mostrar el botón “Confirmar” para asegurarme. Si eligen una escuela que ya está en la lista, no les pediré que confirmen su escritura.

Entonces, quiero cambiar el botón de guardar

bg-indigo-600 hover:bg-indigo-700

por el botón Confirmar con un esquema de color ligeramente diferente.

bg-indigo-800 hover:bg-indigo-900

<x-indigo-button-sm x-show="showsaveschool" wire:click="saveSchoolInfo">Guardar</x-indigo-button-sm>
<x-indigo-button-sm x-show="showconfirmschool" wire:click="confirmSaveSchoolInfo">Confirmar</x-indigo-button-sm>

así que escriben la escuela y la escuela no está en la lista de búsqueda. Hacen clic en el botón Guardar. El botón Guardar desaparece y aparece el botón Confirmar, y aparecerá un texto debajo del botón Confirmar.

Mientras escribo esto, comienzo a pensar que sería mejor crear un botón de Confirmar y siempre usarlo.

De todos modos, pensé que $attributes->merge([]) te permitiría cambiar los atributos, pero creo que solo te permite agregar atributos. Así que si tienes una clase de margen, por ejemplo, “my-0” en el componente, no parece permitir una clase similar nueva como “my-5”.

Agradeceré tus comentarios.

davy.ai

July 11, 2023 at 8:44 pm

Para cambiar la apariencia del botón sobre la marcha, puedes crear un nuevo componente blade que extienda el componente original y anule los atributos necesarios. Por ejemplo, puedes crear un componente confirm-button que extienda el componente indigo-button-sm y cambie el color de fondo y el color de fondo al pasar el cursor por encima:

<!-- views/components/confirm-button.blade.php -->
<x-indigo-button-sm {{="" $attributes-="">merge(['class' => 'bg-indigo-800 hover:bg-indigo-900']) }}>
    {{ $slot }}
</x-indigo-button-sm>

Luego, en tu vista, puedes mostrar condicionalmente el save-button o el confirm-button según la entrada del usuario y usar el nuevo componente para el confirm-button:

<!-- Mostrar el botón de guardar de forma predeterminada -->
<x-indigo-button-sm wire:click="saveSchoolInfo">Guardar</x-indigo-button-sm>

<!-- Si el usuario escribe una nueva escuela, actualiza la interfaz de usuario para mostrar el botón de confirmación -->
<x-indigo-button-sm x-show="showConfirmSchool" wire:click="confirmSaveSchoolInfo">
    Confirmar
</x-indigo-button-sm>

<!-- Utilizar el nuevo componente confirm-button para el botón de confirmación -->
<x-confirm-button x-show="showConfirmSchool" wire:click="confirmSaveSchoolInfo">
    Confirmar
</x-confirm-button>

Ten en cuenta que también puedes pasar atributos adicionales al nuevo componente usando la variable $attributes, al igual que en el componente original. Esto te permitirá añadir más clases o cambiar el tipo de botón, por ejemplo:

<x-confirm-button type="submit" class="my-5" wire:click="confirmSaveSchoolInfo">
    Confirmar
</x-confirm-button>

Espero que esto te ayude. Hazme saber si tienes alguna otra pregunta.

Answer

davy.ai

July 11, 2023 at 8:44 pm
Para cambiar la apariencia del botón sobre la marcha, puedes crear un nuevo componente blade que extienda el componente original y anule los atributos necesarios. Por ejemplo, puedes crear un componente confirm-button que extienda el componente indigo-button-sm y cambie el color de fondo y el color de fondo al pasar el cursor por encima:
```

<x-indigo-button-sm {{="" $attributes-="">merge(['class' => 'bg-indigo-800 hover:bg-indigo-900']) }}>
    {{ $slot }}
</x-indigo-button-sm>
```
Luego, en tu vista, puedes mostrar condicionalmente el save-button o el confirm-button según la entrada del usuario y usar el nuevo componente para el confirm-button:
```

<x-indigo-button-sm wire:click="saveSchoolInfo">Guardar</x-indigo-button-sm>


<x-indigo-button-sm x-show="showConfirmSchool" wire:click="confirmSaveSchoolInfo">
    Confirmar
</x-indigo-button-sm>


<x-confirm-button x-show="showConfirmSchool" wire:click="confirmSaveSchoolInfo">
    Confirmar
</x-confirm-button>
```
Ten en cuenta que también puedes pasar atributos adicionales al nuevo componente usando la variable $attributes, al igual que en el componente original. Esto te permitirá añadir más clases o cambiar el tipo de botón, por ejemplo:
```
<x-confirm-button type="submit" class="my-5" wire:click="confirmSaveSchoolInfo">
    Confirmar
</x-confirm-button>
```
Espero que esto te ayude. Hazme saber si tienes alguna otra pregunta.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

$attributes->merge : ¿qué estoy haciendo mal?

Answer

davy.ai