@zeedhi/zd-split-pane-vue

Componente Split Pane para Zeedhi

O ZdSplitPane é um componente de painéis divididos para ser usado com o Zeedhi Next

Instalação

O ZdSplitPane é composto pelos pacotes @zeedhi/zd-split-pane-avatar-common e @zeedhi/zd-split-pane-vue. Utilize o comando abaixo para instalar ambos automaticamente:

npm install @zeedhi/zd-split-pane

Para registrá-lo, adicione o seguinte código ao inicializar a aplicação (por exemplo no arquivo zeedhi.ts)

import Vue from 'vue';
import { ZdSplitPane } from '@zeedhi/zd-split-pane';
//import { ZdSplitPane } from '@zeedhi/zd-split-pane-vue'; caso tenha instalado os pacotes separadamente

Vue.component('ZdSplitPane', ZdSplitPane);

Uso Básico

{
	"name": "basicUsageResult",
    "component": "ZdSplitPane",
    "nested": true,
    "panes": [
      {
        "classes": "panel-1",
        "children":[
          {
            "name": "listBasicUsage",
            "component": "ZdList",
            "items": [
              {
                "name": "drinks",
                "component": "ZdListGroup",
                "title": "Drinks",
                "prependIcon": "beer",
                "items": [
                  {
                    "name": "wine",
                    "component": "ZdListItem",
                    "title": "Wine",
                    "prependIcon": "glass-wine"
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "classes": "panel-2",
        "children":[
          {
            "name": "basicUsageTable",
            "component": "ZdTable",
            "columns": [
              {
                "name": "id",
                "label": "ID"
              },
              {
                "name": "name",
                "label": "Name"
              },
              {
                "name": "phone",
                "label": "Phone"
              }
            ],
            "datasource": {
              "uniqueKey": "id",
              "data": [
                {
                  "id": 1,
                  "name": "Mose",
                  "phone": "627-670-6527"
                },
                {
                  "id": 2,
                  "name": "Pearline",
                  "phone": "1-557-339-8479 x15835"
                }
              ]
            }
          }
        ]
      }
    ]
}

Para utilizá-lo em um Metadata, basta definir a propriedade component como ZdSplitPane.

Propriedades

Nome	Tipo	Default	Descrição
classes	string	undefined	Suporte de classe personalizado. Pode ser enviado para ZdSplitPane ou Pane.
height	string	auto	Altura do ZdSplitPane.
nested	boolean	false	Define se o ZdSplitPane vai ser aninhado.
panes	IPane[]	[{}]	Painéis que compõem o ZdSplitPane.
resizerWidth	string	15px	Largura/altura dos redimensionadores. Válido para orientação horizontal e vertical.
split	'horizontal | vertical'	horizontal	Orientação do ZdSplitPane.
width	string	100%	Largura do ZdSplitPane.

Propriedades Pane

Nome	Tipo	Default	Descrição
children	IComponentRender[]	15px	Componentes que serão renderizados dentro de cada painel.
classes	string	auto	Suporte de classe personalizado. Pode ser enviado para ZdSplitPane ou Pane.
initHeight	string	undefined	Altura inicial do painel.
initWidth	string	undefined	Largura inicial do painel.