Vật liệu góc: cách thiết lập màu nền (không có CSS)

Question

Tôi đang phát triển một ứng dụng Material Design thuần túy bằng cách sử dụng khung Vật liệu góc.

Tuy nhiên, tôi không hiểu cách đặt màu nền của vùng chứa (ví dụ: biểu mẫu đăng nhập có nền màu xanh lam). Tôi có thể làm điều đó bằng cách sử dụng CSS của khóa học nhưng tôi tự hỏi nếu có một built-in chỉ thị/chủ đề tùy chọn để làm điều này.

Answer 1

Tôi khá chắc chắn rằng tôi đã thấy điều này ở đâu đó trong tài liệu, nhưng tôi không thể tìm thấy nó ngay bây giờ. Bạn cần phải làm hai việc khác nhau:

1. thiết .backgroundPalette('indigo') cùng cách như bạn thiết lập chủ đề chính
2. tạo chứa

Tôi có kiểm tra xem nó trên 0.8.1 phiên bản của góc-vật chất và nó hoạt động được.

Vui lòng hỏi, nếu bạn có bất kỳ câu hỏi nào khác.

Ví dụ:

app.config(function ($mdThemingProvider) { 
    $mdThemingProvider 
    .theme('default') 
    .primaryPalette('indigo') 
    .accentPalette('pink') 
    .warnPalette('red') 
    .backgroundPalette('blue-grey'); 
}); 

và trong mẫu của bạn:

<md-content> 
    <p>Some text</p> 
</md-content> 

Answer 2

Trên một sidenote, bỏ qua "không có css" một phần của câu hỏi, tôi thấy rằng những người sáng tạo góc Chất liệu sử dụng đơn giản css cũ để tạo màu nền, xem this codepen (bạn cũng tìm thấy điều này thông qua phần Getting Started: "Ngã ba mã").

html

<div id="content" ng-view flex> </div> 

css

.demo #content { 
    background-color: rgb(255, 244, 220); 
    padding:30px; 
    font-weight:600; 
    border: 1px solid #aeaeae; 
    border-top:none; 
} 

Answer 3

Bạn có thể đặt bất kỳ màu sắc từ bảng màu với md-màu sắc chỉ thị.

https://material.angularjs.org/1.1.4/api/directive/mdColors

Định dạng sẽ [chủ đề?] - [bảng] - [sắc?] - nơi [opacity?]? có nghĩa là tham số tùy chọn.

Nhưng từ kinh nghiệm của tôi, bạn phải xác định chủ đề ngay cả khi nó mặc định:

<md-button md-colors="{color: 'default-red-A100', 'background': 'default-primary-600'}">Button</md-button>