Mini Program CSS
Mini Program CSS is a style language used to describe the styles of components in DLT.
Mini Program CSS determines how DLT components should be displayed.
To accommodate a wide range of front-end developers, Mini Program CSS inherits most features of native CSS. At the same time, to better suit the development of TransVoice Mini Programs, Mini Program CSS has been extended and modified compared to native CSS.
Compared to native CSS, the extended features of Mini Program CSS include:
- Measurement Units
Measurement Units
- rpx (responsive pixel): Can adapt to screen width. The screen width is defined as 720rpx. For example, on the TransVoice platform, with a screen width of 360px and a total of 720 physical pixels, 720rpx = 360px = 720 physical pixels, and 1rpx = 0.5px = 1 physical pixel.
| Device | rpx to px Conversion (Screen Width/720) | px to rpx Conversion (720/Screen Width) |
|---|---|---|
| TECNO LE7 | 1rpx = 0.5px | 1px = 2rpx |
Recommendation: When designing visual materials for TransVoice Mini Programs, designers can use TECNO LE7 as the standard for visual materials.
Note: On smaller screens, some aliasing may be unavoidable, so try to avoid such situations as much as possible during development.
Inline Styles
Framework components support the use of the style and class attributes to control the style of components.
Since the underlying UI framework of TransVoice Mini Programs is based on the Vue 2.x framework, the binding method is as follows:
style: Static styles should be defined in class. The style attribute accepts dynamic styles, which are parsed at runtime. Try to avoid putting static styles in the style attribute to avoid affecting rendering speed.
<view :style="{{color}}" />class: Used to specify style rules, where the attribute value is a collection of class selectors (style class names) in the style rules. Style class names should not include "." and should be separated by spaces.
<view :class="['normal_view', {'active': isActive}]" />
Selectors
Currently, the supported selectors include:
| Selector | Example | Description |
|---|---|---|
| .class | .intro | Selects all components with class="intro" |
| #id | #firstname | Selects the component with id="firstname" |
| element | view | Selects all view components |
| element, element | view, checkbox | Selects all view components and all checkbox components in the document |
| ::after | view::after | Inserts content after the view component |
| ::before | view::before | Inserts content before the view component |
Global Styles vs. Local Styles
Styles defined in app.css are global styles and apply to every page. Styles defined in a page's CSS file are local styles and only apply to the corresponding page, and they will override the same selectors in app.css.