Winkelmaterial - WhiteFrame
Angular Material hat mehrere spezielle Klassen, um Behälter als papierähnliche Karten mit Schatten anzuzeigen.
In der folgenden Tabelle sind die verschiedenen Klassen mit ihrer Beschreibung aufgeführt.
| Sr.Nr. | Klassenname & Beschreibung |
|---|---|
| 1 | md-whiteframe-1dp Dadurch wird ein Container für jeden HTML-Inhalt mit einem umrandeten Schatten von 1 Pixel formatiert. Fügt eine Tiefe von 1 hinzu. |
| 2 | md-whiteframe-2dp Dadurch wird ein Container für jeden HTML-Inhalt mit 2px-Schatten umrandet. Fügt eine Tiefe von 2 hinzu. |
| 3 | md-whiteframe-3dp Dadurch wird ein Container für jeden HTML-Inhalt mit 3px-Schatten umrandet. Fügt eine Tiefe von 3 hinzu. |
| 4 | md-whiteframe-4dp Dadurch wird ein Container für jeden HTML-Inhalt mit 4px-Schatten umrandet. Fügt eine Tiefe von 4 hinzu. |
| 5 | md-whiteframe-5dp Dadurch wird ein Container für jeden HTML-Inhalt mit einem 5-Pixel-Schatten umrandet. Fügt eine Tiefe von 5 hinzu. |
| 6 | md-whiteframe-6dp Dadurch wird ein Container für jeden HTML-Inhalt mit 6px-Schatten umrandet. Fügt eine Tiefe von 6 hinzu. |
| 7 | md-whiteframe-7dp Dadurch wird ein Container für jeden HTML-Inhalt mit einem 7px-Schatten umrandet. Fügt eine Tiefe von 7 hinzu. |
| 8 | md-whiteframe-8dp Dadurch wird ein Container für jeden HTML-Inhalt mit 8px-Rahmenschatten formatiert. Fügt eine Tiefe von 8 hinzu. |
| 9 | md-whiteframe-9dp Dadurch wird ein Container für jeden HTML-Inhalt mit 9px-Schatten gestaltet. Fügt eine Tiefe von 9 hinzu. |
| 10 | md-whiteframe-10dp Dadurch wird ein Container für jeden HTML-Inhalt mit einem 10-Pixel-Schatten umrandet. Fügt eine Z-Tiefe von 10 hinzu. |
| 11 | md-whiteframe-11dp Dadurch wird ein Container für jeden HTML-Inhalt mit einem 11-Pixel-Schatten umrandet. Fügt eine Z-Tiefe von 11 hinzu. |
| 12 | md-whiteframe-12dp Dadurch wird ein Container für jeden HTML-Inhalt mit 12px-Rahmenschatten formatiert. Fügt eine Z-Tiefe von 12 hinzu. |
| 13 | md-whiteframe-13dp Dadurch wird ein Container für jeden HTML-Inhalt mit einem 13-Pixel-Schatten umrandet. Fügt eine Z-Tiefe von 13 hinzu. |
| 14 | md-whiteframe-14dp Dadurch wird ein Container für jeden HTML-Inhalt mit einem 14px großen Schatten formatiert. Fügt eine Z-Tiefe von 14 hinzu. |
| 15 | md-whiteframe-15dp Dadurch wird ein Container für jeden HTML-Inhalt mit einem umrandeten Schatten von 15 Pixel formatiert. Fügt eine Z-Tiefe von 15 hinzu. |
| 16 | md-whiteframe-16dp Dadurch wird ein Container für jeden HTML-Inhalt mit einem 16-Pixel-Schatten umrandet. Fügt eine Z-Tiefe von 16 hinzu. |
| 17 | md-whiteframe-17dp Dadurch wird ein Container für jeden HTML-Inhalt mit einem 17-Pixel-Rahmenschatten formatiert. Fügt eine Z-Tiefe von 17 hinzu. |
| 18 | md-whiteframe-18dp Dadurch wird ein Container für jeden HTML-Inhalt mit einem 18-Pixel-Schatten umrandet. Fügt eine Z-Tiefe von 18 hinzu. |
| 19 | md-whiteframe-19dp Dadurch wird ein Container für jeden HTML-Inhalt mit einem 19px-Rahmenschatten formatiert. Fügt eine Z-Tiefe von 19 hinzu. |
| 20 | md-whiteframe-20dp Dadurch wird ein Container für jeden HTML-Inhalt mit einem 20-Pixel-Schatten umrandet. Fügt eine Z-Tiefe von 20 hinzu. |
| 21 | md-whiteframe-21dp Dadurch wird ein Container für jeden HTML-Inhalt mit einem 21-Pixel-Schatten umrandet. Fügt eine Z-Tiefe von 21 hinzu. |
| 22 | md-whiteframe-22dp Dadurch wird ein Container für jeden HTML-Inhalt mit einem 22-Pixel-Schatten umrandet. Fügt eine Z-Tiefe von 22 hinzu. |
| 23 | md-whiteframe-23dp Dadurch wird ein Container für jeden HTML-Inhalt mit einem 23px großen Schatten formatiert. Fügt eine Z-Tiefe von 23 hinzu. |
| 24 | md-whiteframe-24dp Dadurch wird ein Container für jeden HTML-Inhalt mit einem 24-Pixel-Schatten umrandet. Fügt eine Z-Tiefe von 24 hinzu. |
Beispiel
Das folgende Beispiel zeigt die Verwendung von Schattenklassen.
am_whiteframes.htm
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.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-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.frameContainer md-whiteframe {
background: #fff;
margin: 30px;
height: 100px;
}
</style>
<script language = "javascript">
angular
.module('firstApplication', ['ngMaterial'])
.controller('frameController', frameController);
function frameController ($scope) {
}
</script>
</head>
<body ng-app = "firstApplication">
<div class = "frameContainer" ng-controller = "frameController as ctrl"
layout = "row" layout-padding layout-wrap layout-fill
style = "padding-bottom: 32px;" ng-cloak>
<md-whiteframe class = "md-whiteframe-1dp" flex-sm = "45" flex-gt-sm = "35"
flex-gt-md = "25" layout layout-align = "center center">
<span>.md-whiteframe-1dp</span>
</md-whiteframe>
<md-whiteframe class = "md-whiteframe-2dp" flex-sm = "45" flex-gt-sm = "35"
flex-gt-md = "25" layout layout-align = "center center">
<span>.md-whiteframe-2dp</span>
</md-whiteframe>
<md-whiteframe class = "md-whiteframe-3dp" flex-sm = "45" flex-gt-sm = "35"
flex-gt-md = "25" layout layout-align = "center center">
<span>.md-whiteframe-3dp</span>
</md-whiteframe>
<md-whiteframe class = "md-whiteframe-10dp" flex-sm = "45" flex-gt-sm = "35"
flex-gt-md = "25" layout layout-align = "center center">
<span>.md-whiteframe-10dp</span>
</md-whiteframe>
<md-whiteframe class = "md-whiteframe-15dp" flex-sm = "45" flex-gt-sm = "35"
flex-gt-md = "25" layout layout-align = "center center">
<span>.md-whiteframe-15dp</span>
</md-whiteframe>
<md-whiteframe class = "md-whiteframe-20dp" flex-sm = "45" flex-gt-sm = "35"
flex-gt-md = "25" layout layout-align = "center center">
<span>.md-whiteframe-20dp</span>
</md-whiteframe>
<md-whiteframe class = "md-whiteframe-22dp" flex-sm = "45" flex-gt-sm = "35"
flex-gt-md = "25" layout layout-align = "center center">
<span>.md-whiteframe-22dp</span>
</md-whiteframe>
<md-whiteframe class = "md-whiteframe-23dp" flex-sm = "45" flex-gt-sm = "35"
flex-gt-md = "25" layout layout-align = "center center">
<span>.md-whiteframe-23dp</span>
</md-whiteframe>
<md-whiteframe class = "md-whiteframe-24dp" flex-sm = "45" flex-gt-sm = "35"
flex-gt-md = "25" layout layout-align = "center center">
<span>.md-whiteframe-24dp</span>
</md-whiteframe>
</div>
</body>
</html>Ergebnis
Überprüfen Sie das Ergebnis.