Cách tạo Chủ đề khác nhau trên Valo trong Vaadin?

Question

Bây giờ vaadin 7.3 đã xuất hiện và nó có rất đẹp Valo Theme. Nhưng tôi không biết làm thế nào để nhập nó vào dự án của tôi? Bây giờ tôi đang sử dụng một chủ đề mặc định với các tập tin scss tùy chỉnh của tôi. Tôi muốn nếm thử Valo. Xin vui lòng ai đó giúp tôi làm thế nào để nhập khẩu chủ đề valo cho dự án của tôi.

Hơn thế nữa, làm cách nào để chọn kiểu chủ đề? Valo Theme Demo có các kiểu chủ đề khác nhau chẳng hạn như Mặc định, Blueprint, Dark, Metro, Flat. Làm thế nào để chọn loại này như tôi muốn?

Answer 1

đọc hướng dẫn tốt: https://vaadin.com/book/vaadin7/-/page/themes.valo.html#themes.valo.use

có cả một phần dành riêng cho Valo

các chủ đề khác nhau trên đầu trang của Valo như đã thấy trong valo-demo đều được thực hiện với các thiết lập của các biến Sass chính nhìn thấy trong cuốn sách.

ví dụ: https://github.com/vaadin/valo-demo/blob/master/src/main/webapp/VAADIN/themes/tests-valo-flatdark/_variables.scss

Answer 2

Ngoài câu trả lời được chấp nhận, bạn có thể chỉ định chủ đề bằng cách sử dụng chú thích @Theme trên lớp UI và mở rộng chủ đề bằng cách tạo thư mục có tên chủ đề của bạn dưới VAADIN\themes.

Bên trong thư mục mà bạn muốn tạo ra một styles.scss và .scss:

styles.scss

@import "licensing.scss"; 

.licensing { 
    @include licensing; 
} 

licensing.scss

@import "../valo/valo.scss"; 

@mixin licensing { 
    @include valo; 
} 

Theme chú thích: Example on github.

Tệp chủ đề: Example theme folder.