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.
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.
Para usar, defina a propriedade component como 'ZdBottomSheet'.
{
"name": "bottom-sheet-example",
"component": "ZdBottomSheet"
}
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 |