@zeedhi/zd-timeline-vue

Componente Timeline para Zeedhi

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

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

Instalação

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

import { ZdTimeline, ZdTimelineItem } from '@zeedhi/zd-timeline-vue';

Vue.component('ZdTimeline', ZdTimeline);
Vue.component('ZdTimelineItem', ZdTimelineItem);

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

Uso Básico

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

{
  "name": "timeline-example",
  "component": "ZdTimeline",
  "items": [
    {
      "name": "item1BasicUsage",
      "component": "ZdTimelineItem",
      "children": [
        {
          "name": "text1BasicUsage",
          "component": "ZdText",
          "tag": "p",
          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        }
      ]
    },
    {
      "name": "item2BasicUsage",
      "component": "ZdTimelineItem",
      "children": [
        {
          "name": "text2BasicUsage",
          "component": "ZdText",
          "cssClass": "text-right",
          "tag": "p",
          "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        }
      ]
    }
  ]
}

Propriedades

Nome	Tipo	Default	Descrição
alignTop	boolean	false	Alinha os items ao topo do dot
dense	boolean	false	Desativa a capacidade de abrir o componente.
items	ITimelineItem[]	[]	Forçará o conteúdo dos componentes a renderizar on mounted.
reverse	boolean	false	Altera o layout para exibição em tela cheia.

Propriedades TimelineItem

Nome	Tipo	Default	Descrição
color	string	primary	Aplica a cor especificada ao controle.
fillDot	boolean	false	Remove o padding do dot.
hideDot	boolean	false	Ocultar a exibição do dot no timeline.
icon	string	undefined	Especifique o ícone para o contêiner do dot.
iconColor	string	undefined	Aplica a cor especificada ao icone.
large	boolean	false	Define um tamanho grande ao dot.
left	boolean	false	Altera o layout para exibição em tela cheia.
right	boolean	false	Altera o layout para exibição em tela cheia.
small	boolean	false	Define um tamanho pequeno ao dot.
iconSlot	IComponentRender[]	[]	Renderiza componentes dentro do dot.
oppositeSlot	IComponentRender[]	[]	Renderiza componentes a frente do dot.

---