Saltar al contenido

LWC: Ajustar el ancho del botón Lightning

Solución:

No puedes. El botón interior está diseñado para ser tan grande como sea necesario. Eché un vistazo al código y se muestra así:

<lightning-button c-app_app="" class="button-classes">
    <button type="button" class="slds-button slds-button_neutral">
        Demo
    </button>
</lightning-button>

Dónde button-classes es lo que pones en el atributo de clase:

<lightning-button class="button-classes" label="Demo"></lightning-button>

Por lo tanto, parece razonable que nada de lo que haga funcionará, salvo escribir su propio componente personalizado. Por frustrante que sea, ese es el estado actual de las cosas hasta que se arregle el componente o el CSS relacionado.

Después de buscar un poco más para lograr lo que estoy pidiendo y leer sobre el Sistema de diseño de rayos, Descubrí que puede usar una etiqueta de botón normal para lograr lo que estoy tratando de hacer (en lugar de la etiqueta Lightning-Button), al tiempo que conserva el estilo de Salesforce:

<button class="slds-button slds-button_neutral slds-button_stretch" onclick={...}>...</button>

Tenga en cuenta que aún puede vincular el evento onclick a su clase LWC JS usando las llaves. Además, observe que el contenido del texto del atributo de la etiqueta simplemente se mueve al interior de la etiqueta del botón.

Debido a que la etiqueta del botón es HTML5 estándar, también puede usar el atributo de estilo para definir CSS personalizado de la siguiente manera:

<button class="..." style="width:250px" onclick={...}>...</button>

Referencia: https://www.lightningdesignsystem.com/components/buttons/#Stretch

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *