Basic Usage

Developer
Roman Diaz
Size
3,310 Kb
Views
30,360
  1. Basic Usage Previews
  2. Basic Usage HTML Codes
  3. Basic Usage CSS Codes
  4. Basic Usage JS Codes

How do I make an basic usage?

What is a basic usage? How do you make a basic usage? This script and codes were developed by Roman Diaz on 23 July 2022, Saturday.

Basic Usage Previews
IQ Test

Basic Usage - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Basic Usage</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"> <link rel='stylesheet prefetch' href='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.0.8/angular-material.css'>
<link rel='stylesheet prefetch' href='https://material.angularjs.org/1.0.8/docs.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div ng-controller="AppCtrl" layout-fill="" layout="column" class="inset toastdemoBasicUsage" ng-cloak="" ng-app="MyApp"> <p> Toast can be dismissed with a swipe, a timer, or a button.<br> <span style="font-size:0.8em">Notice the 'Show Custom' toast will not nudge the FABs positions since a custom parent was specified.</span> </p> <div layout="row" layout-sm="column" layout-align="space-around"> <div style="width:50px"></div> <md-button ng-click="showSimpleToast()"> Show Simple </md-button> <md-button class="md-raised" ng-click="showActionToast()"> Show With Action </md-button> <md-button ng-click="showCustomToast()"> Show Custom </md-button> <div style="width:50px"></div> </div> <div layout="row" id="toastBounds"> <div> <br> <b>Toast Position: "{{getToastPosition()}}"</b> <br> <md-checkbox ng-repeat="(name, isSelected) in toastPosition" ng-model="toastPosition[name]"> {{name}} </md-checkbox> </div> </div> <div layout="row"> <md-button class="md-primary md-fab md-fab-bottom-right"> FAB </md-button> <md-button class="md-accent md-fab md-fab-top-right"> FAB </md-button> </div>
<script type="text/ng-template" id="toast-template.html"><md-toast> <span flex>Custom toast!</span> <md-button ng-click="closeToast()"> Close </md-button>
</md-toast>
</script></div>
<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license.
--> <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js'></script>
<script src='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.0.8/angular-material.js'></script> <script src="js/index.js"></script>
</body>
</html>

Basic Usage - Script Codes CSS Codes

/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license.
*/

Basic Usage - Script Codes JS Codes

angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('AppCtrl', function($scope, $mdToast, $document) { var last = { bottom: false, top: true, left: false, right: true }; $scope.toastPosition = angular.extend({},last); $scope.getToastPosition = function() { sanitizePosition(); return Object.keys($scope.toastPosition) .filter(function(pos) { return $scope.toastPosition[pos]; }) .join(' '); }; function sanitizePosition() { var current = $scope.toastPosition; if ( current.bottom && last.top ) current.top = false; if ( current.top && last.bottom ) current.bottom = false; if ( current.right && last.left ) current.left = false; if ( current.left && last.right ) current.right = false; last = angular.extend({},current); } $scope.showCustomToast = function() { $mdToast.show({ controller: 'ToastCtrl', templateUrl: 'toast-template.html', parent : $document[0].querySelector('#toastBounds'), hideDelay: 6000, position: $scope.getToastPosition() }); }; $scope.showSimpleToast = function() { $mdToast.show($mdToast.simple() .textContent('fuck') .action('close') .highlightAction(true) .position('bottom left') .hideDelay(6000)); }; $scope.showActionToast = function() { var toast = $mdToast.simple() .textContent('Action Toast!') .action('OK') .highlightAction(false) .position($scope.getToastPosition()); $mdToast.show(toast).then(function(response) { if ( response == 'ok' ) { alert('You clicked \'OK\'.'); } }); };
})
.controller('ToastCtrl', function($scope, $mdToast) { $scope.closeToast = function() { $mdToast.hide(); };
});
/**
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license.
**/
Basic Usage - Script Codes
Basic Usage - Script Codes
Home Page Home
Developer Roman Diaz
Username romandiaz
Uploaded July 23, 2022
Rating 3
Size 3,310 Kb
Views 30,360
Do you need developer help for Basic Usage?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Roman Diaz (romandiaz) Script Codes
Name
The Creation of Adam - Pure CSS
CSS full size background
Snazzy glass buttons
A Pen by Roman Diaz
4 Element CSS Clock
Pure CSS tooltips
Browser window
A Pen by Roman Diaz
Obligatory CSS3 UI Nav
The Creation of Adam - Pure CSS
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!