Các chỉ thị ion VS Các chỉ thị vật liệu góc với Ionic Framework


98

Tôi muốn sử dụng ion với material design. Tôi đang mắc kẹt giữa việc sử dụng các lệnh ion với CSS tùy chỉnh và vật liệu góc cạnh

Tôi đã đọc rằng sử dụng chỉ thị ion, chúng tôi nhận được rất nhiều tính năng hiệu quả như

  • Dữ liệu ứng dụng được ghi nhớ với bộ định tuyến giao diện người dùng, ngay cả sau khi điều hướng đến chế độ xem khác và quay lại trang

  • Các mục danh sách ion chỉ được hiển thị đến chiều cao hiển thị và được sử dụng lại khi cuộn xuống hoặc cuộn lên

và rất nhiều cải tiến về hiệu suất.

Nhưng, nếu tôi sử dụng chỉ thị ion thì chúng không có thiết kế material design.

Nếu tôi sử dụng vật liệu góc cạnh, tôi sẽ không có những cải tiến hiệu suất này và các tính năng bổ sung cần thiết cho ứng dụng di động.

Các chỉ thị Angular-material giống như

<md-list>
  <md-item ng-repeat="item in items">
    Hello, {{item}}!
  </md-item>
</md-list>

Các chỉ thị ion giống như

<ion-list>
  <ion-item ng-repeat="item in items">
    Hello, {{item}}!
  </ion-item>
</ion-list>

Có vẻ như Ionic đang tài trợ cho việc phát triển dự án vật liệu góc , vậy tại sao vật liệu góc lại không tương thích để sử dụng với ion?

Làm cách nào để tôi có thể sử dụng các thành phần vật liệu góc cạnh mà không làm mất đi các cải tiến hiệu suất và các tính năng của ion?

HOẶC LÀ

có ý tưởng tốt hơn cho việc sử dụng thiết kế material design với ion không?


Chắc chắn sẽ mất một khoảng thời gian, cho đến khi ngMaterial và ion hoạt động với nhau. Ionic luôn phải hỗ trợ iOS. Tôi không chắc Ionix đang hướng tới thiết kế khôn ngoan ở đâu. Khi dự án bắt đầu, họ muốn các ứng dụng trông giống hệt nhau trên tất cả các nền tảng. Họ đã loại bỏ mục tiêu đó một thời gian trước và bây giờ đang hướng tới tính liên tục của nền tảng hơn, điều này cũng được thể hiện qua tin tuyển dụng. Bạn có thể muốn hỏi trực tiếp các nhà phát triển (diễn đàn Ionic là một nơi tốt để hỏi) về lộ trình thiết kế material design.
Markus Müller

1
Tôi đã đăng trong các diễn đàn ion, không có may mắn. Một số ứng dụng của google đang sử dụng material design trên cả Android và iOS. Nhưng tôi hiện đang quan tâm đến Android. iOS đắt hơn và hàng năm :(. Nó chỉ không khuyến khích những người mới bắt đầu như tôi tham gia iOS. Tôi nghĩ iOS nên sử dụng khoản phí giới hạn cho tài khoản nhà phát triển.
Vamsi

Tôi chắc chắn rằng họ sẽ công bố lộ trình post v1 trong tương lai gần.
Markus Müller

Câu trả lời:


71

Tôi đã tìm thấy một khung CSS thiết kế material design được gọi là Materializecss . Nó có vẻ đầy hứa hẹn. Nó chỉ đơn giản là CSS và khung javascript.

http://materializecss.com/

Ưu điểm so với các khuôn khổ khác

  1. Các lớp CSS thuần túy, sẽ không xung đột với các chỉ thị ion. Không giảm hiệu suất.
  2. Trong tất cả các khuôn khổ tôi đã thấy, đây là khuôn khổ duy nhất tuân thủ chặt chẽ các quy tắc thiết kế material design
  3. Gần như đã sẵn sàng, nó có khoảng hơn 50 cộng tác viên, phiên bản hiện tại 0.95.3 trong vòng chưa đầy 6 tháng
  4. Dễ sử dụng. Được ghi chép tốt với tính năng điều hướng khôn ngoan.
  5. Nó có gần như tất cả các tính năng material design cần thiết cho một ứng dụng.

Trang này http://materializecss.com/getting-started.html sẽ chỉ cho bạn cách đưa nó vào các dự án của mình.

Tôi hy vọng điều này sẽ giúp ích cho bất kỳ bạn nào đang tìm kiếm một khung thiết kế material design tốt.

CẬP NHẬT: 2015-07-09

Tôi đã tìm thấy một khung CSS đẹp, mạnh mẽ nhẹ khác cho material design

Material Design Light http://www.getmdl.io/

Nó nhẹ, có hình ảnh động mượt mà và nhanh chóng, trông khá đẹp. Nó được tạo ra bởi một trong những nhà phát triển của Google. Nó được chính thức quảng bá bởi google https://developers.google.com/web/ . Nó đang trở nên khá phổ biến, hãy thử nó. So sánh với Vật liệu dạng góc

CẬP NHẬT: 2015-10-23

Ionic2 có hỗ trợ InBuilt cho thiết kế Material Design trong Android

Đó là chính thức, Bạn có thể xem bản demo Ionic2 trong AngularConnect , Nó có thiết kế Material Design làm mặc định cho Android. Chúng ta không cần phải lo lắng về việc chọn khung Material Design.


1
Các vấn đề lớn với điều này là nó cần jQuery
darryn.ten

1
Chúng tôi chỉ cần css. Popup's, modals và các tính năng khác tồn tại ở dạng ion. Vì vậy, jquery hầu như không cần thiết trừ khi chúng tôi đang cố gắng sử dụng các tính năng javascript không có trong ionic.
Vamsi

Bạn có bất kỳ phản hồi nào bằng cách sử dụng Material Design Light getmdl.io Tôi cam kết ở đây có cùng một vấn đề và câu hỏi về thiết kế vật liệu ion +. Vì vậy, sẽ được nhiều đánh giá cao bất kỳ thông tin phản hồi về thư viện
Javier Salinas

Cá nhân tôi chưa sử dụng Material Design Light, Nó có vẻ đầy hứa hẹn. Đây là so sánh của Material Design Lightbootstrap tutorialzine.com/2015/07/comparing-bootstrap-with-mdl , Nếu bạn đã sử dụng bootstrap, nó sẽ hữu ích. Google quảng cáo điều này trong trang nhà phát triển web của mình. Vì vậy, nó phải đủ tốt.
Vamsi

25

Có một dự án khá mới gọi là Vật liệu Ionic .

Tôi đã dùng thử và nó hoạt động khá tốt, nhưng xin lưu ý rằng nó vẫn ở chế độ "Xem trước trước khi phát hành".

Theo repo github, nó sẽ được đưa vào Alpha vào tháng 4 năm 2015.

Nó có thể được cài đặt bằng bower

bower install ionic-material

Đó là tất cả những gì bạn cần làm, nhưng được cảnh báo, có những lỗi và tài liệu về cơ bản là không tồn tại.

Chúc may mắn!


9
Tôi đã xem thư viện vật liệu ion trước đây, nhưng vấn đề là 1. Đây không phải là nơi gần hoàn thành. Không có sẵn tài liệu. 2. Đây không phải là sự phát triển tích cực và không được hỗ trợ tốt. chỉ có một người đã làm việc trên nó trong 7 ngày như ngày hôm nay. Vì vậy, khó có thể sử dụng nó trong ứng dụng sản xuất mà không cần đảm bảo. 3. Angular-material, ionic đều có nguồn tài trợ và hỗ trợ tốt và các nhà phát triển rất giỏi đang làm việc với tốc độ tốt. vì vậy tôi có thể tin tưởng họ.
Vamsi

3

Ionic MaterialIonic Material Design Lite là hai thư viện mới chớm nở nhằm mục đích trở thành một phần mở rộng của khuôn khổ ion. Mặc dù còn hơi non nớt nhưng hoạt động tốt với các thành phần ion và hỗ trợ tốt cho vật liệu.

Điều này có thể cung cấp thêm một cái nhìn sâu sắc.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.