@zeedhi/zd-bottom-sheet

Componente BottomSheet para Zeedhi

Instalação   |    Uso Básico   |    Propriedades   |   

O component zd-bottom-sheet é uma caixa de diálogo que desliza da parte inferior da tela. O zd-bottom-sheet pode conter qualquer coisa.

Instalação

Para instalar o pacote basta rodar o seguinte comando:
npm i @zeedhi/zd-bottom-sheet
Com isso, dois pacotes serão instalados: o @zeedhi/zd-bottom-sheet-common e o @zeedhi/zd-bottom-sheet-vue.
Após a instalação, é necessário que você importe o pacote @zeedhi/zd-bottom-sheet-vue dentro de seu arquivo de configuração zeedhi.ts

import ZdBottomSheet from '@zeedhi/zd-bottom-sheet-vue';

Vue.component('ZdBottomSheet', ZdBottomSheet);

Já o pacote @zeedhi/zd-bottom-sheet-common deve ser importado no arquivo controller do componente.

Uso Básico

Para usar, defina a propriedade component como 'ZdBottomSheet'.

{
  "name": "bottom-sheet-example",
  "component": "ZdBottomSheet"
}

Propriedades

Nome	Tipo	Default	Descrição
contentClass	string	undefined	Aplica uma classe personalizada ao elemento desanexado. Isso é útil porque o conteúdo é movido para o início do componente v-app e não pode ser segmentado por classes passadas diretamente no componente.
disabled	boolean	false	Desativa a capacidade de abrir o componente.
eager	boolean	false	Forçará o conteúdo dos componentes a renderizar on mounted.
fullscreen	boolean	false	Altera o layout para exibição em tela cheia.
hideOverlay	boolean	false	Oculta a exibição do overlay.
inset	boolean	false	Reduz a largura máxima do conteúdo para 70%.
maxWidth	string | number	undefined	Define a largura máxima para o componente.
origin	string	center center	Define a origem da transição no elemento. Você pode encontrar mais informações na documentação do MDN para a origem da transição..
overlayColor	string	undefined	Define a cor do overlay.
overlayOpacity	number|string	undefined	define a opacidade do overlay.
persistent	boolean	false	Clicar fora do elemento ou pressionar a tecla esc não o desativará.
retainFocus	boolean	true	O foco da guia retornará ao primeiro filho da caixa de diálogo por padrão.
transition	string	bottom-sheet-transition	Define a transição do componente. Pode ser uma das transições incorporadas ou uma sua.
width	string | number	undefined	Define a largura do componente.
openButtonText	string	BOTTOM_SHEET_OPEN	Define o texto do botão que abre o bottom-sheet
closeButtonText	string	BOTTOM_SHEET_CLOSE	Define o texto do botão que fecha o bottom-sheet

---