mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 23:16:52 +08:00
Hacks and split pane test
This commit is contained in:
Max Lynch
37
dist/css/ionic.css
vendored
37
dist/css/ionic.css
vendored
@ -3424,6 +3424,43 @@ a.button {
|
|||||||
-webkit-transition: opacity 0.4s ease-in;
|
-webkit-transition: opacity 0.4s ease-in;
|
||||||
opacity: 1; }
|
opacity: 1; }
|
||||||
|
|
||||||
|
.split-pane {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -webkit-flex;
|
||||||
|
display: -moz-flex;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: stretch;
|
||||||
|
-ms-flex-align: stretch;
|
||||||
|
-webkit-align-items: stretch;
|
||||||
|
-moz-align-items: stretch;
|
||||||
|
align-items: stretch; }
|
||||||
|
|
||||||
|
.split-pane-menu {
|
||||||
|
-webkit-box-flex: 0;
|
||||||
|
-webkit-flex: 0 0 320px;
|
||||||
|
-moz-box-flex: 0;
|
||||||
|
-moz-flex: 0 0 320px;
|
||||||
|
-ms-flex: 0 0 320px;
|
||||||
|
flex: 0 0 320px;
|
||||||
|
height: 100%;
|
||||||
|
width: 320px;
|
||||||
|
border-right: 1px solid #eeeeee;
|
||||||
|
overflow-y: auto; }
|
||||||
|
@media all and (max-width: 568px) {
|
||||||
|
.split-pane-menu {
|
||||||
|
border-right: none; } }
|
||||||
|
|
||||||
|
.split-pane-content {
|
||||||
|
-webkit-box-flex: 1;
|
||||||
|
-webkit-flex: 1 0 auto;
|
||||||
|
-moz-box-flex: 1;
|
||||||
|
-moz-flex: 1 0 auto;
|
||||||
|
-ms-flex: 1 0 auto;
|
||||||
|
flex: 1 0 auto; }
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Scroll is the scroll view component available for complex and custom
|
* Scroll is the scroll view component available for complex and custom
|
||||||
* scroll view functionality.
|
* scroll view functionality.
|
||||||
|
|||||||
11
dist/js/ionic-angular.js
vendored
11
dist/js/ionic-angular.js
vendored
@ -386,6 +386,15 @@ angular.module('ionic.ui.list', ['ngAnimate'])
|
|||||||
canSwipe: '@',
|
canSwipe: '@',
|
||||||
buttons: '=',
|
buttons: '=',
|
||||||
},
|
},
|
||||||
|
template: '<a href="#" class="item item-slider">\
|
||||||
|
<div class="item-content slide-left" ng-transclude>\
|
||||||
|
</div>\
|
||||||
|
<div class="item-options" ng-if="canSwipe && !isEditing">\
|
||||||
|
<button ng-click="buttonClicked(button)" class="button" ng-class="button.type" ng-repeat="button in buttons">{{button.text}}</button>\
|
||||||
|
</div>\
|
||||||
|
</a>',
|
||||||
|
|
||||||
|
/*
|
||||||
template: '<li class="list-item">\
|
template: '<li class="list-item">\
|
||||||
<div class="list-item-edit" ng-if="canDelete && isEditing">\
|
<div class="list-item-edit" ng-if="canDelete && isEditing">\
|
||||||
<button class="button button-icon" ng-click="onDelete()"><i ng-class="deleteIcon"></i></button>\
|
<button class="button button-icon" ng-click="onDelete()"><i ng-class="deleteIcon"></i></button>\
|
||||||
@ -398,7 +407,7 @@ angular.module('ionic.ui.list', ['ngAnimate'])
|
|||||||
<div class="list-item-buttons" ng-if="canSwipe && !isEditing">\
|
<div class="list-item-buttons" ng-if="canSwipe && !isEditing">\
|
||||||
<button ng-click="buttonClicked(button)" class="button" ng-class="button.type" ng-repeat="button in buttons">{{button.text}}</button>\
|
<button ng-click="buttonClicked(button)" class="button" ng-class="button.type" ng-repeat="button in buttons">{{button.text}}</button>\
|
||||||
</div>\
|
</div>\
|
||||||
</li>',
|
</li>',*/
|
||||||
link: function($scope, $element, $attr, list) {
|
link: function($scope, $element, $attr, list) {
|
||||||
$scope.isEditing = false;
|
$scope.isEditing = false;
|
||||||
$scope.deleteIcon = list.scope.deleteIcon;
|
$scope.deleteIcon = list.scope.deleteIcon;
|
||||||
|
|||||||
11
js/ext/angular/src/directive/ionicList.js
vendored
11
js/ext/angular/src/directive/ionicList.js
vendored
@ -18,6 +18,15 @@ angular.module('ionic.ui.list', ['ngAnimate'])
|
|||||||
canSwipe: '@',
|
canSwipe: '@',
|
||||||
buttons: '=',
|
buttons: '=',
|
||||||
},
|
},
|
||||||
|
template: '<a href="#" class="item item-slider">\
|
||||||
|
<div class="item-content slide-left" ng-transclude>\
|
||||||
|
</div>\
|
||||||
|
<div class="item-options" ng-if="canSwipe && !isEditing">\
|
||||||
|
<button ng-click="buttonClicked(button)" class="button" ng-class="button.type" ng-repeat="button in buttons">{{button.text}}</button>\
|
||||||
|
</div>\
|
||||||
|
</a>',
|
||||||
|
|
||||||
|
/*
|
||||||
template: '<li class="list-item">\
|
template: '<li class="list-item">\
|
||||||
<div class="list-item-edit" ng-if="canDelete && isEditing">\
|
<div class="list-item-edit" ng-if="canDelete && isEditing">\
|
||||||
<button class="button button-icon" ng-click="onDelete()"><i ng-class="deleteIcon"></i></button>\
|
<button class="button button-icon" ng-click="onDelete()"><i ng-class="deleteIcon"></i></button>\
|
||||||
@ -30,7 +39,7 @@ angular.module('ionic.ui.list', ['ngAnimate'])
|
|||||||
<div class="list-item-buttons" ng-if="canSwipe && !isEditing">\
|
<div class="list-item-buttons" ng-if="canSwipe && !isEditing">\
|
||||||
<button ng-click="buttonClicked(button)" class="button" ng-class="button.type" ng-repeat="button in buttons">{{button.text}}</button>\
|
<button ng-click="buttonClicked(button)" class="button" ng-class="button.type" ng-repeat="button in buttons">{{button.text}}</button>\
|
||||||
</div>\
|
</div>\
|
||||||
</li>',
|
</li>',*/
|
||||||
link: function($scope, $element, $attr, list) {
|
link: function($scope, $element, $attr, list) {
|
||||||
$scope.isEditing = false;
|
$scope.isEditing = false;
|
||||||
$scope.deleteIcon = list.scope.deleteIcon;
|
$scope.deleteIcon = list.scope.deleteIcon;
|
||||||
|
|||||||
21
scss/ionic/_splitPane.scss
Normal file
21
scss/ionic/_splitPane.scss
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
.split-pane {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
@include display-flex();
|
||||||
|
@include align-items(stretch);
|
||||||
|
}
|
||||||
|
.split-pane-menu {
|
||||||
|
@include flex(0, 0, $split-pane-menu-width);
|
||||||
|
height: 100%;
|
||||||
|
width: $split-pane-menu-width;
|
||||||
|
border-right: 1px solid $split-pane-menu-border-color;
|
||||||
|
|
||||||
|
overflow-y: auto;
|
||||||
|
|
||||||
|
@media all and (max-width: 568px) {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.split-pane-content {
|
||||||
|
@include flex(1, 0, auto);
|
||||||
|
}
|
||||||
@ -415,6 +415,8 @@ $menu-inset-border-color: #bbb;
|
|||||||
$menu-width: 270px;
|
$menu-width: 270px;
|
||||||
$menu-animation-speed: 200ms;
|
$menu-animation-speed: 200ms;
|
||||||
|
|
||||||
|
$split-pane-menu-width: 320px;
|
||||||
|
$split-pane-menu-border-color: #eee;
|
||||||
|
|
||||||
// Modals
|
// Modals
|
||||||
// -------------------------------
|
// -------------------------------
|
||||||
|
|||||||
@ -42,6 +42,9 @@
|
|||||||
"alerts",
|
"alerts",
|
||||||
|
|
||||||
"slideBox",
|
"slideBox",
|
||||||
|
|
||||||
|
"splitPane",
|
||||||
|
|
||||||
"scroll",
|
"scroll",
|
||||||
|
|
||||||
"nav",
|
"nav",
|
||||||
|
|||||||
163
test/splitPane.html
Normal file
163
test/splitPane.html
Normal file
@ -0,0 +1,163 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Split Pane</title>
|
||||||
|
|
||||||
|
<!-- Sets initial viewport load and disables zooming -->
|
||||||
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||||
|
<link href="../dist/css/ionic.css" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
|
||||||
|
<header class="bar bar-header bar-dark">
|
||||||
|
<h1 class="title">Split Pane</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="content-wrapper">
|
||||||
|
<div class="content has-header">
|
||||||
|
<div class="split-pane">
|
||||||
|
<div class="split-pane-menu">
|
||||||
|
<h1>Left side</h1>
|
||||||
|
<ul class="list">
|
||||||
|
<a href="#" class="item item-icon-left">
|
||||||
|
<i class="icon-email"></i>
|
||||||
|
Check mail
|
||||||
|
</a>
|
||||||
|
<a href="#" class="item item-icon-left">
|
||||||
|
<i class="icon-email"></i>
|
||||||
|
Check mail
|
||||||
|
</a>
|
||||||
|
<a href="#" class="item item-icon-left">
|
||||||
|
<i class="icon-email"></i>
|
||||||
|
Check mail
|
||||||
|
</a>
|
||||||
|
<a href="#" class="item item-icon-left">
|
||||||
|
<i class="icon-email"></i>
|
||||||
|
Check mail
|
||||||
|
</a>
|
||||||
|
<a href="#" class="item item-icon-left">
|
||||||
|
<i class="icon-email"></i>
|
||||||
|
Check mail
|
||||||
|
</a>
|
||||||
|
<a href="#" class="item item-icon-left">
|
||||||
|
<i class="icon-email"></i>
|
||||||
|
Check mail
|
||||||
|
</a>
|
||||||
|
<a href="#" class="item item-icon-left">
|
||||||
|
<i class="icon-email"></i>
|
||||||
|
Check mail
|
||||||
|
</a>
|
||||||
|
<a href="#" class="item item-icon-left">
|
||||||
|
<i class="icon-email"></i>
|
||||||
|
Check mail
|
||||||
|
</a>
|
||||||
|
<a href="#" class="item item-icon-left">
|
||||||
|
<i class="icon-email"></i>
|
||||||
|
Check mail
|
||||||
|
</a>
|
||||||
|
<a href="#" class="item item-icon-left">
|
||||||
|
<i class="icon-email"></i>
|
||||||
|
Check mail
|
||||||
|
</a>
|
||||||
|
<a href="#" class="item item-icon-left">
|
||||||
|
<i class="icon-email"></i>
|
||||||
|
Check mail
|
||||||
|
</a>
|
||||||
|
<a href="#" class="item item-icon-left">
|
||||||
|
<i class="icon-email"></i>
|
||||||
|
Check mail
|
||||||
|
</a>
|
||||||
|
<a href="#" class="item item-icon-left">
|
||||||
|
<i class="icon-email"></i>
|
||||||
|
Check mail
|
||||||
|
</a>
|
||||||
|
<a href="#" class="item item-icon-left">
|
||||||
|
<i class="icon-email"></i>
|
||||||
|
Check mail
|
||||||
|
</a>
|
||||||
|
<a href="#" class="item item-icon-left">
|
||||||
|
<i class="icon-email"></i>
|
||||||
|
Check mail
|
||||||
|
</a>
|
||||||
|
<a href="#" class="item item-icon-left">
|
||||||
|
<i class="icon-email"></i>
|
||||||
|
Check mail
|
||||||
|
</a>
|
||||||
|
<a href="#" class="item item-icon-left">
|
||||||
|
<i class="icon-email"></i>
|
||||||
|
Check mail
|
||||||
|
</a>
|
||||||
|
<a href="#" class="item item-icon-left">
|
||||||
|
<i class="icon-email"></i>
|
||||||
|
Check mail
|
||||||
|
</a>
|
||||||
|
<a href="#" class="item item-icon-left">
|
||||||
|
<i class="icon-email"></i>
|
||||||
|
Check mail
|
||||||
|
</a>
|
||||||
|
<a href="#" class="item item-icon-left">
|
||||||
|
<i class="icon-email"></i>
|
||||||
|
Check mail
|
||||||
|
</a>
|
||||||
|
<a href="#" class="item item-icon-left">
|
||||||
|
<i class="icon-email"></i>
|
||||||
|
Check mail
|
||||||
|
</a>
|
||||||
|
<a href="#" class="item item-icon-left">
|
||||||
|
<i class="icon-email"></i>
|
||||||
|
Check mail
|
||||||
|
</a>
|
||||||
|
<a href="#" class="item item-icon-left">
|
||||||
|
<i class="icon-email"></i>
|
||||||
|
Check mail
|
||||||
|
</a>
|
||||||
|
<a href="#" class="item item-icon-left">
|
||||||
|
<i class="icon-email"></i>
|
||||||
|
Check mail
|
||||||
|
</a>
|
||||||
|
<a href="#" class="item item-icon-left">
|
||||||
|
<i class="icon-email"></i>
|
||||||
|
Check mail
|
||||||
|
</a>
|
||||||
|
<a href="#" class="item item-icon-left">
|
||||||
|
<i class="icon-email"></i>
|
||||||
|
Check mail
|
||||||
|
</a>
|
||||||
|
<a href="#" class="item item-icon-left">
|
||||||
|
<i class="icon-email"></i>
|
||||||
|
Check mail
|
||||||
|
</a>
|
||||||
|
<a href="#" class="item item-icon-left">
|
||||||
|
<i class="icon-email"></i>
|
||||||
|
Check mail
|
||||||
|
</a>
|
||||||
|
<a href="#" class="item item-icon-left">
|
||||||
|
<i class="icon-email"></i>
|
||||||
|
Check mail
|
||||||
|
</a>
|
||||||
|
<a href="#" class="item item-icon-left">
|
||||||
|
<i class="icon-email"></i>
|
||||||
|
Check mail
|
||||||
|
</a>
|
||||||
|
<a href="#" class="item item-icon-left">
|
||||||
|
<i class="icon-email"></i>
|
||||||
|
Check mail
|
||||||
|
</a>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="split-pane-content padding">
|
||||||
|
<h1>Right Side</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<script src="../dist/js/ionic.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user