angular-split / angular-split Goto Github PK
View Code? Open in Web Editor NEW๐ Angular UI library to split views and allow dragging to resize areas using CSS flexbox layout.
Home Page: https://angular-split.github.io
License: Other
๐ Angular UI library to split views and allow dragging to resize areas using CSS flexbox layout.
Home Page: https://angular-split.github.io
License: Other
The latest version of angular-split is not compatible with Angular 5, which was released today. When starting the application, the following error can be seen:
Uncaught Error: Unexpected value 'AngularSplitModule' imported by the module 'QuestionnaireModule'. Please add a @NgModule annotation.
Hi,
I installed the angular-split via npm, and in my app.module.ts, I added the following... It worked at first, by simply adding <split-area [size]="30">...my code here ... <split-area [size]="70">...my code here ... . The screen separator works like a charm. But since I am using the sidebar component of Semantics UI which is my front-end framework, the split panel stopped working. My suspicion is that the sidebar automatically adds class="pusher" to the body tag after the sidebar is clicked on, and that conflicts with the angular-split.
Do you have any ideas on how to go about resolving this issue?
import { AngularSplitModule } from 'angular-split';
@NgModule({
imports: [
...
AngularSplitModule
...
],
I've got a page with a split separating it into two columns. The split-area for each column has a class "splitLeft" or "splitRight". These classes specify minimum and maximum width values for each split-area which will allow the split to only travel within an acceptable range. This is needed in my case in order to prevent sub columns in the right column from squashing together and becoming unusable. When the split reaches one of the assigned maximums or minimums it will stop visually moving in the direction you are dragging; however, it appears that the width value continues to be increased as long as you continue dragging your mouse. This means when you go to drag the split back the other direction you have to drag back the full amount you over-dragged previously plus what is visible on the screen.
If you have the maximum width set to 30px but don't release your mouse click until you've dragged to the 70px mark then the split will stop at 30px visually but the position of the split will be set at the 70px mark. If you then try to drag from the 30px mark to the 20px mark you will actually have to drag 50px to the left before the split visually is at the 20px point. Until you have dragged the 40px to make up the over-drag from 30px-70px earlier there will be no visual change to the split.
I have attempted to create a plunker to demonstrate the issue, but as this is the first time I've ever used plunker I'm not entirely sure this will work: https://plnkr.co/edit/2HllZ6zjhDKeC6EdrA96?p=preview
Hi,
I am referring to link https://bertrandg.github.io/angular-split/#/
<split direction="vertical">
<split-area [size]="25">
<p>Lorem ipsum dolor sit amet...</p>
</split-area>
<split-area [size]="75">
<p>Sed ut perspiciatis unde omnis iste natus erro...</p>
</split-area>
</split>
But still it doesn't work. It shows splitter component but it does not move when I try to slide
Kindly help.
My pacakge.json file package dependancies are as follows :
{
"dependencies": {
"@angular/common": "2.4.1",
"@angular/compiler": "2.4.1",
"@angular/core": "2.4.1",
"@angular/forms": "2.4.1",
"@angular/http": "2.4.1",
"@angular/platform-browser": "2.4.1",
"@angular/platform-browser-dynamic": "2.4.1",
"@angular/platform-server": "2.4.1",
"@angular/router": "3.4.1",
"@angularclass/conventions-loader": "1.0.2",
"@angularclass/hmr": "~1.2.2",
"@angularclass/hmr-loader": "~3.0.2",
"angular-split": "^0.1.15",
"angular2-highcharts": "^0.4.0",
"assets-webpack-plugin": "^3.4.0",
"core-js": "^2.4.1",
"http-server": "^0.9.0",
"ie-shim": "^0.1.0",
"ng2-translate": "^5.0.0",
"protractor": "^4.0.14",
"reflect-metadata": "^0.1.9",
"rxjs": "^5.0.2",
"zone.js": "~0.7.4"
},
"devDependencies": {
"@angular/compiler-cli": "2.4.1",
"@types/hammerjs": "^2.0.33",
"@types/jasmine": "^2.2.34",
"@types/node": "^6.0.38",
"@types/selenium-webdriver": "2.53.38",
"@types/source-map": "^0.5.0",
"@types/uglify-js": "^2.0.27",
"@types/webpack": "^1.12.34",
"angular2-template-loader": "^0.6.0",
"awesome-typescript-loader": "~3.0.0-beta.17",
"codelyzer": "~2.0.0-beta.4",
"copy-webpack-plugin": "^4.0.0",
"css-loader": "^0.26.0",
"exports-loader": "^0.6.3",
"expose-loader": "^0.7.1",
"file-loader": "^0.9.0",
"gh-pages": "^0.12.0",
"html-webpack-plugin": "^2.21.0",
"imports-loader": "^0.7.0",
"istanbul-instrumenter-loader": "1.2.0",
"json-loader": "^0.5.4",
"karma": "^1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.1.1",
"karma-jasmine": "^1.0.2",
"karma-mocha-reporter": "^2.0.0",
"karma-remap-coverage": "^0.1.4",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "1.8.0",
"node-sass": "^4.1.1",
"parse5": "^2.2.1",
"raw-loader": "0.5.1",
"rimraf": "~2.5.4",
"sass-loader": "^4.1.1",
"script-ext-html-webpack-plugin": "1.3.2",
"source-map-loader": "^0.1.5",
"string-replace-loader": "1.0.5",
"style-loader": "^0.13.1",
"to-string-loader": "^1.1.4",
"ts-helpers": "1.1.2",
"ts-node": "^2.0.0",
"tslint": "^4.0.0-dev.0",
"tslint-loader": "^3.3.0",
"typedoc": "^0.5.3",
"typescript": "2.0.10",
"url-loader": "^0.5.7",
"webpack": "2.1.0-beta.25",
"webpack-dev-middleware": "1.6.1",
"webpack-dev-server": "2.1.0-beta.9",
"webpack-md5-hash": "0.0.5",
"webpack-merge": "0.15.0"
},
"engines": {
"node": ">= 4.2.1",
"npm": ">= 3"
}
}
This error is caused because of version mismatch of packages.
So, can you please add angular/common, angular/compiler, angular/core, angular/platform-browser, core-js, rimraf, rxjs, reflect-metadata, typescript and zone.js as peerDependencies
The Visibility feature uses 'display: block' to show content at the moment.
Is it possible to use 'flex' instead?
I think, a choosable option would be the most gentle way...
I found this field, is it for the minimum size?
Hello!
I have two horizontal split areas. When i reduce the screen size to mobile, I want to remove the splitter and have these areas one below the other.
Any hint?
I am trying to build angular-split as npm package and local deploy to test it. I tried both aot and jit build, both generate es6. Do you have a custom build step to build es5? Also, is the NPM package aot build or jit build?
Please copy over readme.md from previous project
Angular 2 Kitchen sink: http://ng2.javascriptninja.io
and source@ https://github.com/born2net/Angular-kitchen-sink
Regards,
Sean
In my application I have a list of objects which is an @input(). Two components share this list. In one of them I'm modifying the list (adding / deleting elements) and in the second one I'm displaying the list in the following way:
<split-area *ngFor="let item of items">
{{item.name}}
</split-area>
When I add a new element to this list by using splice method (for instance I add a new element on 2nd position) the new element is displayed at the end of the list (instead of 2nd position).
I've checked if it works when I use *ngFor on a
Thanks in advance! :)
Is there any way to create an header/title feature with those behavior:
I did as your mention at https://bertrandg.github.io/angular-split/#/ and also check at https://plnkr.co/edit/tEjcXo?p=preview but not successfuly.
Do you have an example with angular quickstart, which is non cli?
Thank for your support.
I want to resize an split area dynamically from typescript is there any way??
My package.json file:
{
"name": "SampleApp",
"version": "0.0.0",
"description": "Description for SampleApp",
"private": true,
"license": "UNLICENSED",
"cacheDirectories": [
"node_modules"
],
"dependencies": {
"@angular/animations": "4.2.6",
"@angular/cdk": "^2.0.0-beta.8",
"@angular/common": "4.2.6",
"@angular/compiler": "4.2.6",
"@angular/core": "4.2.6",
"@angular/forms": "4.2.6",
"@angular/http": "4.2.6",
"@angular/material": "^2.0.0-beta.8",
"@angular/platform-browser": "4.2.6",
"@angular/platform-browser-dynamic": "4.2.6",
"@angular/router": "4.2.6",
"@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.28",
"angular-split": "^0.2.2",
"angular2-perfect-scrollbar": "^2.0.6",
"bootstrap": "4.0.0-alpha.6",
"chart.js": "^2.6.0",
"core-js": "2.4.1",
"css-ripple-effect": "^1.0.5",
"font-awesome": "4.7.0",
"hammerjs": "^2.0.8",
"jquery": "3.2.1",
"jquery-ui-bundle": "^1.12.1",
"moment": "^2.18.1",
"ng-jhipster": "0.2.7",
"ng2-webstorage": "1.8.0",
"ngx-cookie": "1.0.0",
"ngx-infinite-scroll": "0.5.1",
"primeng": "^4.1.2",
"reflect-metadata": "0.1.10",
"rxjs": "5.4.2",
"swagger-ui": "2.2.10",
"tether": "1.4.0",
"uglify-js": "^3.0.28",
"zone.js": "0.8.13"
},
"devDependencies": {
"@angular/cli": "1.2.0",
"@angular/compiler-cli": "4.2.6",
"@types/jasmine": "2.5.53",
"@types/node": "8.0.13",
"angular2-template-loader": "0.6.2",
"awesome-typescript-loader": "3.2.1",
"browser-sync": "2.18.12",
"browser-sync-webpack-plugin": "1.2.0",
"codelyzer": "3.1.2",
"copy-webpack-plugin": "4.0.1",
"css-loader": "0.28.4",
"exports-loader": "0.6.4",
"extract-text-webpack-plugin": "3.0.0",
"file-loader": "0.11.2",
"generator-jhipster": "4.6.2",
"html-loader": "0.4.5",
"html-webpack-plugin": "2.29.0",
"jasmine-core": "2.6.4",
"karma": "1.7.0",
"karma-chrome-launcher": "2.2.0",
"karma-coverage": "1.1.1",
"karma-intl-shim": "1.0.3",
"karma-jasmine": "1.1.0",
"karma-junit-reporter": "1.2.0",
"karma-notify-reporter": "1.0.1",
"karma-phantomjs-launcher": "1.0.4",
"karma-remap-istanbul": "0.6.0",
"karma-sourcemap-loader": "0.3.7",
"karma-webpack": "2.0.4",
"merge-jsons-webpack-plugin": "1.0.8",
"ngc-webpack": "3.0.0",
"phantomjs-prebuilt": "2.1.14",
"proxy-middleware": "0.15.0",
"rimraf": "2.6.1",
"sourcemap-istanbul-instrumenter-loader": "0.2.0",
"string-replace-webpack-plugin": "0.1.3",
"style-loader": "0.18.2",
"to-string-loader": "1.1.5",
"tslint": "5.5.0",
"tslint-loader": "3.5.3",
"typescript": "2.4.1",
"sass-loader": "6.0.6",
"node-sass": "4.5.3",
"postcss-loader": "2.0.6",
"xml2js": "0.4.17",
"webpack": "3.3.0",
"webpack-dev-server": "2.5.1",
"webpack-merge": "4.1.0",
"webpack-notifier": "1.5.0",
"webpack-visualizer-plugin": "0.1.11",
"web-app-manifest-loader": "0.1.1",
"write-file-webpack-plugin": "4.1.0"
},
"engines": {
"node": ">=6.9.0"
},
"scripts": {
"lint": "tslint --type-check --project './tsconfig.json' -e 'node_modules/**'",
"lint:fix": "yarn run lint -- --fix",
"ngc": "ngc -p tsconfig-aot.json",
"cleanup": "rimraf target/{aot,www}",
"clean-www": "rimraf target//www/app/{src,target/}",
"start": "yarn run webpack:dev",
"webpack:dev": "yarn run webpack-dev-server -- --config webpack/webpack.dev.js --progress --inline --hot --profile --port=9060",
"webpack:build:main": "yarn run webpack -- --config webpack/webpack.dev.js --progress --profile",
"webpack:build": "yarn run cleanup && yarn run webpack:build:main",
"webpack:prod:main": "yarn run webpack -- --config webpack/webpack.prod.js --progress --profile",
"webpack:prod": "yarn run cleanup && yarn run webpack:prod:main && yarn run clean-www",
"webpack:test": "yarn run test",
"webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"webpack": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js",
"test": "karma start src/test/javascript/karma.conf.js",
"test:watch": "yarn test -- --watch",
"postinstall": "node node_modules/phantomjs-prebuilt/install.js"
}
}
Note: After implementation of angular-split I am unable to run package in prod. I am getting the below error.
[ERROR] Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 194:50 in the original .ts file), resolving symbol NgModule in /home/SampleApp/node_modules/angular-split/node_modules/@angular/core/core.d.ts, resolving symbol AngularSplitModule in /home/SampleApp/node_modules/angular-split/dist/angularSplit.module.d.ts, resolving symbol AngularSplitModule in /home/SampleApp/node_modules/angular-split/dist/angularSplit.module.d.ts
Please help me out.
Is not working when opened from a modal
Just installed npm install angular-split --save.
added the following lines
'angular-split': 'node_module/angular-split/dist/index.js'
, 'angular-split': {
main: './index.js',
defaultExtension: 'js'
}
in my app.module.ts,
I added
import { AngularSplitModule } from 'angular-split';
@NgModule({
imports: [
BrowserModule
, HttpModule
, FormsModule
, SelectModule
, ReactiveFormsModule
, AngularSplitModule
// , SplitPaneModule
, DropdownTreeviewModule.forRoot()
, AgGridModule.withComponents([])
],
I get the runtime error :
http://localhost:3000/node_module/angular-split/dist/index.js 404 (Not Found)
Error loading http://localhost:3000/node_module/angular-split/dist/index.js as "angular-split" from http://localhost:3000/app/app.module.js
Even though, I have the file:
$ls node_modules/angular-split/dist/index.js
node_modules/angular-split/dist/index.js
less node_modules/angular-split/dist/index.js
export { AngularSplitModule } from './angularSplit.module';
export { SplitComponent } from './split.component';
export { SplitAreaDirective } from './splitArea.directive';
export { SplitGutterDirective } from './splitGutter.directive';
//# sourceMappingURL=index.js.map
Am I doing anything wrong?
Hi,
Im trying to format the splitgutter to own color and more, but with no success. :S
split-gutter {
background-image: none !important;
background-color: #123456 !important;
}
Any suggestions on how to make this possible?
BR
Just installed npm install angular-split --save
Hello
Thank you for component.
Could you change != 100 behavior like
for example:
Component width = 600
Left panel width = 100
Right panel width = "AUTO" or "*" (real size of right panel will be 500)
Thank you again
Hi, after changing the direction of the application from ltr
to rtl
your component isn't working as expected. Did you consider to support RTL-direction? Would be great. Thanks.
If one split-area is not visible, the sum of the elements is not 100 after your resize one. Furthermore you can't really resize elements.
https://plnkr.co/edit/upigdyZdAJ7QzI784JE4?p=preview
If you try to drag the last gutter to the right, it's not possible and the size of the last element keeps "33.33" even if you drag it to the left.
I am having the issue that traceur could not be loaded after importing the library (HTTP 404):
In mappings in system.config.js I have the following to define the angular-split as per manual:
'angular-split': 'node_modules/angular-split/dist/index.js
traceur is not even referenced as dependency anywhere in my project, not sure why I get this error
https://bertrandg.github.io/angular-split/#/examples
The doc says:
Simple horizontal split
but in the example it is:
<split direction="vertical">
in the actual code it is:
direction="horizontal"
Same Problem for the second example.
On Safari, if we have a div
inside split-area
and set its height
to 100%
, its height
be will the same as the height
of split
instead of split-area
. Therefore the div
could just overflow the split-area
. This does not happen on Chrome.
To demonstrate the problem, I have forked the site examples and here is the code snippet:
Build the site and open it in Safari and Chrome, you will see the difference.
I use systemjs for load node module, can't have angulars-split working.
Got following runtime error:
zone.js:232 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost/cmstrunk/angular-split
Error: XHR error (404 Not Found) loading http://localhost/cmstrunk/angular-split
at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost/CMStrunk/node_modules/zone.js/dist/zone.js:698:29)
at ZoneDelegate.invokeTask (http://localhost/CMStrunk/node_modules/zone.js/dist/zone.js:265:35)
at Zone.runTask (http://localhost/CMStrunk/node_modules/zone.js/dist/zone.js:154:47)
at XMLHttpRequest.ZoneTask.invoke (http://localhost/CMStrunk/node_modules/zone.js/dist/zone.js:335:33)
Error loading http://localhost/cmstrunk/angular-split as "angular-split" from http://localhost/cmstrunk/js/ngWidgets/igxroot.module.js
at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost/CMStrunk/node_modules/zone.js/dist/zone.js:698:29)
at ZoneDelegate.invokeTask (http://localhost/CMStrunk/node_modules/zone.js/dist/zone.js:265:35)
at Zone.runTask (http://localhost/CMStrunk/node_modules/zone.js/dist/zone.js:154:47)
at XMLHttpRequest.ZoneTask.invoke (http://localhost/CMStrunk/node_modules/zone.js/dist/zone.js:335:33)
Error loading http://localhost/cmstrunk/angular-split as "angular-split" from
localhost/cmstrunk is the app url.
AOT compile run into following error:
[08:49:15] Error: Command failed: "node_modules\.bin\ngc" -p tsconfig.json
can't resolve module D:/ProductDev_TF/CMS_Trunk/CMS_Site/node_modules/angular-split/node_modules/@angular/core/src/di/reflective_key.d.ts from D:/Prod
uctDev_TF/CMS_Trunk/CMS_Site/node_modules/angular-split/node_modules/@angular/core/src/di/reflective_key.d.ts
Error: can't find symbol KeyRegistry exported from module D:/ProductDev_TF/CMS_Trunk/CMS_Site/node_modules/angular-split/node_modules/@angular/core/sr
c/di/reflective_key.d.ts
at ReflectorHost.findDeclaration (D:\ProductDev_TF\CMS_Trunk\CMS_Site\node_modules\@angular\compiler-cli\src\reflector_host.js:173:23)
at D:\ProductDev_TF\CMS_Trunk\CMS_Site\node_modules\@angular\compiler-cli\src\codegen.js:137:46
at Array.forEach (native)
at extractProgramSymbols (D:\ProductDev_TF\CMS_Trunk\CMS_Site\node_modules\@angular\compiler-cli\src\codegen.js:120:10)
at CodeGenerator.codegen (D:\ProductDev_TF\CMS_Trunk\CMS_Site\node_modules\@angular\compiler-cli\src\codegen.js:57:29)
at codegen (D:\ProductDev_TF\CMS_Trunk\CMS_Site\node_modules\@angular\compiler-cli\src\main.js:7:81)
at Object.main (D:\ProductDev_TF\CMS_Trunk\CMS_Site\node_modules\@angular\tsc-wrapped\src\main.js:30:16)
at Object.<anonymous> (D:\ProductDev_TF\CMS_Trunk\CMS_Site\node_modules\@angular\compiler-cli\src\main.js:16:9)
at Module._compile (module.js:541:32)
at Object.Module._extensions..js (module.js:550:10)
Compilation failed
at ChildProcess.exithandler (child_process.js:207:12)
at emitTwo (events.js:106:13)
at ChildProcess.emit (events.js:191:7)
at maybeClose (internal/child_process.js:852:16)
at Socket.<anonymous> (internal/child_process.js:323:11)
at emitOne (events.js:96:13)
at Socket.emit (events.js:188:7)
at Pipe._handle.close [as _onclose] (net.js:492:12)
I am using version 0.1.15
Any help is appreciated.
Arnold
Using the horizontal split I don't see the gutter. If I use the vertical split I see the gutter but can't move it.
The only way I can get it to show up and work is by changing the height in the generated element style for the split tag from 100% to 300px. (I found this using firebug.) I've tried adding height to the parent but it made no difference.
In the other split issue an you suggested:
Set it to specific height in pixels: height: 300px, what I did here: https://bertrandg.github.io/angular-split/#/examples . I couldn't find height this in the example.
I'm using angular-cli 1.0.0-beta.25.5.
Hello,
In our angular2 application we use webpack. I'm trying to install angular-split. In my app.module I imported AngularSplitModule and added it to imports in the same way as in your examples. I get the following error in the console:
"Unexpected value 'AngularSplitModule' imported by the module 'AppModule"
My package json dependencies looks like that:
"dependencies": {
"@angular/common": "2.4.4",
"@angular/compiler": "2.4.4",
"@angular/core": "2.4.4",
"@angular/forms": "2.4.4",
"@angular/http": "2.4.4",
"@angular/platform-browser": "2.4.4",
"@angular/platform-browser-dynamic": "2.4.4",
"@angular/router": "3.4.4",
"@google-cloud/speech": "0.6.0",
"angular-in-memory-web-api": "0.3.1",
"angular-modal-gallery": "^2.0.2",
"angular-split": "^0.2.0",
"angular2-modal": "^2.0.3",
"angular2-moment": "^1.3.3",
"animate.css": "3.5.1",
"app-module-path": "1.1.0",
"async": "2.1.4",
"awesome-typescript-loader": "3.0.0-beta.9",
"bcrypt-nodejs": "0.0.3",
"bluemix-objectstorage": "0.1.2",
"body-parser": "1.16.0",
"bootstrap": "4.0.0-alpha.4",
"bootstrap-loader": "2.0.0-beta.20",
"bpmn-js": "^0.19.0",
"browser-sync": "2.18.6",
"cfenv": "1.0.3",
"chalk": "1.1.3",
"collections": "5.0.6",
"compression": "1.6.2",
"config": "1.24.0",
"connect-multiparty": "2.0.0",
"cookie-session": "1.2.0",
"core-js": "2.4.1",
"csurf": "1.9.0",
"csvtojson": "1.1.2",
"curlrequest": "1.0.1",
"debug": "2.6.0",
"decompress": "4.0.0",
"dotenv": "2.0.0",
"ejs": "2.5.5",
"errorhandler": "1.5.0",
"express": "4.14.0",
"express-flash": "0.0.2",
"express-session": "1.15.0",
"express-status-monitor": "0.1.9",
"express-validator": "2.21.0",
"fluent-ffmpeg": "2.1.0",
"font-awesome": "4.7.0",
"font-awesome-sass-loader": "1.0.3",
"fs": "0.0.1-security",
"generate-function": "2.0.0",
"generate-object-property": "1.2.0",
"gspeech-api": "1.0.0",
"httpolyglot": "0.1.2",
"ionicons": "^2.0.1",
"jimp": "0.2.27",
"jquery": "2.2.4",
"jquery-slimscroll": "1.3.8",
"json-loader": "0.5.4",
"json-server": "^0.9.5",
"jsonpointer": "4.0.1",
"lodash": "4.15.0",
"lusca": "^1.4.1",
"method-override": "2.x",
"moment": "2.17.1",
"morgan": "1.7.0",
"multer": "1.2.0",
"natural": "0.4.0",
"ng2-bootstrap": "1.1.16",
"ng2-ckeditor": "1.0.7",
"ng2-dnd": "^2.2.2",
"ng2-smart-table": "0.5.0",
"ng2-tree": "0.0.2-7",
"ng2-uploader": "1.1.0",
"node-sass-middleware": "0.9.8",
"normalize.css": "5.0.0",
"npm": "4.1.2",
"passport": "0.3.2",
"passport-ibmid-oauth2": "0.0.8",
"passport-idaas-openidconnect": "2.0.1",
"passport-local": "^1.0.0",
"pg": "6.1.0",
"pg-connection-string": "0.1.3",
"pg-hstore": "2.3.2",
"postcss-load-config": "1.0.0",
"postcss-loader": "1.0.0",
"postcss-ordered-values": "2.2.3",
"pug": "2.0.0-beta8",
"randomstring": "1.1.5",
"reflect-metadata": "0.1.9",
"request": "2.79.0",
"resolve-url-loader": "1.6.1",
"rimraf": "2.6.1",
"rmdir": "1.2.0",
"rxjs": "5.0.1",
"search-index": "^0.9.15",
"sequelize": "3.30.0",
"sequelize-mock": "0.6.1",
"serve-static": "1.11.2",
"should": "10.0.0",
"socket.io": "1.7.2",
"socket.io-client": "1.7.2",
"unzip": "0.1.11",
"vaadin-split-layout": "^1.1.0",
"watson-developer-cloud": "2.15.2",
"webpack": "2.2.1",
"winston": "2.3.0",
"winston-daily-rotate-file": "1.4.3",
"xls-to-json": "0.4.0",
"xml-js": "0.9.7",
"xml2js": "0.4.17",
"xtend": "^4.0.1",
"zone.js": "0.7.7"
},
"devDependencies": {
"pre-push": "0.1.1",
"precommit-hook": "3.0.0",
"js-beautify": "1.6.8",
"@types/jasmine": "2.5.35",
"@types/jquery ": "2.0.33",
"@types/jquery.slimscroll": "1.3.30",
"@types/lodash": "0.0.28",
"@types/node": "6.0.46",
"@types/source-map": "0.1.27",
"@types/uglify-js": "2.0.27",
"@types/webpack": "2.0.0",
"angular2-router-loader": "0.3.4",
"angular2-template-loader": "0.6.0",
"awesome-typescript-loader": "3.0.0-beta.9",
"babel-core": "6.22.1",
"babel-loader": "6.2.10",
"canonical-path": "0.0.2",
"chai": "3.5.0",
"concurrently": "3.1.0",
"copy-webpack-plugin": "3.0.1",
"css-loader": "0.26.1",
"exports-loader": "0.6.3",
"extract-text-webpack-plugin": "2.0.0-rc.3",
"file-loader": "0.9.0",
"git-hooks-win": "1.1.11",
"hjson": "2.4.1",
"html-loader": "0.4.3",
"html-webpack-plugin": "2.15.0",
"html-webpack-pug-plugin": "0.0.3",
"http-server": "0.9.0",
"imports-loader": "0.6.5",
"istanbul": "0.4.2",
"jasmine-core": "2.4.1",
"jshint": "2.9.4",
"karma": "1.2.0",
"karma-jasmine": "1.0.2",
"karma-phantomjs-launcher": "1.0.2",
"karma-sourcemap-loader": "0.3.7",
"karma-webpack": "1.8.0",
"lite-server": "2.2.2",
"mocha": "3.0.0",
"node-sass": "4.0.0",
"null-loader": "0.1.1",
"phantomjs-prebuilt": "2.1.7",
"pug-html-loader": "1.0.9",
"raw-loader": "0.5.1",
"resolve-url-loader": "1.6.1",
"sass-loader": "6.0.2",
"should": "10.0.0",
"style-loader": "0.13.1",
"supertest": "^2.0.0",
"tslint": "^3.15.1",
"typescript": "2.1.6",
"url-loader": "0.5.7",
"webdriver-manager": "10.2.5",
"webpack": "2.2.1",
"webpack-dev-server": "1.16.2",
"webpack-md5-hash": "0.0.5",
"webpack-merge": "0.14.0",
"webpack-node-externals": "1.5.4"
},
I would be very grateful if you could help.
Is Horizontal scroll support for this control?
I have two split-areas, one of them containing a iframe. If I try to make the first split-area bigger, by dragging the gutter over the iframe, the gutter stucks until I leave the iframe-area again.
Please take a look at this Plunkr: https://plnkr.co/edit/jLMmkWGnH1etFLkBCi8b?p=preview.
I am trying to have a persistent unsplit content (25% on left side) and trying to vertically split the remaining 75% on the right. I do not want to split the left and right side.
Any help is appreciated.
Hi,
Wondering whether there is a plan to support Angular 4.0?
I just to compile against Angular 4.0 with [email protected], got errors like:
ERROR in Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol NgModule in ${MY_APP_PATH}/node_modules/angular-split/node_modules/@angular/core/src/metadata/ng_module.d.ts
I want to use [hidden] property instead of *ngIf to hide/show a component.
[size]="0" is also not working, it is assigning 50% size by default.
Made an angular-cli project implementing a basic split. The gutter is displayed but it cannot be dragged. Is there something I'm missing?
Hello,
Seem like this lib is not compatible with [email protected]. With [email protected], everything works for me.
I've got the same error than #41 when I start the server.
Could you please check on your side ?
Thanks you,
Hi, I'm trying to put the split component inside a div. this div is a flex-item with the following properties : 1 0 auto; the idea here is to have a vertical flexbox which contains a header , and the split component takes all the remaining available space in the flexbox under the header.
Here is the plunker : https://plnkr.co/edit/MbzZsXkPklp7tFc8foUF?p=preview
What I can do is include my header inside me split with a gutter size to 0 but i dont know in advance the height of my header to define the percentage of splitting
When including angular-split
in a local package.json, this module no longer compiles successfully against the latest typescript. Typescript 2.4.1 now enforces stricter checking and the following error is presented against he rxjs
hard inclusion that is part of angular-split
:
ERROR in C:\git\std_default_project\node_modules\angular-split\node_modules\rxjs\Subject.d.ts
(16,22): error TS2415: Class 'Subject<T>' incorrectly extends base class 'Observable<T>'.
Types of property 'lift' are incompatible.
Type '<R>(operator: Operator<T, R>) => Observable<T>' is not assignable to type '<R>(operator: Operator<T, R>) => Observable<R>'.
Type 'Observable<T>' is not assignable to type 'Observable<R>'.
Type 'T' is not assignable to type 'R'.
rxjs
(5.4.2) has already released a fix for this (ReactiveX/rxjs#2722). However, since angular-split
brings along its own version of rxjs
(5.0.2) (which includes the issue), building a project with this angular-split
module now fails when run against TS 2.4.1
Hi,
Do you know how include import in systemjs config ?
thx
If I want hide panel - I must destroy all components of my panel
<split-area *ngIf="isVisible">
<my-module></my-module>
</split-area>
How I may just hide panel without destroying my components ?
css display: none
and (size)=0
not working for me because module does not recalculating count of split-area's
Need like that
<split-area [hidden]="isHidden">
I need to be able to drag the gutter so that one pane is completely hidden and the other pane takes up the whole space except for the gutter on the side where the other pane was. There seems to be some minimum size set for the panes, though I can't figure out where that is.
Any ideas?
Thx.
One feature always useful is to set minimum size for an area. Ideally in pixels.
Would you like me to work on this feature for you?
Switching areas order then dragging gutter leads to weird behavior.
To reproduce, go on website:
Hi,
Would be awesome with an click event on the gutter.
e.g clicking on the gutter toggles from 50% to 20%.
So instead of dragging one can toggle its pct.
When I follow you instructions for webpack builds I get the following error. I'm at a loss for a solution and so have to ask for help. Any thoughts?
.//angular-split//@angular/core/@angular/core.es5.js
5870:15-36 Critical dependency: the request of a dependency is an expression
.//angular-split//@angular/core/@angular/core.es5.js
5886:15-102 Critical dependency: the request of a dependency is an expression
windows 10
npm -v: 5.0.4
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ โณ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
@angular/cli: 1.2.0
node: 6.11.0
os: win32 x64
@angular/animations: 4.2.5
@angular/cli: 1.2.0
@angular/common: 4.2.5
@angular/compiler: 4.2.5
@angular/compiler-cli: 4.2.5
@angular/core: 4.2.5
@angular/forms: 4.2.5
@angular/http: 4.2.5
@angular/language-service: 4.2.5
@angular/platform-browser: 4.2.5
@angular/platform-browser-dynamic: 4.2.5
@angular/router: 4.2.5
@angular/tsc-wrapped: 4.2.5
{
"name": "ngx-weui",
"version": "1.0.6",
"main": "bundles/ngx-weui.umd.js",
"module": "index.js",
"typings": "index.d.ts",
"description": "weui for angular",
"repository": {
"type": "git",
"url": "git+https://github.com/cipchk/ngx-weui.git"
},
"keywords": [
"ngx-weui",
"ng2-weui",
"angular weui",
"angular2 weui",
"weui"
],
"author": "cipchk <cipchk>",
"license": "MIT",
"bugs": {
"url": "https://github.com/cipchk/ngx-weui/issues"
},
"homepage": "https://github.com/cipchk/ngx-weui#readme",
"scripts": {
"lite-server": "lite-server -c demo/bs-config.json",
"demo.serve": "run-s build link demo.build lite-server",
"demo.gh-pages": "run-s build docs demo.build demo.deploy",
"demo.build": "ng build -prod",
"demo.deploy": "gh-pages -d demo/dist",
"link": "ngm link -p src --here",
"lint": "exit 0",
"disable-lint": "tslint \"**/*.ts\" -c tslint.json --fix --type-check -t prose -e \"node_modules/**\" -e \"dist/**\" -e \"temp/**\" -e \"scripts/docs/**\"",
"flow.changelog": "conventional-changelog -i CHANGELOG.md -s -p angular",
"flow.github-release": "conventional-github-releaser -p angular",
"build": "run-s build.package copy.d.ts",
"build.package": "ngm build -p src --clean",
"build.watch": "ngm build -p src --watch --skip-bundles",
"copy.d.ts": "copyfiles -f ./src/jweixin/wx.d.ts ./dist/jweixin",
"start": "ng serve --aot --host 0.0.0.0",
"pretest": "run-s lint build link",
"test": "ng test -sr",
"test-coverage": "ng test -sr -cc",
"version": "npm run flow.changelog && git add -A",
"e2e": "protractor",
"docs": "gulp docs",
"api": "gulp api-docs"
},
"dependencies": {},
"peerDependencies": {
"@angular/common": ">=4.0.0",
"@angular/compiler": ">=4.0.0",
"@angular/core": ">=4.0.0",
"@angular/forms": ">=4.0.0"
},
"devDependencies": {
"@angular/animations": "^4.2.2",
"@angular/cli": "^1.1.1",
"@angular/common": "^4.2.2",
"@angular/compiler": "^4.2.2",
"@angular/compiler-cli": "^4.2.2",
"@angular/core": "^4.2.2",
"@angular/forms": "^4.2.2",
"@angular/http": "^4.2.2",
"@angular/language-service": "^4.2.2",
"@angular/platform-browser": "^4.2.2",
"@angular/platform-browser-dynamic": "^4.2.2",
"@angular/router": "^4.2.2",
"@angular/tsc-wrapped": "^4.2.2",
"@types/gulp": "^4.0.2",
"@types/jasmine": "2.5.47",
"@types/node": "~6.0.60",
"@types/sinon": "^2.3.1",
"angular-qq-maps": "^1.0.0",
"angular-split": "^0.2.0",
"chart.js": "^2.5.0",
"classlist-polyfill": "^1.0.3",
"codecov": "^2.2.0",
"codelyzer": "~2.0.0",
"copyfiles": "^1.2.0",
"dgeni": "^0.4.7",
"dgeni-packages": "^0.19.0",
"g2-mobile": "^2.1.21",
"gulp": "^3.9.1",
"gulp-clean": "^0.3.2",
"gulp-clean-css": "^3.2.0",
"gulp-cli": "^1.3.0",
"gulp-connect": "^5.0.0",
"gulp-dom": "^0.9.17",
"gulp-flatten": "^0.3.1",
"gulp-highlight-files": "0.0.4",
"gulp-htmlmin": "^3.0.0",
"gulp-if": "^2.0.2",
"gulp-markdown": "^1.2.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.1.0",
"gulp-transform": "^1.1.0",
"highlight.js": "^9.11.0",
"http-rewrite-middleware": "^0.1.6",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.3.0",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-remap-istanbul": "^0.6.0",
"karma-sauce-launcher": "^1.1.0",
"lite-server": "^2.3.0",
"lodash": "^4.17.4",
"ng2-checklist": "^1.0.2",
"ngm-cli": "0.5.2",
"ngx-countdown": "^1.0.1",
"ngx-gesture-password": "^1.0.0",
"ngx-highlight-js": "^1.0.1",
"ngx-notify": "^1.0.1",
"npm-run-all": "4.0.2",
"protractor": "~5.1.1",
"rxjs": "^5.4.0",
"sinon": "^2.3.5",
"split.js": "^1.2.0",
"swiper": "^3.4.2",
"ts-helpers": "^1.1.2",
"ts-node": "~3.0.2",
"tslint": "^4.5.1",
"typescript": "~2.3.4",
"wallaby-webpack": "0.0.38",
"webdriver-manager": "^12.0.6",
"webpack-bundle-analyzer": "^2.8.1",
"weui": "^1.1.2",
"zone.js": "^0.8.5"
}
}
C:\Users\asdf\Desktop\work\ngx-weui>ng serve
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
Hash: 16aba8254ad2dc6bf92d
Time: 27037ms
chunk {0} main.bundle.js, main.bundle.js.map (main) 225 kB {3} [initial] [rendered]
chunk {1} scripts.bundle.js, scripts.bundle.js.map (scripts) 325 kB {4} [initial] [rendered]
chunk {2} styles.bundle.js, styles.bundle.js.map (styles) 20.1 kB {4} [initial] [rendered]
chunk {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 3.85 MB [initial] [rendered]
chunk {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
ERROR in Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 194:50 in the original .ts file), resolving symbol NgModule in C:/Users/asdf/Desktop/work/ngx-weui/node_modules/angular-split/node_modules/@angular/core/core.d.ts, resolving symbol AngularSplitModule in C:/Users/asdf/Desktop/work/ngx-weui/node_modules/angular-split/dist/angularSplit.module.d.ts, resolving symbol AngularSplitModule in C:/Users/asdf/Desktop/work/ngx-weui/node_modules/angular-split/dist/angularSplit.module.d.ts
webpack: Failed to compile.
Hi!
I guess this would be a feature request, but would it be possible to get touch support for dragging the resize bar? Currently if used on a mobile browser with only touch as input I don't see a way to resize the areas.
Thanks!
Hey,
Is this component is responsive because if I open page in iphone6 , Size (Height) of gutter line (line which splits 2 sections and able to drag) is too much.
It should be less for small devices.
Do we need to add any css for that or it is responsive by nature.
Hey,
I'm trying to delete the background image from split-gutter tag and style it my own way. I'm trying to do that this way, but it's not working:
split-gutter {
background-image: none !important;
}
Could you please help me?
Is there any way to disable split-gutter and than enable it again? I mean the same behavior as for example button has.
Great component! A view lines of code to install and then it works out of the box.
Here a very minor, minor, minor issue.
In horizontal mode (vertical gutter) my eyes noted a small discrepancy in the shown dots caused by the default gutterSize of 10: 3 + [2] + 1 +[2] + 2. Setting it to 9 or 11 solved it.
Would it be an idea to default it to 9 or 11?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.