Popover
El componente Popover nos permite mostrar más elementos dentro de una caja flotante.
import React from "react";
import { Box, Popover, Text } from "@nimbus-ds/components";
const Example: React.FC = () => (
<Box display="flex" justifyContent="center">
<Popover
content={
<Text color="primary-textLow">Replace me with your content</Text>
}
>
<Text>Click-Hover</Text>
</Popover>
</Box>
);
export default Example;Este componente se integra por una caja flotante con flechas indicadoras y padding opcional.
Usamos este componente cuando necesitamos mostrar elementos adicionales para destacar más información o extender contexto dentro de una visualización sin usar espacio visible.
Estas informaciones deben ser secundarias, no esenciales, ya que permanecerán ocultas hasta que la persona usuaria interactúe con el popover.
También podemos utilizarlo cuando necesitamos proveer una lista de acciones para un determinado componente y no tenemos espacio para incluirlas dentro de él.
El uso de las flechas es recomendado para referenciar al componente que lo exhibe, debiendo ser usado cuando ese vínculo no quede claro a simple vista.
Podemos configurar el padding de acuerdo con el componente escogido para integrar el Popover. Por ejemplo, si el componente ingresado ya tiene padding entonces podemos desactivar esa funcionalidad.
- Exhibir una lista de productos dentro de un pedido
- Exhibir listas de acciones complementarias
- Exhibir contenido relacionado a nuevas features
- Tooltip - Puede ser usado para dar tips rápidos relacionados a algún elemento de la pantalla.
Instalá el componente via terminal.
npm install @nimbus-ds/popoverAdditional props are passed to the <Popover> element. See div docs for a list of props accepted by the <Popover> element.