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.