webide_splitter 1.5.5

Splitter #

Provides a splitter component for Angular Dart

Demo #

Simple example #

@Component(
  selector: 'my-app',
  styles: const [
    '''
    :host {
      display: block;
      width: 100%;
      height: 100%;
    }
    
    .container {
      width: 50%;
      height: 50%;
      display: flex;
      flex-direction: row;
      background-color: black;
    }
    
    .panel {
      height: 100%;
      width: calc((100% - 14px) / 3);
    }
    '''
  ],
  template: r'''
  <div class="container">
    <div class="panel first" style="background-color: red;"></div>
    <splitter></splitter>
    <div class="panel second" style="background-color: blue;"></div>
    <splitter></splitter>
    <div class="panel third" style="background-color: green;"></div>
  </div>
  ''',
  directives: const [materialDirectives, Splitter],
  providers: const [materialProviders],
)
class AppComponent {}

More examples:

Usage #

Parent #

Layout #

Parent must use flex layout. The direction of flex layout must be chosen depending on the orientation of the panel layout.

For vertical layout,

    .container {
      display: flex;
      flex-direction: row;
    }

For horizontal layout,

    .container {
      display: flex;
      flex-direction: column;
    }

Size #

Parent must have defined size.

    .container {
      width: 50%;
      height: 100%;
    }

Children/panels #

Children's tran-section size must fill the parent. Care must be taken that splitter's transaction size is deducted.

Children's cross-section size must fill the parent.

For vertical layout,

    .panel {
      height: 100%;
      width: calc((100% - 14px) / 3);
    }

For horizontal layout,

    .panel {
      width: 100%;
      height: calc((100% - 14px) / 3);
    }

Changelog #

1.5.5 #

  • Fixed bug in horizontal layout
  • Fixed jitters while resizing
  • Examples for horizontal and nested
  • Better README

0.0.2 #

  • pubspec fix

0.0.1 #

  • Working Splitter implementation

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  webide_splitter: ^1.5.5

2. Install it

You can install packages from the command line:

with pub:


$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:webide_splitter/webide_splitter.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
0
Health:
Code health derived from static analysis. [more]
--
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
--
Overall:
Weighted score of the above. [more]
0
Learn more about scoring.

The package version is not analyzed, because it does not support Dart 2. Until this is resolved, the package will receive a health and maintenance score of 0.

Analysis issues and suggestions

Support Dart 2 in pubspec.yaml.

The SDK constraint in pubspec.yaml doesn't allow the Dart 2.0.0 release. For information about upgrading it to be Dart 2 compatible, please see https://dart.dev/dart-2#migration.

Maintenance issues and suggestions

Make sure dartdoc successfully runs on your package's source files. (-10 points)

Dependencies were not resolved.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.24.0 <2.0.0