webide_splitter 1.5.5

  • README.md
  • CHANGELOG.md
  • Installing
  • Versions
  • 69

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';
  
Version Uploaded Documentation Archive
1.5.5 Jan 3, 2018 Go to the documentation of webide_splitter 1.5.5 Download webide_splitter 1.5.5 archive
0.0.2 Oct 8, 2017 Go to the documentation of webide_splitter 0.0.2 Download webide_splitter 0.0.2 archive
0.0.1 Oct 8, 2017 Go to the documentation of webide_splitter 0.0.1 Download webide_splitter 0.0.1 archive

Analysis

We analyzed this package on Jun 12, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0-dev.60.0
  • pana: 0.11.3

Scores

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

Platforms

Detected platforms: web

Primary library: package:webide_splitter/webide_splitter.dart with components: html.

Suggestions

  • The description is too short.

    Add more detail about the package, what it does and what is its target use case. Try to write at least 60 characters.

  • Maintain an example.

    Create a short demo in the example/ directory to show how to use this package. Common file name patterns include: main.dart, example.dart or you could also use webide_splitter.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.24.0 <2.0.0
angular ^4.0.0 4.0.0+2 5.0.0-alpha+14
angular_components ^0.6.0 0.6.0 0.8.0
dart_to_js_script_rewriter ^1.0.1 1.0.3
Transitive dependencies
analyzer 0.30.0+4 0.32.1
angular_compiler 0.3.0+1 0.4.0-alpha+14
angular_forms 1.0.0 2.0.0-alpha+6
args 1.4.3
async 2.0.7
barback 0.15.2+16
build 0.11.2 0.12.6
build_barback 0.4.0+2 0.5.0+4
charcode 1.1.1
cli_util 0.1.3
code_builder 1.0.4 3.1.0
code_transformers 0.5.1+5
collection 1.14.10
convert 2.0.1
crypto 2.0.3
csslib 0.14.4
dart_style 1.0.9+1 1.0.14
fixnum 0.10.7
front_end 0.1.0-alpha.4.1 0.1.1
func 1.0.0
glob 1.1.5
html 0.13.3+1
intl 0.15.6
isolate 1.1.0 2.0.1
js 0.6.1
kernel 0.3.0-alpha.1.1 0.3.1
logging 0.11.3+1
matcher 0.12.2+1
meta 1.1.5
observable 0.20.4+3 0.22.1+3
package_config 1.0.3
path 1.6.0
perf_api 0.1.0
plugin 0.2.0+2
pool 1.3.5
quiver 0.25.0 0.29.0+1
quiver_hashcode 1.0.0
source_gen 0.7.5+1 0.8.1+3
source_maps 0.10.5
source_span 1.4.0
stack_trace 1.9.2
string_scanner 1.0.2
tuple 1.0.1
typed_data 1.1.5
utf 0.9.0+4
uuid 0.5.3 1.0.0
watcher 0.9.7+8
yaml 2.1.14
Dev dependencies
angular_test ^1.0.0
browser ^0.10.0
test ^0.12.0