Button
Un botón ejecuta una acción o evento cuando se activa y admite tres apariencias visuales: accent, standard y subtle.
Uso
<script>
import { Button } from 'fluentui-svelte';
</script>
<Button>I am a Button</Button>Forma
Un botón puede ser redondeado, circular o cuadrado. Valor predeterminado: rounded.
Apariencia
Un botón puede tener su contenido y bordes estilizados para dar mayor énfasis o para verse más sutil.
Propiedades del componente
| Name | Type | Default | Description |
|---|---|---|---|
ref bindable | ButtonElementDOMType[T] | La referencia del DOM del elemento button. | |
as | 'button' | 'a' | 'div' | 'button' | El elemento del DOM que se renderiza. |
disabled | boolean | Deshabilita la interacción del usuario. | |
shape | 'circular' | 'rounded' | 'square' | 'rounded' | Un botón puede ser redondeado, circular o cuadrado. |
appearance | 'accent' | 'standard' | 'subtle' | 'accent' | Un botón puede tener su contenido y bordes estilizados para dar mayor énfasis o para verse más sutil. |
disabledFocusable | boolean | false | Si se activa, permite que el botón siga siendo enfocable aunque esté deshabilitado. |
isMenuButton | boolean | Añade un icono que indica que el botón abre un menú. | |
indicatorPosition | 'before' | 'after' | 'after' | La posición del indicador de menú respecto al contenido del botón. |
indicatorIcon | Snippet | Component | El icono que indica que el botón abre un menú. | |
| HTML Attributes |
Botón dividido
Un split button es un tipo especial de botón que combina un botón estándar con un botón de menú para ofrecer a los usuarios una acción principal y opciones adicionales.
Uso
<script>
import { SplitButton } from 'fluentui-svelte';
</script>
<SplitButton menuTriggerProps={{ 'aria-label': 'More options' }} />
<SplitButton appearance="standard" menuTriggerProps={{ 'aria-label': 'More options' }} />
<SplitButton appearance="subtle" menuTriggerProps={{ 'aria-label': 'More options' }} />
<SplitButton shape="circular" menuTriggerProps={{ 'aria-label': 'More options' }} />
<SplitButton shape="circular" appearance="standard" menuTriggerProps={{ 'aria-label': 'More options' }} />
<SplitButton shape="circular" appearance="subtle" menuTriggerProps={{ 'aria-label': 'More options' }} />Agregar un menú
Para agregar un menú al split button, consulta la documentación de Menu para ver cómo crear menús y pasarlos como prop al componente SplitButton.
Propiedades del componente
| Name | Type | Default | Description |
|---|---|---|---|
appearance | 'accent' | 'standard' | 'subtle' | 'accent' | Ambos botones pueden tener su contenido y sus bordes estilizados para dar mayor énfasis o para verse más sutiles. |
shape | 'circular' | 'rounded' | 'square' | 'rounded' | Ambos botones pueden ser redondeados, circulares o cuadrados. |
disabled | boolean | false | Deshabilita la interacción del usuario en ambos botones. |
primaryButtonProps | ButtonProps | Las props que se aplican al botón primario. | |
menuTriggerProps | ButtonProps | Las props que se aplican al botón que abre el menú. Solo muestra una flecha, así que dale un aria-label. | |
wrapperRef bindable | HTMLDivElement | null | La referencia del DOM del elemento que envuelve ambos botones. | |
primaryButtonRef bindable | HTMLButtonElement | null | La referencia del DOM del botón primario. | |
menuTriggerRef bindable | HTMLButtonElement | null | La referencia del DOM del botón que abre el menú. | |
| HTML Attributes |