AngularJs button material example.
Based on mdButton API Documentation<md-button> is a button directive with optional ink ripples (default enabled).In this post I will make a example for:
- Flat button
- Raised button
- FAB button
- Button with link
- Button Themed
Flat button.
- Flat button default definition: <md-button>Flat defaut</md-button> - Flat Primary button definition:
<md-button class="md-primary">Flat Primary</md-button> - Flat Primary no ink effect button definition:
<md-button md-no-ink class="md-primary">Flat Primary-noink</md-button>
- Flat disable button definition:
<md-button ng-disabled="true" class="md-primary">Disabled</md-button>
- Flat Warn button definition:
<md-button class="md-warn">Warn</md-button> Raised button.
- Raised default button<md-button class="md-raised">Raised</md-button> - Raised Primary button
<md-button class="md-raised md-primary">Raised Primary</md-button>
- Raised Disabled button
<md-button ng-disabled="true" class="md-raised md-primary">Raised Disabled</md-button>
- Raised Warn button
<md-button class="md-raised md-warn">Raised Warn</md-button>
FAB button.
FAB button has md-mini for mini FAB, beside that we can use theme .. <md-button class="md-fab" aria-label="FAB default">
FAB
</md-button>
<md-button class="md-fab md-primary" aria-label="Fab primary">
FAB
</md-button>
<md-button class="md-fab" ng-disabled="true" aria-label="Fab disable">
FAB
</md-button>
<md-button class="md-fab md-primary md-hue-2" aria-label="Fab primary and themed">
FAB
</md-button>
<md-button class="md-fab md-mini" aria-label="Fab mini">
FAB
</md-button>
<md-button class="md-fab md-mini md-primary" aria-label="Fab mini primary">
FAB
</md-button>
Button with link.
It use ng-href to link and can customize it by assign css class. <md-button ng-href="{{linkUrl}}" target="_blank">Default Link</md-button>
<md-button class="md-primary" ng-href="{{linkUrl}}" target="_blank">Primary Link</md-button>
Button Themed
This example means that it is using Raised, Warn and "heu-2" theme. <md-button class="md-warn md-raised md-hue-2">Warn Hue 2</md-button>
Custom button CSS
<md-button class="groupX left">Home</md-button>
<md-button class="groupX middle">Products</md-button>
<md-button class="groupX middle">News</md-button>
<md-button class="groupX middle">About</md-button>
<md-button class="groupX right">Contact</md-button> Full code as below:
<html>
<head>
<title>Angular JS Directive</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<style type="text/css">
.groupX {
font-size: 16px;
margin: 20px 0;
padding: 3px 15px 3px 15px;
color: rgb(49, 46, 46);
background-color: rgba(224, 224, 224, 0.96);
text-transform: none;
font-weight: 400;
min-width:100px;
}
.md-button.left {
border-radius: 10px 0 0 10px;
}
.md-button.middle {
border-radius: 0;
border-left: 1px solid rgba(230, 230, 230, 0.96);
border-right: 1px solid rgba(230, 230, 230, 0.96);
}
.md-button.right {
border-radius: 0 10px 10px 0;
}
.md-button:not([disabled]):hover {
background-color: rgb(0, 0, 0);
color: rgb(255, 106, 0);
transition: 0.3s;
}
</style>
</head>
<body ng-app="MyForm">
<div ng-controller="buttonExam" ng-cloak>
<md-content>
<h3 style="text-align:center">Flat button</h3>
<section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
<md-button>Flat defaut</md-button>
<md-button class="md-primary">Flat Primary</md-button>
<md-button md-no-ink class="md-primary">Flat Primary-noink</md-button>
<md-button ng-disabled="true" class="md-primary">Disabled</md-button>
<md-button class="md-warn">Warn</md-button>
</section>
<hr />
<h3 style="text-align:center">Raised button</h3>
<section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
<md-button class="md-raised">Raised</md-button>
<md-button class="md-raised md-primary">Raised Primary</md-button>
<md-button ng-disabled="true" class="md-raised md-primary">Raised Disabled</md-button>
<md-button class="md-raised md-warn">Raised Warn</md-button>
</section>
<hr />
<h3 style="text-align:center">FAB button</h3>
<section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
<md-button class="md-fab" aria-label="FAB default">
FAB
</md-button>
<md-button class="md-fab md-primary" aria-label="Fab primary">
FAB
</md-button>
<md-button class="md-fab" ng-disabled="true" aria-label="Fab disable">
FAB
</md-button>
<md-button class="md-fab md-primary md-hue-2" aria-label="Fab primary and themed">
FAB
</md-button>
<md-button class="md-fab md-mini" aria-label="Fab mini">
FAB
</md-button>
<md-button class="md-fab md-mini md-primary" aria-label="Fab mini primary">
FAB
</md-button>
</section>
<hr />
<h3 style="text-align:center">Button with link</h3>
<section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
<md-button ng-href="{{linkUrl}}" target="_blank">Default Link</md-button>
<md-button class="md-primary" ng-href="{{linkUrl}}" target="_blank">Primary Link</md-button>
</section>
<hr />
<h3 style="text-align:center">Button with themed</h3>
<section layout="row" layout-sm="column" layout-align="center center" layout-wrap>
<md-button class="md-primary md-hue-1">Primary Hue 1</md-button>
<md-button class="md-warn md-raised md-hue-2">Warn Hue 2</md-button>
<md-button class="md-accent">Accent</md-button>
<md-button class="md-accent md-raised md-hue-1">Accent Hue 1</md-button>
</section>
<hr />
<h3 style="text-align:center">Button customize with CSS</h3>
<section layout="row" layout-sm="column" layout-align="center center">
<md-button class="groupX left">Home</md-button>
<md-button class="groupX middle">Products</md-button>
<md-button class="groupX middle">News</md-button>
<md-button class="groupX middle">About</md-button>
<md-button class="groupX right">Contact</md-button>
</section>
</md-content>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script>
<script>
angular.module('MyForm', ['ngMaterial'])
.controller('buttonExam', function ($scope) {
$scope.isDisabled = true;
$scope.linkUrl = 'http://angularjsaz.blogspot.com/';
});
</script>
</body>
</html>
===> Demo example
Wow, such an awesome blog you have written there and you and I get exactly what information I am looking for, in the third paragraph you put amazing effort to explain the theme of the content.
ReplyDelete스포츠토토