Các thành phần UI / UX trong Angular, được gọi là Vật liệu góc cạnh. Họgiúp Ứng dụng Angular hoạt động hiệu quả . Tuy nhiên, nếu bạn chưa biết về chúng thì đây là bài viết giúp bạn tìm hiểu chi tiết về Angular Materials. Ngoài ra, to có được kiến thức chuyên sâu về Angular, hãy cân nhắc đăng ký tham gia ' từ Edureka.
Trong bài viết này, tôi sẽ xem xét các chủ đề sau:
Giới thiệu về Vật liệu Angular
Nguyên vật liệu được giới thiệu như một ngôn ngữ thiết kế được Google phát triển vào năm 2014. Vật liệu thiết kế là một công cụcho các khuôn khổ front-end, giúp bạn trực quan , chuyển động và sự tương tác thiết kế. Nó cũng giúp bạn thích ứng trên các thiết bị khác nhau và các kích thước màn hình khác nhau. Đầu tiên, nó được gắn thẻ vào AngularJS để làm cho các ứng dụng này nhiều hơn hấp dẫn và biểu diễn nhanh hơn . Sau đó, Google đã viết lại hoàn toàn mã từ đầu và xóa JS, tức là , và đặt tên cho nó vào tháng 9 năm 2016. Sau đó, Google đã gắn thẻ Material Design thành Angular, sử dụng , và đặt tên cho nó là Vật liệu góc.
Vật liệu góc cạnh hoặc các thành phần Giao diện người dùng (UI) giúp bạn thiết kế ứng dụng của mình trong có cấu trúc cách thức. Họ thu hút người dùng và làm cho nó dễ dàng truy cập hơn các phần tử hoặc các thành phần có trong ứng dụng của bạn. Họ cũng giúp thiết kế các ứng dụng của bạn theo cách hấp dẫn, với phong cách và hình dạng . Các thành phần này giúp cải tiến ứng dụng của bạn thích hợp , Nhanh , linh hoạt và thậm chí cả thiết kế phản ứng nhanh nhẹn các trang web.
Cài đặt vật liệu góc
Bây giờ, hãy bắt đầu với hướng dẫn nhanh về cách cài đặt Angular Materials. Đầu tiên, hãy đảm bảo rằng bạn đã cài đặt Angular trong hệ thống của mình. Nếu bạn chưa quen với Angular, hãy tham khảo liên kết trên . Khi bạn đã thiết lập xong mọi thứ, bạn có thể thêm Vật liệu Angular vào dự án của mình bằng lệnh sau:
của add @ angle / material
Đầu tiên, nó sẽ yêu cầu bạn chọn tên chủ đề dựng sẵn hoặc chủ đề tùy chỉnh.
Bạn cần chọn chủ đề dựng sẵn “Indigo / Pink” là chủ đề mặc định để tạo kiểu cho ứng dụng của bạn. Bạn cũng có thể chọn chủ đề “Tùy chỉnh” để có thể tùy chỉnh các tệp chủ đề của mình bao gồm tất cả các kiểu phổ biến.
Tiếp theo, nó sẽ yêu cầu bạn thiết lập HammerJS . HammerJS là một thư viện phổ biến, được sử dụng chủ yếu trong ứng dụng Angular. Nó hỗ trợ thêm cho các cử chỉ cảm ứng như Vuốt, Xoay, Chụm, Xoay và nhiều thao tác khác, đặc biệt là trong các ứng dụng di động.
Bạn có thể chọn “Có” hoặc “Không”. HammerJS có thể hữu ích khi bạn sử dụng ứng dụng của mình trên điện thoại di động. Khi điện thoại di động cung cấp màn hình cảm ứng, những cử chỉ này hữu ích hơn và có thể trông hợp thời trang trong ứng dụng di động của bạn.
Sau khi bạn chọn lựa chọn của mình, tiếp theo nó sẽ yêu cầu bạn thiết lập Ảnh động trình duyệt cho Vật liệu góc.
Bạn cần chọn “Có” để có thể sử dụng hình ảnh động trên ứng dụng của mình. Angular Animations làm cho ứng dụng của bạn thú vị hơn và dễ sử dụng hơn. Điều này có thể cải thiện ứng dụng và trải nghiệm người dùng của bạn, thu hút sự chú ý của người dùng.
Sau đó, nó sẽ cài đặt Angular Materials trong ứng dụng của bạn.
Thành phần vật liệu góc
Như đã đề cập trước đó, Thành phần Vật liệu Góc không có gì khác ngoài UI / UX Các thành phần thiết kế. Chúng chứa nhiều thành phần khác nhau như Điều khiển biểu mẫu, Điều hướng, Nút & Chỉ báo, Cửa sổ bật lên và nhiều thành phần khác. Các thành phần này giúp bạn triển khai các mẫu theo đặc tả của Material Design.
Tiếp tục, hãy xem một vài ví dụ về cách triển khai các thành phần này trong Ứng dụng Angular của bạn.
dẫn đường
Đầu tiên, tôi sẽ thảo luận về các thành phần trong Điều hướng.
- Thanh công cụ
Bạn cần nhập mã sau vào app.component.html để sử dụng thành phần Thanh công cụ trong ứng dụng của bạn.
Hướng dẫn Vật liệu Góc là một vùng chứa từ vật liệu Angular được sử dụng cho các tiêu đề và tiêu đề. Màu sắc của có thể thay đổi vùng chứa bằng cách sử dụng màu sắc bất động sản.Theo mặc định, các thanh công cụ sử dụng màu nền trung tính dựa trên chủ đề hiện tại, tức là sáng hoặc tối.Bạn có thể chọn ba chủ đề mặc định là: 'sơ cấp' , 'Giọng' , hoặc là 'cảnh báo' .Để sử dụng thanh công cụ này, trước tiên bạn cần nhập nó vào app.module.ts tập tin từ vật liệu Angular bằng lệnh sau:
nhập {MatToolbarModule} từ '@ angle / material'Sau đó, bạn cũng cần thêm mô-đun này vào nhập khẩu: [] phần nằm trong app.module.ts tập tin.
nhập: [BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatToolbarModule],
Đối với Mat-Toolbar, bạn cần thêm “ MatToolbarModule ”.
Bây giờ, hãy phục vụ dự án của bạn bằng lệnh sau:
giao bóng -o
Thao tác này sẽ mở dự án của bạn trên trình duyệt mặc định của hệ thống như hình dưới đây:
Nếu bạn muốn thay đổi màu của thanh công cụ theo lựa chọn của mình, bạn có thể thực hiện với sự trợ giúp của CSS stylesheet. Hãy để tôi cho bạn thấy một ví dụ.
Trước tiên, bạn cần xóa màu sắc tài sản từ và sau đó, nhập dòng sau CSS mã trong app.component.css tập tin.
mat-toolbar {background-color: / * color-of-your-choice * / color: / * text-color * /}Bây giờ, phục vụ dự án của bạn để xem kết quả.
- Thực đơn
Tiếp theo, tôi sẽ thảo luận về Thành phần Menu. Bạn cần nhập mã sau vào app.component.html tập tin.
Hướng dẫn Vật liệu Góc Menu Cài đặt Trợ giúpHãy thêm một số kiểu trên Thực đơn cái nút. Bạn cần nhập mã sau vào app.component.css tập tin.
.space {flex: 1 1 auto} .btns {width: 100px height: 40px font-size: large border-radius: 10px border: 3px solid # 113c89 background-color: lightcoral}class = ”khoảng trắng” được sử dụng để thêm khoảng cách giữa 'Tên thanh công cụ' và 'Tùy chọn menu'.
Trong trường hợp, bạn không quen với CSS stylesheet, bạn có thể tham khảo blog của chúng tôi trên để tìm hiểu sâu hơn.
Cũng giống như Thanh công cụ, để sử dụng và các container, bạn cần làm theo quy trình tương tự như trên, để nhập MatMenuModule và MatButtonModule từ vật liệu góc cạnh và thêm chúng vào nhập khẩu: [] phần nằm ở app.module.ts tập tin.
Phục vụ dự án của bạn ngay bây giờ để hiển thị đầu ra.
Kiểm soát biểu mẫu
Bây giờ, tôi sẽ thảo luận về các thành phần trong Kiểm soát biểu mẫu.
- Đơn mẫu
Như tên cho thấy, Trường-Biểu mẫu được sử dụng cho các đầu vào do người dùng cung cấp. Nó được sử dụng phổ biến nhất để đăng ký người dùng, trong một ứng dụng hoặc một trang web.
Bạn cần nhập mã sau vào app.component.html để sử dụng thành phần Trường-Biểu mẫu trong ứng dụng của bạn.
Kiểm soát biểu mẫu
Tên
Như thường lệ, bạn cần nhập MatFormFieldModule và MatInputModule và thêm chúng vào nhập khẩu: [] phần nằm trong app.module.ts tập tin. Đoạn mã trên thường được sử dụng để nhập các Tên như “First Name”, “Last Name”, v.v. Bạn thậm chí có thể sử dụng Validators và đặt một trường bắt buộc. Ví dụ, bạn có thể sử dụng nó cho trường E-mail. Bạn có thể ẩn hoặc hiện văn bản cho Mật khẩu. Để bạn tham khảo, hãy kiểm tra mã bên dưới:
Nhập email của bạn {{getErrorMessage ()}} Nhập mật khẩu của bạn {{hide? 'vision_off': 'khả năng hiển thị'}}Trong của bạn app.component.css tệp, bạn cần thêm mã sau:
.example-container {padding-left: 50px}Bây giờ, trong app.component.ts tệp, bạn cần nhập FormControl và Trình xác thực từ @ góc cạnh / hình thức danh mục.
nhập {FormControl, Validators} từ '@ angle / form'Bạn thậm chí cần thêm văn bản để hiển thị lỗi bên trong lớp sau.
export class AppComponent {email = new FormControl ('', [Validators.required, Validators.email]) getErrorMessage () {return this.email.hasError ('Required')? 'Bạn phải nhập một giá trị': this.email.hasError ('email')? 'Không phải là email hợp lệ': ''} hide = true}Đề cập đến quy trình trên, bạn cần nhập mã sau vào app.module.ts tệp để nhập các mô-đun cần thiết.
nhập {FormsModule, ReactiveFormsModule} từ '@ angle / form' nhập {MatIconModule} từ '@ angle / material'Sau đó, bạn cần thêm các mô-đun này vào nhập khẩu: [] phần.
- Nút radio
Các nút Radio thường được sử dụng để chọn một lựa chọn trong số các tùy chọn khác nhau. Bạn có thể kiểm tra mã sau để tham khảo.
Đối với app.component.html tập tin,
Giới tính
Nam nữ
Đối với app.component.css tập tin,
mat-radio-button {Padding-left: 50px}Bây giờ, bạn cần nhập MatRadioModule và thêm nó vào nhập khẩu: [] phần nằm trong app.module.ts tập tin.
Sau đó, bạn cần phục vụ dự án của mình để hiển thị đầu ra.
Tiếp tục, tôi sẽ thảo luận về Angular Material CDK.
Vật liệu góc CDK
CDK, còn được gọi là Bộ công cụ phát triển thành phần , là một thư viện của hành vi xác định trước trong Angular Material, là một bộ công cụ triển khai mô hình tương tác và tính năng ứng dụng . Nó không có bất kỳ kiểu dáng nào dành riêng cho Material Design. Hãy xem một ví dụ về CDK.
- Trương Văn bản
Thành phần Trường Văn bản cung cấp các tiện ích để làm việc với các trường nhập văn bản. Bạn có thể sử dụng các thành phần CDK trên Trường Văn bản để thay đổi kích thước đầu vào. Hãy xem một ví dụ về cách triển khai nó.
Đối với app.component.html tập tin,
Vật liệu góc CDK
Kích thước phông chữ 10px 12px 14px 16px 18px 20px Tự động kích thước văn bản
Cho app.component.ts , bạn cần nhập các thành phần cần thiết trước.
nhập {CdkTextareaAutosize} từ '@ angle / cdk / text-field' import {NgZone, ViewChild} từ '@ angle / core' import {take} từ 'rxjs / operator'Bây giờ, bạn cần nhập mã sau vào bên trong lớp.
cách thực hiện các bảng lồng nhau trong html
export class AppComponent {constructor (private _ngZone: NgZone) {} @ViewChild ('autosize', {static: false}) autosize: CdkTextareaAutosize triggerResize () {this._ngZone.onStable.pipe (take (1)) .subscribe (( ) = & ampampampgt this.autosize.resizeToFitContent (true))}}Tiếp theo, bạn cần nhập MatSelectModule và thêm nó vào nhập khẩu: [] phần nằm trong app.module.ts tập tin.
Cuối cùng, bạn cần phục vụ dự án của mình để hiển thị đầu ra.
Đây không phải là kết luận và có một số thành phần khác trong Vật liệu góc. Bạn có thể tham khảo chúng từ Trang web chính thức của Vật liệu góc.
Với điều này, tôi xin kết thúc blog của mình. Tôi hy vọng bạn hiểu rõ về các nguyên tắc cơ bản của Vật liệu góc.Nếu bạn có bất kỳ nghi ngờ hoặc thắc mắc nào liên quan đến bài viết này, đừng ngần ngại đăng chúng trong phần bình luận bên dưới.
Nếu bạn muốn tìm hiểu tất cả những gì bạn vừa học được từ blog này và nhiều hơn nữa về Angular và hỗ trợ sự nghiệp của bạn hướng tới một Nhà phát triển Angular thành thạo, sau đó xem xét đăng ký tham gia ' .
Có một câu hỏi cho chúng tôi? Vui lòng đề cập đến nó trong phần nhận xét của blog “Angular Material” này và chúng tôi sẽ liên hệ lại với bạn trong thời gian sớm nhất.