Açısal malzeme teması nasıl kullanılır?

Açısal Malzeme için bir tohum projesi yaptım ve çerçevenin sunduğu bazı özellikleri gözden geçirmek istiyorum. HTML'm iyi çalışıyor ve diğer ng eylemleri de iyi çalışıyor.Açısal malzeme teması nasıl kullanılır?

Form özelliğini denetlemeye çalıştığımda, sayfa oluşturulur, ancak tema ve diğer eylemler çalışmaz. Form özelliğini keşfettiğim için Angular Material input demo'a başvuruyorum. Tema modülünü ekledim ama çalışmıyor.

Module.js

var app = angular.module('Tool', ["ng","ngAnimate","ngAria", 'ngMaterial','ngMessages', 'ui.router', 'ngCookies', 'ngResource','ngRoute', 'satellizer', 'myConfig.config']) 
    .config(function($authProvider,$mdThemingProvider) { 
     $authProvider.google({ 
      clientId: 'XXXXXX', 
      url: '/auth/google', 
      authorizationEndpoint: 'https://accounts.google.com/o/oauth2/auth', 
      redirectUri: "http://localhost:8585" || window.location.origin || window.location.protocol + '//' + window.location.host, 
      requiredUrlParams: ['scope'], 
      optionalUrlParams: ['display'], 
      scope: ['profile', 'email'], 
      scopePrefix: 'openid', 
      scopeDelimiter: ' ', 
      display: 'popup', 
      type: '2.0', 
      popupOptions: { width: 452, height: 633 } 
     }); 

     $mdThemingProvider.theme('docs-dark', 'default') 
     .primaryPalette('yellow') 
     .dark(); 

    });

Route.js

'use strict'; 

/** 
* Route configuration. 
*/ 
angular.module('Tool').config(['$stateProvider', '$urlRouterProvider', 
    function($stateProvider, $urlRouterProvider) { 

     // For unmatched routes 
     $urlRouterProvider.otherwise('/'); 

     // Application routes 
     $stateProvider 
      .state('index', { 
       url: '/', 
       templateUrl: 'templates/newpage.html' 
      }) 

    } 
]);

index.html

<!doctype html> 
<html lang="en" ng-app="Tool"> 
<head> 
    <meta charset="utf-8"> 
    <title>Tool</title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> 
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> 
    <!-- build:css(.) styles/vendor.css --> 
    <!-- bower:css --> 
    <link rel="stylesheet" href="bower_components/angular-material/angular-material.css" /> 
    <!-- endbower --> 
    <!-- endbuild --> 
    <!-- build:css(.tmp) styles/main.css --> 
    <!-- endbuild --> 
</head> 
<body> 
<h1> 
    Welcome to new Tool 
</h1> 

<md-button class="md-primary">Click me</md-button> 
<md-button class="md-accent">or maybe me</md-button> 
<md-button class="md-warn">Careful</md-button> 

<div ng-controller="DemoCtrl" layout="column"> 
    <md-content md-theme="docs-dark" layout-padding layout="row" layout-sm="column"> 
    <md-input-container> 
     <label>Title</label> 
     <input ng-model="user.title"> 
    </md-input-container> 
    <md-input-container> 
     <label>Email</label> 
     <input ng-model="user.email" type="email"> 
    </md-input-container> 
    </md-content> 
    <md-content layout-padding> 
    <form name="userForm"> 
     <div layout layout-sm="column"> 
     <md-input-container style="width:80%"> 
      <label>Company (Disabled)</label> 
      <input ng-model="user.company" disabled> 
      </md-input-container> 
     <md-input-container flex> 
      <label>Submission Date</label> 
      <input type="date" ng-model="user.submissionDate"> 
     </md-input-container> 
     </div> 
     <div layout layout-sm="column"> 
     <md-input-container flex> 
      <label>First name</label> 
      <input ng-model="user.firstName"> 
     </md-input-container> 
     <md-input-container flex> 
      <label>Last Name</label> 
      <input ng-model="theMax"> 
     </md-input-container> 
     </div> 
     <md-input-container flex> 
     <label>Address</label> 
     <input ng-model="user.address"> 
     </md-input-container> 
     <md-input-container md-no-float> 
     <input ng-model="user.address2" placeholder="Address 2"> 
     </md-input-container> 
     <div layout layout-sm="column"> 
     <md-input-container flex> 
      <label>City</label> 
      <input ng-model="user.city"> 
     </md-input-container> 
     <md-input-container flex> 
      <label>State</label> 
      <input ng-model="user.state"> 
     </md-input-container> 
     <md-input-container flex> 
      <label>Postal Code</label> 
      <input ng-model="user.postalCode"> 
     </md-input-container> 
     </div> 
     <md-input-container flex> 
     <label>Biography</label> 
     <textarea ng-model="user.biography" columns="1" md-maxlength="150"></textarea> 
     </md-input-container> 
    </form> 
    </md-content> 
</div> 


<!--[if lt IE 7]> 
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade 
    your browser</a> to improve your experience.</p> 
<![endif]--> 

<!-- endbuild --> 

<!-- build:js(.) scripts/vendor.js --> 
<!-- bower:js --> 
<script src="bower_components/angular/angular.js"></script> 
<script src="bower_components/angular-animate/angular-animate.js"></script> 
<script src="bower_components/angular-cookies/angular-cookies.js"></script> 
<script src="bower_components/angular-resource/angular-resource.js"></script> 
<script src="bower_components/angular-route/angular-route.js"></script> 
<script src="bower_components/angular-aria/angular-aria.js"></script> 
<script src="bower_components/angular-material/angular-material.js"></script> 
<!-- endbower --> 
<!-- endbuild --> 

</body> 
</html>

democtrl.js

/** * Demo Kontrolör */

angular.module('Tool','ngMaterial','ngMessages') 
    .controller('DemoCtrl', ['$scope', DemoCtrl]); 

function DemoCtrl($scope) { 
$scope.user = { 
     title: 'Developer', 
     email: '[email protected]', 
     firstName: '', 
     lastName: '' , 
     company: 'Google' , 
     address: '1600 Amphitheatre Pkwy' , 
     city: 'Mountain View' , 
     state: 'CA' , 
     biography: 'Loves kittens, snowboarding, and can type at 130 WPM.\n\nAnd rumor has it she bouldered up Castle Craig!', 
     postalCode : '94043' 
    }; 

}

Sorunu varsayıyorum

{ 
    "name": "angular-material", 
    "version": "0.0.1", 
    "description": "An AngularJS implementation of the responsive dashboard", 
    "main": "index.html", 
    "license": "MIT", 
    "ignore": [ 
     "**/.*", 
     "node_modules", 
     "bower_components", 
     "test", 
     "tests" 
    ], 
    "dependencies": { 
     "angular-cookies": "~1.2.21", 
     "angular-ui-router": "^0.2.10", 
     "font-awesome": "~4.1.0", 
     "angular-resource": "~1.3.0", 
     "angular": "^1.4.6", 
     "angular-animate": "^1.4.6", 
     "angular-aria": "^1.4.6", 
     "angular-material": "^0.11.2", 
     "angular-route": "~1.3.*", 
     "gulp-ng-config": "~1.2.1", 
     "angular-animate": "^1.4.6", 
     "satellizer": "~0.12.5" 
    }, 
    "repository": { 
     "type": "git", 
     "url": "xxx" 
    }, 
     "devDependencies": { 
    "angular-material": "xxx" 
    } 
}

kaynak

2015-10-20 Anonymous

Bir vurgu paleti belirtmeyi denediniz mi? $ mdThemingProvider.theme ('xxxxxx', 'varsayılan') .primaryPalette ('mavi') .accentPalette ('turuncu') ' –

CSS yapısı css'yi almadı, bu yüzden .bowerrc'yi şu şekilde güncelleştirdim: "dizin": "src/components /", daha önce eksikti ve çalıştı ama bazı özellikler hala eksik. Üzerinde çalışılması bittiğinde güncellenir. –

Gördüğümden (index.html), mdContent için md-theme = "docs-theme" ı bildiriyorsunuz, ancak mdButton'lar tema sınıflarıyla md-primary/md-accent/md-warn bu bildirimin dışında yer alıyor. İçeri sokmayı dene? Ayrıca, tüm AM bileşenlerinin temayı desteklemediğini unutmayın (bkz. Https://material.angularjs.org/latest/Theming/02_declarative_syntax). –

bower.json olmamak düğmeleri geliyor temalı. Sorun buysa, yapılandırdığınız tema varsayılan tema değildir; "docs-dark" temasıdır ve yalnızca atandığı md-content bloklarında kullanılabilir.

Öyle gibi varsayılan tema yapılandırabilirsiniz:

Module.js Şimdi .dark() ve .primaryPalette('yellow') küresel uygulanacaktır

'use strict' 

var app = angular.module('Tool', ["ng","ngAnimate","ngAria", 
    'ngMaterial','ngMessages', 'ui.router', 'ngCookies','ngResource','ngRoute', 
    'satellizer', 'myConfig.config']) 
.config(function($mdThemingProvider) { 
    $mdThemingProvider.theme('default') 
    .primaryPalette('yellow') // I like green, but just me 
    .dark(); // Dark is pretty cool.

kaynak

2015-11-04 18:17:26

authProvider gerekli değildir. – zygimantus

Doğru, düzeltildiniz! –

Açısal malzeme teması nasıl kullanılır?

cevap

İlgili konular