Có, CSS cho PowerApps, đại loại thế. Biểu định kiểu dựa trên CSS thực tế là không thể, nhưng điều tốt nhất tiếp theo là. Chúng ta có thể tạo một vài đối tượng để lưu trữ các kiểu của mình, chẳng hạn như màu sắc, kích thước phông chữ, kích thước, v.v. và sau đó tham khảo chúng trên ứng dụng. Không thực sự xếp tầng biểu định kiểu, nhưng hãy gọi chúng chỉ là biểu định kiểu. ;]
Tạo biểu định kiểu trong PowerAppsĐể tạo biểu định kiểu của bạn, bạn sẽ muốn tạo một đối tượng mới và sau đó đặt các thuộc tính của nó thành các giá trị kiểu của bạn. Tôi đề xuất một đối tượng khác cho mỗi nhóm thuộc tính. Điều này sẽ giúp ích cho bạn sau này cũng như những người dùng khác muốn sửa đổi ứng dụng
Đây là biểu định kiểu mà tôi đã thực hiện trong các ứng dụng của mình
Set[colColors,
{
PrimaryGreen: RGBA[13,160,13,1],
PrimaryBlue: RGBA[12,12,160,1],
PrimaryBlack: RGBA[0,0,0,.6],
AccentDarkGray: RGBA[100,100,100,1],
AccentLightGray: RGBA[200,200,200,1]
}];
Set[colFonts,
{
Title: Font.'Lato Light',
TitleSize: 35,
SubTitle: Font.'Lato Hairline',
SubTitleSize: 28,
AppTitleSize: 50,
Button: Font.Arial,
ButtonSize: 25,
Body: Font.Lato,
BodySize: 21,
Note: Font.Georgia,
NoteSize: 20,
ItemTitle: Font.'Lato Black',
ItemTitleSize: 22,
ItemBody: Font.Lato,
ItemBodySize: 20
}];
Set[colLayouts,
{
ScreenTitleX: 40,
ScreenTitleY: 40,
FormButtonX: 300,
FormButtonY: 1030,
FormButtonHeight: 70,
FormButtonWidth: 300
}]Như bạn có thể thấy, tôi đã đặt màu sắc và phông chữ, thậm chí cả vị trí tôi muốn đặt tiêu đề và nút biểu mẫu, trên mỗi màn hình trong ứng dụng
Mã này được đặt trong thuộc tính OnVisible của màn hình chính để mỗi khi ứng dụng mở ra, tất cả các giá trị kiểu này đều có sẵn cho phần còn lại của ứng dụng
//github.com/KittyGiraudel/sass-boilerplate Learn more about SCSS architecture here: //sass-guidelin.es/#architecture
Để bắt đầu đơn giản, bạn có thể tạo một vài tệp cần thiết để bắt đầu
- _biến. scss. Đặt tất cả các biến của bạn vào đây;
- _mixins. scss. Web có đầy đủ các mixin thông minh mà bạn có thể sử dụng để làm việc thông minh với kiểu dáng. Tập hợp tất cả chúng trong một tệp
- _bootstrap-sửa. scss. Bootstrap có một số kiểu dáng mặc định mà bạn sẽ cần phải giải quyết. Để chúng trong một tệp riêng biệt sẽ giúp cập nhật chúng dễ dàng hơn khi [nếu?] phiên bản bootstrap của cổng thông tin được cập nhật
- _những yếu tố chính. scss. Giữ kiểu dáng cho đầu trang, chân trang, bố cục và mẫu riêng biệt
- _basestyles. scss. Đặt kiểu cho danh sách, biểu mẫu, bảng, thành phần điều hướng, v.v. Đây là những phần tử có thể tái sử dụng mà bạn tạo kiểu một lần và sử dụng ở mọi nơi
- _nút. scss. Khi một phần trong “basestyles” trở nên quá lớn, tôi chia nó thành một tệp riêng, chẳng hạn như các nút
Tùy chỉnh trang đăng nhập và đăng ký trong Cổng thông tin Power App
Biên dịch SCSS
Cài đặt trình biên dịch Live SASS
Khi bạn có các tệp SCSS đầy phong cách tuyệt vời, bạn cần biên dịch chúng thành một tệp CSS mà cổng thông tin có thể hiểu được. Tôi sử dụng tiện ích mở rộng “Live Sass Compile” cho Mã VS cho công việc này. Đọc thêm về tiện ích mở rộng tại đây
https. //thương trường. Visual Studio. com/items?itemName=glenn2223. sống-sass
Sử dụng CLI của Cổng thông tin để tải xuống lại nội dung cổng thông tin của bạn và tất cả các kết nối sẽ tuân theo. Bây giờ, khi bạn thay đổi các tệp SCSS và biên dịch chúng thành “chính. css”, sau đó tải nó lên cổng thông tin, kiểu dáng mới sẽ được áp dụng
Kiểm soát nguồn
Khi bạn thực hiện các thay đổi đối với mã cổng trong Mã VS, bạn có thể chuyển giao các thay đổi cho git và có toàn quyền kiểm soát nguồn
________số 8Tôi muốn biết thêm về cách bạn làm việc với xây dựng thương hiệu cổng thông tin. Vui lòng để lại nhận xét về bài viết trên blog này và cho tôi biết