Popover
O componente Popover nos permite mostrar mais elementos dentro de uma caixa flutuante.
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;O componente é composto por um caixa flutuante com setas indicativas e paddings opcionais.
Utilizamos esse componente quando precisamos mostrar componentes adicionais para fornecer mais informações ou contexto dentro de uma visualização sem usar espaço visível.
Essas informações devem ser secundárias e não essenciais, pois permanecerão ocultas até que o usuário interaja com o popover.
Também podemos usá-lo quando precisamos fornecer uma lista de ações para um determinado componente e não temos espaço para incluí-las nele.
O uso das setas e recomendado para fazer referência entre o Popover e o componente que o exibe, devendo ser utilizado quando esse vínculo não fica claro a primeira vista.
Podemos configurar o padding de acordo com o componente escolhido para estar dentro do Popover, por exemplo se o elemento inserido já tem padding podemos desativar essa funcionalidade.
- Exibir lista de produtos dentro de um pedido
- Exibir listas de ações complementares
- Exibir conteúdo relacionado a novas features
- Tooltip - Pode ser usado para dar ao usuário dicas rápidas relacionadas a algum elemento da tela.
Instale o 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" }' |