Componente Dashbord Grid para Zeedhi
Instalação | Uso Básico | Propriedades |
O component zd-dashboard-grid é um dashbaord onde os cards são posicionados em um grid
Instalação
Para instalar o pacote basta rodar o seguinte comando:
npm i @zeedhi/zd-dashboard-grid
Com isso, dois pacotes serão instalados: o @zeedhi/zd-dashboard-grid-common e o @zeedhi/zd-dashboard-grid-vue.
Após a instalação, é necessário que você importe o pacote @zeedhi/zd-dashboard-grid-vue dentro de seu arquivo de configuração zeedhi.ts
import ZdDashboardGrid from '@zeedhi/zd-dashboard-grid-vue';
Vue.component('ZdDashboardGrid', ZdDashboardGrid);Já o pacote @zeedhi/zd-dashboard-grid-common deve ser importado no arquivo controller do componente.
Uso Básico
Para usar, defina a propriedade component como 'ZdDashboardGrid'.
{
"name": "dashboard-grid-example",
"component": "ZdDashboardGrid"
}Propriedades
| Nome | Tipo | Default | Descrição |
|---|---|---|---|
| autoSize | boolean | true | Define se a altura do contêiner deve se redimencionar em relação ao conteúdo |
| breakPoints | BreakpointsSizes | { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 } | Define os pontos de interrupção definidos para layout responsivo, o parâmetro representa a largura de diferentes dispositivos: lg, md, sm, xs. Define as larguras nas quais o número da coluna muda |
| cardFooterSlot | IComponentRender[] | '' | Lista de componentes para substituir o rodapé default dos cards em modo de edição |
| cards | IDashboardGridItem[] | [] | Define os cartões do dashboard |
| colNum | number | 12 | Define quantas colunas o grid terá |
| cols | BreakpointsSizes | { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 } | Define o número de colunas para cada ponto de interrupção |
| editHeader | IHeader | Header que é exibido quando estiver no modo de edição | |
| editingMode | boolean | false | Habilita o modo de edição |
| isBounded | boolean | false | Define se os cards da grade estão vinculados ao contêiner ao arrastar |
| isDraggable | boolean | false | Define se os cards das grades podem ser arrastáveis |
| isMirrored | boolean | false | Define se o RTL/LTR deve ser revertido |
| isResizable | boolean | false | Define se os cards das grades são redimensionáveis. |
| margin | Number[] | [10, 10] | Define a largura do componente. |
| maxRows | number | Define qual é o número máximo de linhas na grade. | |
| preventCollision | boolean | false | Define se os cards da grade se moverão ao serem arrastados |
| responsive | boolean | false | Define se o layout deve responder à largura da janela |
| responsiveLayouts | object | {} | Define o texto do botão que fecha o dashboard-grid |
| restoreOnDrag | boolean | false | Define se os cards da grade movidos devem ser restaurados depois que um card for arrastado |
| rowHeight | number | 150 | Define qual é a altura de uma única linha em pixels. |
| showEditHeader | boolean | string | true | Define se o Header deve ser exibido |
| showGridLines | boolean | false | Mostra o grid no dashboards |
| transFromScale | number | 1 | Define um fator de escala para o tamanho dos itens da grade, 1 é 100% |
| useCssTransform | boolean | true | Define se a propriedade transition-property: transform; do CSS deve ser usado |
| useSyleCursor | boolean | true | Define se a opção styleCursor como true. Ao arrastar congela, definir esse valor como falso pode aliviar os problemas. Esta propriedade não é reativa |
| verticalCompact | boolean | true | Define se o layout deve ser compacto verticalmente. |
Dashboard Grid Item
O dashboard grid item extende do componente ZdCard, além das propriedades do ZdCard também possui as propriedades listadas abaixo
| Nome | Tipo | Default | Descrição |
|---|---|---|---|
| dragAllowFrom | string | null | Define quais elementos do item devem acionar o evento de arrastar do item. |
| dragIgnoreFrom | string | a, button | Define quais elementos do item não devem acionar o evento de arrastar do item. |
| dragOption | object | {} | Objeto de passagem para o item de grade interact.js draggable configuration |
| h | number | Define qual é a altura inicial do card. O valor é um número que é multiplicado por rowHeight | |
| i | string | Este é o identificador exclusivo do card. | |
| isBounded | boolean | null | Define se os cards da grade estão vinculados ao contêiner ao arrastar |
| isDraggable | boolean | null | Define se os cards das grades podem ser arrastáveis |
| isResizable | boolean | null | Define se os cards das grades são redimensionáveis. |
| maxH | number | Infinity | Define qual é a altura máxima do card. Se h for maior que maxH, então h será definido como maxH. |
| maxW | number | Infinity | Define qual é a largura máxima do card. Se w for maior que maxW, então w será definido como maxW |
| minH | number | 1 | Define qual é a altura mínima do card. Se h for menor que minH, então h será definido como minH. O valor é um número que é multiplicado por rowHeight |
| minW | number | 1 | Define qual é a largura mínima do card. Se w for menor que minW, então w será definido como minW. O valor é um número que é multiplicado por colWidth |
| margin | Number[] | [10, 10] | Define a largura do componente. |
| maxRows | number | Define qual é o número máximo de linhas na grade. | |
| preserveAspectRatio | boolean | false | Se 'true', força o GridItem a preservar sua proporção ao redimensionar. |
| resizeIgnoreFrom | string | a, button | Define quais elementos do item não devem acionar o evento de redimensionamento do item. |
| resizeOption | object | {} | Objeto de passagem para o item de grade interact.js resizable configuration |
| w | number | Define qual é a largura inicial do card. O valor é um número que é multiplicado por colWidth | |
| x | number | Define qual é a posição horizontal inicial do card (em qual coluna ele deve ser colocado). | |
| y | number | Define qual é a posição vertical inicial do card (em qual linha ele deve ser colocado). |