@zeedhi/zd-split-pane-vue v1.0.2

Componente Split Pane para Zeedhi

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

Propriedades Pane