Neues Initialrelease mit IonicMaterial
This commit is contained in:
Carsten Hilmer
@@ -0,0 +1,433 @@
|
||||
<!--View Information-->
|
||||
<!--View name : Default User Interface-->
|
||||
<!--Controller name : defaultUserInterfaceCtrl-->
|
||||
<!--Controller path : www/templates/material-user-interface/default-user-interface/js/controllers.js-->
|
||||
<!--State name : app.defaultUI-->
|
||||
<!--URL : #app/defaultUI-->
|
||||
|
||||
<ion-view title="User Interface">
|
||||
<!--user interface section-->
|
||||
<ion-slide-box id="user-interface-content" active-slide="0">
|
||||
<!--slide section-->
|
||||
<ion-slide class="slide-01">
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<a class="md-button md-accent md-fab" aria-label="Add">
|
||||
<i class="icon ion-plus"></i>
|
||||
</a>
|
||||
<a class="md-button md-accent md-fab" aria-label="Edit">
|
||||
<i class="ion-android-create"></i>
|
||||
</a>
|
||||
<br/>
|
||||
|
||||
<a class="md-button md-accent md-fab" aria-label="Shop">
|
||||
<i class="fa fa-shopping-cart"></i>
|
||||
</a>
|
||||
<a class="md-button md-accent md-fab" aria-label="Call">
|
||||
<i class="ion-android-call"></i>
|
||||
</a>
|
||||
<br/>
|
||||
|
||||
<div class="button-icon-content">
|
||||
<i class="ion-android-mail button-icon"></i>
|
||||
<i class="ion-android-textsms button-icon"></i>
|
||||
</div>
|
||||
<a href="" class="md-raised md-button md-default-theme material-background">Button</a>
|
||||
<br/>
|
||||
<a href="" class="md-raised md-button md-default-theme"> Button</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ion-slide>
|
||||
<ion-slide class="slide-02">
|
||||
<form name="contractForm">
|
||||
<ion-content id="default-input-content">
|
||||
<md-input-container md-no-float="" class="md-list-item-full-width">
|
||||
<input placeholder=" Input Text">
|
||||
</md-input-container>
|
||||
<md-input-container class="icon-title" md-no-float>
|
||||
<i class="ion-android-mail"></i>
|
||||
<input name="email" placeholder="Input Text">
|
||||
</md-input-container>
|
||||
<md-input-container class="icon-title" md-no-float>
|
||||
<i class="fa fa-unlock-alt"></i>
|
||||
<input type="password" name="password" placeholder="Input Password">
|
||||
</md-input-container>
|
||||
<md-input-container class="icon-title" md-no-float>
|
||||
<i class="ion-android-favorite"></i>
|
||||
<input numbers-only name="age" ng-model="inputNumber" placeholder="Input Number" type="tel">
|
||||
</md-input-container>
|
||||
</ion-content>
|
||||
</form>
|
||||
</ion-slide>
|
||||
<ion-slide class="slide-03">
|
||||
|
||||
|
||||
<div class="radio-container">
|
||||
<md-radio-group ng-model="radioData.fruit">
|
||||
<md-radio-button value="Apple">Apple</md-radio-button>
|
||||
<md-radio-button value="Banana"> Banana</md-radio-button>
|
||||
<md-radio-button value="Mango">Mango</md-radio-button>
|
||||
</md-radio-group>
|
||||
</div>
|
||||
<div class="checkbox-container">
|
||||
<md-checkbox aria-label="Checkbox">
|
||||
Check Me.
|
||||
</md-checkbox>
|
||||
</div>
|
||||
<div class="switch-container">
|
||||
<md-switch ng-model="switchData.switchNormal" aria-label="Switch" ng-true-value="'You change to True'"
|
||||
ng-false-value="'You change to False'" class="md-warn">
|
||||
{{ switchData.switchNormal }}
|
||||
</md-switch>
|
||||
<md-switch class="md-primary" md-no-ink aria-label="Switch No Ink" ng-model="switchData.switchNoInk">
|
||||
Switch md no ink
|
||||
</md-switch>
|
||||
</div>
|
||||
|
||||
</ion-slide>
|
||||
<ion-slide class="slide-04">
|
||||
|
||||
<md-card>
|
||||
<img ng-src="{{'img/bg_cover_01.png'}}" class="md-card-image" alt="Card image">
|
||||
<md-card-content>
|
||||
<h2 class="md-title">MD-CARD</h2>
|
||||
|
||||
<p>
|
||||
card content ........................................
|
||||
</p>
|
||||
</md-card-content>
|
||||
<div class="md-actions" layout="row" layout-align="end center">
|
||||
<a href="" class="md-button md-default-theme">Action 1</a>
|
||||
<a href="" class="md-button md-default-theme">Action 2</a>
|
||||
</div>
|
||||
</md-card>
|
||||
|
||||
</ion-slide>
|
||||
|
||||
|
||||
<ion-slide class="slide-05">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<a href="" ng-click="showConfirmDialog($event)"
|
||||
class="md-raised md-button md-default-theme material-background">Confirm Dialog</a>
|
||||
<br/>
|
||||
<a href="" ng-click="showAlertDialog($event)"
|
||||
class="md-raised md-button md-default-theme material-background">Alert Dialog</a>
|
||||
<br/>
|
||||
|
||||
<p>
|
||||
{{dialogResult}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ion-slide>
|
||||
|
||||
<ion-slide class="slide-06">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<a href="" ng-click="showToast('top')"
|
||||
class="md-raised md-button md-default-theme material-background">Toast Top</a>
|
||||
<br/>
|
||||
<a href="" ng-click="showToast('bottom')"
|
||||
class="md-raised md-button md-default-theme material-background">Toast Bottom</a>
|
||||
</div>
|
||||
</div>
|
||||
</ion-slide>
|
||||
|
||||
<ion-slide class="slide-07">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<a href="" ng-click="showListBottomSheet($event)"
|
||||
class="md-raised md-button md-default-theme material-background">List Bottom Sheet</a>
|
||||
<br/>
|
||||
<a href="" ng-click="showGridBottomSheet($event)"
|
||||
class="md-raised md-button md-default-theme material-background">Grid Bottom Sheet</a>
|
||||
</div>
|
||||
</div>
|
||||
</ion-slide>
|
||||
<ion-slide class="slide-08">
|
||||
<md-menu md-position-mode="target-right target" class="md-list-item-md-menu-right">
|
||||
<p ng-click="$mdOpenMenu()">
|
||||
Menu Small
|
||||
<md-icon md-menu-origin md-svg-icon="more"></md-icon>
|
||||
</p>
|
||||
<md-menu-content width="1">
|
||||
<md-menu-item>
|
||||
<a class="md-button md-default-theme" ng-click="doSomeThing()">
|
||||
<span class="menu-item-button">Action 1</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<a class="md-button md-default-theme" ng-click="doSomeThing()">
|
||||
<span class="menu-item-button">Action 2</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<a class="md-button md-default-theme" ng-click="doSomeThing()">
|
||||
<span class="menu-item-button">Action 3</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<a class="md-button md-default-theme" ng-click="doSomeThing()">
|
||||
<span class="menu-item-button">Action 4</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
|
||||
<md-menu md-position-mode="target-right target" class="md-list-item-md-menu-right">
|
||||
<p ng-click="$mdOpenMenu()">
|
||||
Menu Medium
|
||||
<md-icon md-menu-origin md-svg-icon="more"></md-icon>
|
||||
</p>
|
||||
<md-menu-content width="2">
|
||||
<md-menu-item>
|
||||
<a class="md-button md-default-theme" ng-click="doSomeThing()">
|
||||
<span class="menu-item-button">Action 1</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<a class="md-button md-default-theme" ng-click="doSomeThing()">
|
||||
<span class="menu-item-button">Action 2</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<a class="md-button md-default-theme" ng-click="doSomeThing()">
|
||||
<span class="menu-item-button">Action 3</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<a class="md-button md-default-theme" ng-click="doSomeThing()">
|
||||
<span class="menu-item-button">Action 4</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
<md-menu md-position-mode="target-right target" class="md-list-item-md-menu-right">
|
||||
<p ng-click="$mdOpenMenu()">
|
||||
Menu Large
|
||||
<md-icon md-menu-origin md-svg-icon="more"></md-icon>
|
||||
</p>
|
||||
<md-menu-content width="3">
|
||||
<md-menu-item>
|
||||
<a class="md-button md-default-theme" ng-click="doSomeThing()">
|
||||
<span class="menu-item-button">Action 1</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<a class="md-button md-default-theme" ng-click="doSomeThing()">
|
||||
<span class="menu-item-button">Action 2</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<a class="md-button md-default-theme" ng-click="doSomeThing()">
|
||||
<span class="menu-item-button">Action 3</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<a class="md-button md-default-theme" ng-click="doSomeThing()">
|
||||
<span class="menu-item-button">Action 4</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
<md-menu md-position-mode="target-right target" class="md-list-item-md-menu-right">
|
||||
<p ng-click="$mdOpenMenu()">
|
||||
Menu Super Large
|
||||
<md-icon md-menu-origin md-svg-icon="more"></md-icon>
|
||||
</p>
|
||||
<md-menu-content width="4">
|
||||
<md-menu-item>
|
||||
<a class="md-button md-default-theme" ng-click="doSomeThing()">
|
||||
<span class="menu-item-button">Action 1</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<a class="md-button md-default-theme" ng-click="doSomeThing()">
|
||||
<span class="menu-item-button">Action 2</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<a class="md-button md-default-theme" ng-click="doSomeThing()">
|
||||
<span class="menu-item-button">Action 3</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
<md-menu-item>
|
||||
<a class="md-button md-default-theme" ng-click="doSomeThing()">
|
||||
<span class="menu-item-button">Action 4</span>
|
||||
</a>
|
||||
</md-menu-item>
|
||||
</md-menu-content>
|
||||
</md-menu>
|
||||
<div class="row">
|
||||
<div class="col-25">
|
||||
</div>
|
||||
<div class="col-50">
|
||||
<md-select ng-model="mdSelectValue" aria-label="md-option">
|
||||
<md-option value="0">Option 1</md-option>
|
||||
<md-option value="1">Option 2</md-option>
|
||||
<md-option value="2">Option 3</md-option>
|
||||
<md-option value="3">Option 4</md-option>
|
||||
</md-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ion-slide>
|
||||
<ion-slide class="slide-09">
|
||||
|
||||
<div class="ui-progress-circular">
|
||||
<ion-spinner ng-if="!isAndroid" class="progress-circular"></ion-spinner>
|
||||
<md-progress-circular ng-if="isAndroid" md-mode="indeterminate"></md-progress-circular>
|
||||
</div>
|
||||
<p class="ui-progress-circular-content">Progress Circular</p>
|
||||
</ion-slide>
|
||||
<ion-slide class="slide-10">
|
||||
<md-tabs md-dynamic-height md-border-bottom>
|
||||
<md-tab label="Tab 1">
|
||||
<md-content>
|
||||
Tab 1 Detail .......
|
||||
</md-content>
|
||||
</md-tab>
|
||||
<md-tab label="Tab 2">
|
||||
<md-content>
|
||||
Tab 2 Detail .......
|
||||
</md-content>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
</ion-slide>
|
||||
|
||||
<ion-slide class="slide-11">
|
||||
|
||||
<md-list>
|
||||
<md-divider></md-divider>
|
||||
<md-subheader class="md-warn">Default List</md-subheader>
|
||||
<md-list-item class="md-list-item-default" ng-click="doSomeThing()">
|
||||
<i class="ion-android-pin"></i>
|
||||
|
||||
<p>Data Row 1</p>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default" ng-click="doSomeThing()">
|
||||
<i class="ion-android-refresh"></i>
|
||||
|
||||
<p>Data Row 2</p>
|
||||
</md-list-item>
|
||||
<md-list-item class="md-list-item-default" ng-click="doSomeThing()">
|
||||
<i class="ion-android-create"></i>
|
||||
|
||||
<p>Data Row 3</p>
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
|
||||
<md-subheader>2 line item</md-subheader>
|
||||
<md-list-item class="md-2-line">
|
||||
<img ng-src="{{'img/app_icon.png'}}" class="md-avatar"/>
|
||||
|
||||
<div class="md-list-item-text">
|
||||
<h3>Hrader ...</h3>
|
||||
|
||||
<p>Detail ....</p>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
|
||||
</ion-slide>
|
||||
<ion-slide class="slide-12">
|
||||
<md-whiteframe class="md-whiteframe-z1" layout layout-align="center center">
|
||||
<span>.md-whiteframe-z1</span>
|
||||
</md-whiteframe>
|
||||
<md-whiteframe class="md-whiteframe-z2" layout layout-align="center center">
|
||||
<span>.md-whiteframe-z2</span>
|
||||
</md-whiteframe>
|
||||
<md-whiteframe class="md-whiteframe-z3" layout layout-align="center center">
|
||||
<span>.md-whiteframe-z3</span>
|
||||
</md-whiteframe>
|
||||
<md-whiteframe class="md-whiteframe-z4" layout layout-align="center center">
|
||||
<span>.md-whiteframe-z4</span>
|
||||
</md-whiteframe>
|
||||
<md-whiteframe class="md-whiteframe-z5" layout layout-align="center center">
|
||||
<span>.md-whiteframe-z5</span>
|
||||
</md-whiteframe>
|
||||
</ion-slide>
|
||||
<ion-slide class="slide-13">
|
||||
</ion-slide>
|
||||
<!--end slide section-->
|
||||
</ion-slide-box> <!--end user interface section-->
|
||||
|
||||
</ion-view>
|
||||
|
||||
<!--angular template section-->
|
||||
<script type="text/ng-template" id="ui-list-bottom-sheet-template">
|
||||
<md-bottom-sheet class="md-list md-has-header">
|
||||
<h1 class="md-bottom-sheet-header">List Bottom Sheet</h1>
|
||||
<!--list section-->
|
||||
<md-list>
|
||||
<md-list-item>
|
||||
<a class="md-default-theme md-bottom-sheet-list-item"
|
||||
ng-click="closeListBottomSheet()">
|
||||
<i class="ion-android-call"></i>
|
||||
<span>Actions 1</span>
|
||||
</a>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<a class="md-default-theme md-bottom-sheet-list-item"
|
||||
ng-click="closeListBottomSheet()">
|
||||
<i class="ion-android-list"></i>
|
||||
<span>Actions 2</span>
|
||||
</a>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<a class="md-default-theme md-bottom-sheet-list-item"
|
||||
ng-click="closeListBottomSheet()">
|
||||
<i class="ion-android-delete"></i>
|
||||
<span>Actions 3</span>
|
||||
</a>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
|
||||
<!--end list section-->
|
||||
</md-bottom-sheet>
|
||||
</script>
|
||||
|
||||
<script type="text/ng-template" id="ui-grid-bottom-sheet-template">
|
||||
<md-bottom-sheet class="md-grid">
|
||||
<!--list section-->
|
||||
<md-list id="bottom-sheet-grid-md-list">
|
||||
<md-list-item>
|
||||
<a class="md-grid-item-content" ng-click="closeListBottomSheet()">
|
||||
<md-icon md-svg-src="facebook"></md-icon>
|
||||
<div class="md-grid-text"> Facebook</div>
|
||||
</a>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<a class="md-grid-item-content" ng-click="closeListBottomSheet()">
|
||||
<md-icon md-svg-src="twitter"></md-icon>
|
||||
<div class="md-grid-text"> Twitter</div>
|
||||
</a>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<a class="md-grid-item-content" ng-click="closeListBottomSheet()">
|
||||
<md-icon md-svg-src="mail"></md-icon>
|
||||
<div class="md-grid-text"> Mail</div>
|
||||
</a>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<a class="md-grid-item-content" ng-click="closeListBottomSheet()">
|
||||
<i class="ion-android-image"></i>
|
||||
|
||||
<div class="md-grid-text"> Save Image</div>
|
||||
</a>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<a class="md-grid-item-content" ng-click="closeListBottomSheet()">
|
||||
<md-icon md-svg-src="share-arrow"></md-icon>
|
||||
<div class="md-grid-text"> More</div>
|
||||
</a>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
<!--end list section-->
|
||||
</md-bottom-sheet>
|
||||
</script>
|
||||
<!--end angular template section-->
|
||||
@@ -0,0 +1,99 @@
|
||||
// Controller of defaultUserInterface.
|
||||
appControllers.controller('defaultUserInterfaceCtrl', function ($scope, $mdBottomSheet, $mdToast, $mdDialog) {
|
||||
//Default value of input number.
|
||||
$scope.inputNumber = 0;
|
||||
//Default value of dialog.
|
||||
$scope.dialogResult = "";
|
||||
//Default value of Selection.
|
||||
$scope.mdSelectValue = "0";
|
||||
//Default value of switch.
|
||||
$scope.switchData = {
|
||||
switchNormal: "Please change me",
|
||||
switchNoInk: false
|
||||
};
|
||||
//Default value of radio data.
|
||||
$scope.radioData = {fruit: 0};
|
||||
|
||||
// For show show List Bottom Sheet.
|
||||
$scope.showListBottomSheet = function ($event) {
|
||||
$mdBottomSheet.show({
|
||||
templateUrl: 'ui-list-bottom-sheet-template',
|
||||
targetEvent: $event,
|
||||
scope: $scope.$new(false),
|
||||
});
|
||||
};// End of showListBottomSheet.
|
||||
|
||||
// For show Grid Bottom Sheet.
|
||||
$scope.showGridBottomSheet = function ($event) {
|
||||
$mdBottomSheet.show({
|
||||
templateUrl: 'ui-grid-bottom-sheet-template',
|
||||
targetEvent: $event,
|
||||
scope: $scope.$new(false),
|
||||
});
|
||||
};// End of showGridBottomSheet.
|
||||
|
||||
// For show toast.
|
||||
$scope.showToast = function (toastPosition) {
|
||||
$mdToast.show({
|
||||
controller: 'toastController',
|
||||
templateUrl: 'toast.html',
|
||||
hideDelay: 800,
|
||||
position: toastPosition,
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: 'Action Toast'
|
||||
}
|
||||
}
|
||||
});
|
||||
}; // End of showToast.
|
||||
|
||||
// For close list bottom sheet.
|
||||
$scope.closeListBottomSheet = function () {
|
||||
$mdBottomSheet.hide();
|
||||
} // End of closeListBottomSheet.
|
||||
|
||||
// For do something in this function.
|
||||
$scope.doSomeThing = function () {
|
||||
// you can put any function here.
|
||||
}// Emd of doSomeThing
|
||||
|
||||
// For show Confrim Dialog.
|
||||
$scope.showConfirmDialog = function ($event) {
|
||||
$mdDialog.show({
|
||||
controller: 'DialogController',
|
||||
templateUrl: 'confirm-dialog.html',
|
||||
targetEvent: $event,
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Confirm dialog ...?",
|
||||
content: "This is confirm dialog content.",
|
||||
ok: "Confirm",
|
||||
cancel: "Close"
|
||||
}
|
||||
}
|
||||
}).then(function () {
|
||||
$scope.dialogResult = "You choose Confirm!"
|
||||
}, function () {
|
||||
$scope.dialogResult = "You choose Close !!"
|
||||
});
|
||||
}// End showConfirmDialog.
|
||||
|
||||
// For show alert Dialog.
|
||||
$scope.showAlertDialog = function ($event) {
|
||||
$mdDialog.show({
|
||||
controller: 'DialogController',
|
||||
templateUrl: 'confirm-dialog.html',
|
||||
targetEvent: $event,
|
||||
locals: {
|
||||
displayOption: {
|
||||
title: "Alert dialog !!",
|
||||
content: "This is alert dialog content.",
|
||||
ok: "Confirm"
|
||||
}
|
||||
}
|
||||
}).then(function () {
|
||||
$scope.dialogResult = "You choose Confirm!"
|
||||
});
|
||||
}// End showAlertDialog.
|
||||
|
||||
}); // End of defaultUserInterface controller.
|
||||
Reference in New Issue
Block a user