September 23, 2022

Angular Splitter That Can Drag Responsive Layout Library

An angular splitter can pull a responsive layout, and also works as a notes layout on Mac.

how to divide the page into two parts horizontally vertically, split screen slider, angular split pane example, angular material split pane, split screen in angular, angular split screen resizable

How to make use of it:

Installation:

git clone https://github.com/guguji5/angular-splitter.git
cd angular-splitter
npm install
ng serve --open

simple demo:

<tam-splitter splitterBarWidth=3 [direction]="horizontal" (sizeChange)="sizeChange($event)">
    <tam-splitter-panel [size]="20" [max]="30" [min]="10"
        [visible]=true (collapsedChange)="collapsedChange($event)">
        Refined By Panel
    </tam-splitter-panel>
    <tam-splitter-panel  [size]="30" [max]="50" [min]="20">
        Side List Panel
    </tam-splitter-panel>
    <tam-splitter-panel [size]="50" [max]="70" [min]="20">
        Preview Panel
    </tam-splitter-panel>
</tam-splitter>

nested demo:

<tam-splitter splitterBarWidth=3>
    <tam-splitter-panel [size]="20" [max]="30" [min]="10" (collapsedChange)="collapsedChange($event)">
        Refined By Panel
    </tam-splitter-panel>
    <tam-splitter-panel [size]="80">
        <tam-splitter splitterBarWidth=3 [direction]="'vertical'">
            <tam-splitter-panel [size]="30" [max]="40" [min]="20">
                Side List Panel
            </tam-splitter-panel>

            <tam-splitter-panel [size]="70" [max]="80" [min]="60">
                Preview Panel
            </tam-splitter-panel>
        </tam-splitter>
    </tam-splitter-panel>
</tam-splitter>

Responsive Split Layout, angular splitter Plugin/Github, split screen angular template, responsive split screen with angular, angular split demo


See Demo And Download

Official Website(guguji5): Click Here

This superior jQuery/javascript plugin is developed by guguji5. For extra Advanced usage, please go to the official website.

Share

You may also like...

Leave a Reply

Your email address will not be published.