Socket
Socket
Sign inDemoInstall

aurelia-split-pane

Package Overview
Dependencies
0
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

aurelia-split-pane

A custom element for resizable split panes.


Version published
Maintainers
1
Weekly downloads
23
increased by27.78%

Weekly downloads

Readme

Source

aurelia-split-pane

npm License

A custom element for resizable split panes.

A running demonstration can be found here.

Browser Support

Tested to work on the following browser versions:

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Opera
Opera
Edge29+32+20+

Installation

Install the package via npm:

npm install --save aurelia-split-pane

Install the plugin in your Aurelia project:

export function configure(aurelia: Aurelia): void {
    aurelia.use.plugin(PLATFORM.moduleName('aurelia-split-pane'));
}

Import the Sass stylesheet:

@import '~aurelia-split-pane/style';

Usage

The demo contains two simple usage examples.

Below are a couple of simple examples:

<split-pane direction="horizontal">
  <div>Left</div>
  <div>Right</div>
</split-pane>
<split-pane direction="vertical" style="height: 500px; text-align: center;">
  <div>North</div>
  <split-pane direction="horizontal">
    <div>West</div>
    <div>Center</div>
    <div>East</div>
  </split-pane>
  <div>South</div>
</split-pane>
Usage with Viewports

Viewport configurations are an effective way of decoupling sections of your application, and can be used in conjunction with aurelia-split-pane, where each pane is effectively a viewport. An example of a message inbox, where the list of contacts and list of messages are both distinct viewports, is available here. The inbox view demonstrates how to use the <router-view> element as a pane within a <split-pane> element. Aurelia team member Matthew James Davis has an article providing an in-depth look into viewports, found here.

Contributing

Bug reports and pull requests are welcome on GitHub.

License

This project is available under the terms of the ISC license. See the LICENSE file for the copyright information and licensing terms.

Keywords

FAQs

Last updated on 03 Jun 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc