angular-material => MD 버튼

유형

각도 및 각도 재질 라이브러리를 연결하십시오!

index.html :

<html ng-app="mdButtonApp">
    <head>
        <!-- Import Angular -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-aria.min.js"></script>
        <!-- Angular Material -->
        <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.5.8/angular-material.min.js"></script>
        <link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css" rel="stylesheet">
        <script src="app.js"></script>
    </head>
    <body>
        <md-content ng-controller="mdButtonController">
            <!-- Normal `md-button` -->
            <md-button>Normal</md-button>
            <md-button class="md-primary">{{text}}</md-button>
            <md-button class="md-accent">{{text}}</md-button>
            <md-button class="md-warn" ng-href="{{link}}">Google</md-button>
            <md-button class="md-raised" ng-click="goToLink('http://example.com')">Link</md-button>
            <md-button class="md-cornered md-primary md-hue-1">{{text}}</md-button>
            <md-button class="md-accent md-hue-2">Some Button</md-button>
            <md-button class="md-warn md-hue-3" ng-href="{{link}}">{{text}}</md-button>
        </md-content>
    </body>
</html>

app.js :

angular.module('mdButtonApp', ['ngAnimate', 'ngAria', 'ngMaterial', 'ngMessages'])
.controller('mdButtonController', function($scope) {
$scope.text = "Button";
$scope.link = "https://google.com";
$scope.goToLink = function(link) {
        // Go to some site
        console.log('Redirecting to:' + link);
        window.location.href=link;
    }
})

아이콘 버튼 만들기

이 예제는 아이콘 버튼을 얻기 위해 <md-button> 에 적용되어야하는 md-icon-button 클래스를 사용할 것입니다.

접근 용이성을 위해 <md-button> 에 aria-label 속성을 추가하는 것이 좋습니다. 그렇지 않으면 ARIA provider 가 aria-label 이 없음을 경고합니다.
일반적으로 <md-button> 속성에는 <md-icon> 요소가 있습니다.
선택적으로 버튼에 대한 툴팁을 제공하는 <md-tooltip> 요소가있을 수도 있습니다.

이 예는 Google의 Material Icons를 사용합니다.

index.html :

<html ng-app="mdIconButtonApp">
    <head>
        <!-- Import Angular -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-animate.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-aria.min.js"></script>
        <!-- Angular Material -->
        <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.5.11/angular-material.min.js"></script>
        <link href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.css" rel="stylesheet">
        <!-- Material Icons -->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet">
        <!-- Roboto -->
        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
        <!-- app.js -->
        <script src="app.js"></script>
        <style>
            body {
                font-family: Roboto, sans-serif;
            }
        </style>
    </head>
    <body>
        <md-content ng-controller="mdIconButtonController">
            <!--
            Normal `md-button`
            Note that it is recommended to add a `aria-label` to `md-icon-button` for accessibility purposes.
            -->
            <md-button class="md-icon-button" aria-label="{{ariaLabel}}">
                <md-icon class="material-icons">menu</md-icon>
            </md-button>
            <md-button class="md-primary md-icon-button" aria-label="{{ariaLabel}}">
                <md-icon class="material-icons">menu</md-icon>
                <md-tooltip>This is a tooltip!</md-tooltip>
            </md-button>
            <md-button class="md-accent md-icon-button md-fab" ng-click="goToLink('https://github.com/android')" aria-label="Go To Android">
                <md-icon class="material-icons">android</md-icon>
            </md-button>
            <md-button class="md-warn md-icon-button" ng-href="{{link}}" aria-label="{{ariaLabel}}">
                <md-icon class="material-icons">{{icon}}</md-icon>
            </md-button>
            <md-button class="md-raised md-icon-button" ng-click="goToLink('http://example.com')">
                <!-- Note that you must have $mdIconProvider for this -->
                <md-icon md-svg-icon="link"></md-icon>
            </md-button>
            <md-button class="md-cornered md-primary md-hue-1 md-icon-button" aria-label="{{ariaLabel}}">
                <!-- You can also use the source of SVG -->
                <md-icon md-svg-src="/path/to/more.svg"></md-icon>
            </md-button>
            <md-button class="md-accent md-hue-2" aria-label="{{ariaLabel}}">
                <md-icon class="material-icons">g-translate</md-icon>
            </md-button>
            <md-button class="md-warn md-hue-3 md-icon-button" ng-href="{{link}}" aria-label="Link">
                <md-icon md-svg-icon="copyright"></md-icon>
            </md-button>
        </md-content>
    </body>
</html>

app.js :

angular.module('mdIconButtonApp', ['ngAnimate', 'ngAria', 'ngMaterial', 'ngMessages'])
.config(function($mdIconProvider) {
    // Configure iconsets: More info: https://material.angularjs.org/latest/api/service/$mdIconProvider
    $mdIconProvider.iconSet('/path/to/media-icons.svg')
                   .defaultIconSet('/path/to/icons.svg')
                   .icon('sample-icon', '/path/to/sample-icon.svg');
})
.controller('mdIconButtonController', function($scope) {
$scope.ariaLabel = "Button";
$scope.icon = "menu";
$scope.link = "https://google.com";
$scope.goToLink = function(link) {
    // Go to some site
    console.log('Redirecting to:' + link);
    window.location.href=link;
    }
})

표준 단추

그럼, 어떻게하면 <md-button> 을 만들 수 있습니까? <md-button> 의 텍스트와 함께 <md-button> 을 입력하기 <md-button> 됩니다.

index.html :

<div ng-app="MdButtonApp">
    <md-content ng-controller="Controller">
        <h2 class="md-title">Simple <code>md-button</code></h2>
        <md-button>Some button</md-button>
        </md-content>
</div>

app.js :

// Just initialize the app
angular.module('MdButtonApp', ['ngMaterial'])
    .controller('Controller', function($scope) {})

Codepen 데모

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow

angular-material
MD 버튼

수색…

유형

아이콘 버튼 만들기

표준 단추