Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tejainece/webide_splitter
A splitter component for Angular Dart
https://github.com/tejainece/webide_splitter
Last synced: about 2 months ago
JSON representation
A splitter component for Angular Dart
- Host: GitHub
- URL: https://github.com/tejainece/webide_splitter
- Owner: tejainece
- License: bsd-3-clause
- Created: 2017-10-08T20:04:00.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-01-03T19:57:27.000Z (about 7 years ago)
- Last Synced: 2023-08-20T23:29:26.030Z (over 1 year ago)
- Language: Dart
- Size: 813 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Splitter
Provides a splitter component for Angular Dart
# Demo
+ [Vertical layout](https://tejainece.github.com/webide_splitter/web/vertical)
+ [Horizontal layout](https://tejainece.github.com/webide_splitter/web/horizontal)
+ [Nested layout](https://tejainece.github.com/webide_splitter/web/nested)
# Simple example
```dart
@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'''
''',
directives: const [materialDirectives, Splitter],
providers: const [materialProviders],
)
class AppComponent {}
```
More examples:
+ [Vertical](https://github.com/tejainece/webide_splitter/tree/master/web/vertical)
+ [Horizontal](https://github.com/tejainece/webide_splitter/tree/master/web/horizontal)
+ [Nested](https://github.com/tejainece/webide_splitter/tree/master/web/nested)
# 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,
```css
.container {
display: flex;
flex-direction: row;
}
```
For horizontal layout,
```css
.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);
}
```