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.
Popover
| Name | Type | Default | Description |
|---|---|---|---|
children* | React.ReactNode | ((data: { open: boolean, setVisibility: (visibility: boolean) => void }) => React.ReactNode); | An HTML element, or a function that returns one. It's used to set the position of the popover. | |
content* | React.ReactNode | The content of the popover. | |
visible | boolean | If true, the component is shown. | |
onVisibility | (visible: boolean) => void; | Function to control popover opening and closing. | |
arrow | boolean | 'true' | Conditional for displaying the popover arrow. |
matchReferenceWidth | boolean | A common feature of select dropdowns is that the dropdown matches the width of the reference regardless of its contents. | |
position | 'bottom' | 'bottom' | Position of the popover. |
enabledHover | boolean | Adds hover event listeners that change the open state, like CSS :hover. | |
enabledClick | boolean | 'true' | Adds click event listeners that change the open state. |
enabledDismiss | boolean | 'true' | Adds listeners that dismiss (close) the floating element. |
offset | number | '10' | Offest displaces the floating element from its core placement along the specified axes. |
width | string | 'fit-content' | The width property specifies the width of a popover's content area. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value" }' |
maxWidth | string | The maxWidth property specifies the maximum width of a popover's content area. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
height | string | The height property specifies the height of a popover's content area. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
zIndex | '100' | The zIndex property specifies the stack order of the popover. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value" }' | |
backgroundColor | 'danger-surfaceHighlight' | 'neutral-background' | The backgroundColor property sets the background color of the popover. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value" }' |
color | 'danger-surfaceHighlight' | 'neutral-background' | The color property is used to set the color of the popover. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value" }' |
padding | 'base' | 'base' | The padding properties are used to generate space around an popover's content area. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value" }' |
overflow | 'auto' | The overflow shorthand property sets the desired behavior for an popover's content overflow. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value" }' |