SplitPanel

Painel com Split Horizontal e Vertical

• Framework: Angular v8.2.14
• Languague: TypeScript
• Style Library: Flexbox + CSS vanilla

Como usar?

• Instale o componente no seu projeto: npm i @viceri/split-panel --save

• Importe o modulo SplitPanelModule no modulo onde deseja utilizar o componente;

  • import { SplitPanelModule } from '@viceri/split-panel';

    import { AppComponent } from './app.component';
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { SplitPanelModule } from '@viceri/split-panel';
  
    @NgModule({
      declarations: [ AppComponent ],
      imports: [
        BrowserModule,
        SplitPanelModule
      ],
      bootstrap: [ AppComponent ]
    })
    export class AppModule { }

• No componente onde desejar utilizar o painel, declare a custom tag

  • <split-panel></split-panel>

    import { Component } from '@angular/core';
    @Component({
      selector: 'app-root',
      template: `
        <split-panel></split-panel>
      `,
      styles: ``
    })
    export class AppComponent {
    }

Inputs de Dados do Componente:

• withoutTitle: boolean = false; - true esconde os titulos e false (propriedade default) mostra os títulos;

• withShadow: boolean = false; - true adiciona a sombra false (propriedade default) remove a sombra;

• withHover: boolean = false - habilita a sombra ao passar o mouse por cima (hover) do painel, false por padrão

• title = { left: string, right: string } - objeto com duas propriedades, serve para configurar o título de cada painel;

• rightPanelColor: string - aceita um valor (string) em Hexadecimal (ex: #ffffff) para configurar a cor do painel do lado direito;

• leftPanelColor: string - aceita um valor (string) em Hexadecimal (ex: #ffff00) para configurar a cor do painel do lado esquerdo;

    import { Component } from '@angular/core';
  
    @Component({
      selector: 'app-root',
      template: `
        <split-panel
          rightPanelColor="#515151"
          leftPanelColor="#099987"
          [title]="titles"
          [withoutTitle]="true"
          [withShadow]="true"
          [withHover]="true"
        >
        </split-panel>
      `,
      styleUrls: ['./app.component.scss']
    })
    export class AppComponent {
      titles = {
        left: 'TypeScript',
        right: 'JavaScript'
      };
    }

• Utilizando os seletores left e right você consegue indicar onde cada conteúdo vai ser alocado:

    <split-panel
      rightPanelColor="#515151"
      leftPanelColor="#099987"
      [title]="titles"
      [withShadow]="true"
      [withoutTitle]="true"
      [withHover]="true"
    >
      <div left>
        <!-- conteúdo da esquerda aqui -->
      </div>
      <!-- -->
      <div right>
        <!-- conteúdo da direita aqui -->
      </div>
    </split-panel>

Preview

• O componente em telas grandes funciona com split horizontal e em telas menores na vertical: