Saltar al contenido principal

ActionSheet

Una ActionSheet es un componente dinámico de nuestra biblioteca que ofrece a los usuarios un menú de opciones o acciones dentro de una aplicación. Por lo general, aparece como un modal o una ventana emergente, que presenta una lista de opciones relevantes para el contexto actual o la interacción del usuario. Las hojas de acción permiten a los usuarios tomar decisiones o iniciar acciones específicas de manera conveniente, mejorando la usabilidad y la eficiencia. Con un estilo personalizable y configuraciones flexibles, nuestro componente ActionSheet se integra a la perfección en diversas interfaces, lo que permite a los usuarios una navegación e interacción intuitivas.

Uso

Uso básico

import React, {useState} from 'react';
import {ActionSheet} from 'rn-inkpad';

const MyComponent = () => {
const [isVisible, setIsVisible] = useState(false);

return <ActionSheet setVisible={setIsVisible} visible={isVisible} />;
};

Props

NombreTipoRequeridoDescripción
visiblebooleanSIMuestra/Oculta el ActionSheet
setVisible(visible: boolean) => voidSIFunción que controla la visibilidad del componente
actionsAction[]NOArreglo de acciones a mostrar
cancelTextstringNOTexto para el botón cancelar
descriptionstringNOTexto de descripción para el ActionSheet
showCancelButtonbooleanNOMuestra el botón cancelar button
showIconOnIosbooleanNOMuestra el ícono en iOS
showCloseButtonbooleanNOMuestra el botón cerrar button
themeActionSheetThemeNOPersonaliza el tema de tu ActionSheet.
titlestringNOTítulo para tu ActionSheet.

Action props

NombreTipoRequeridoDescripción
textstringSITexto del botón.
iconstringNOÍcono del botón.
iconColorstringNOColor del ícono.
textStyleStyleProp<TextStyle>NOEstilos personalizados para el botón.
onPress() => voidSIFunción que se ejecuta al presionar el botón.

ActionSheetTheme props

NombreTipoPredeterminado iOSPredeterminado Android
appearance'light' | 'dark'SistemaSistema
backgroundColorstringClaro: '#F4F4F4' Oscuro: '#171717'Claro: '#FFFFFF' Oscuro: '#171717'
buttonColorstringClaro: '#FFFFFF' Oscuro: '#242625'Claro: '#FFFFFF' Oscuro: '#171717'
closeBackgroundColorstringClaro: '#ECECEC' Oscuro: '#1C1E1D'Claro: '#ECECEC' Oscuro: '#1C1E1D'
closeIconColorstringClaro: '#767779' Oscuro: '#959394'Claro: '#767779' Oscuro: '#959394'
separatorColorstringClaro: '#E4E4E4' Oscuro: '#343434'N/A
textColorstringClaro: '#0A0A0A' Oscuro: '#FFFFFF'Claro: '#0A0A0A' Oscuro: '#FFFFFF'
theme'cupertino' | 'material'SistemaSistema

Uso con props

import React, {useState} from 'react';
import {ActionSheet} from 'rn-inkpad';

const MyComponent = () => {
const [isVisible, setIsVisible] = useState(false);

return (
<ActionSheet
actions={[
{
text: 'Change profile picture',
icon: 'ear',
onPress: () => console.log('Change profile picture'),
},
{
text: 'View profile picture',
icon: 'eye',
onPress: () => console.log('View profile picture'),
},
{
text: 'View status',
icon: 'bandage',
onPress: () => console.log('View status'),
},
]}
setVisible={setIsVisible}
description="Select any action below to proceed"
title="Select an action"
visible={isVisible}
/>
);
};

Ejemplos

iOS

Android