+
+
+
+
+
+ {{title}}
+ {{detail}}
+
+
+
+ ```
+
+- CSS: defines style information about the web-like paradigm components in HML.
+
+ ```css
+ .container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .bg-img {
+ flex-shrink: 0;
+ height: 100%;
+ }
+
+ .container-inner {
+ flex-direction: column;
+ justify-content: flex-end;
+ align-items: flex-start;
+ height: 100%;
+ width: 100%;
+ padding: 12px;
+ }
+
+ .title {
+ font-size: 19px;
+ font-weight: bold;
+ color: white;
+ text-overflow: ellipsis;
+ max-lines: 1;
+ }
+
+ .detail_text {
+ font-size: 16px;
+ color: white;
+ opacity: 0.66;
+ text-overflow: ellipsis;
+ max-lines: 1;
+ margin-top: 6px;
+ }
+ ```
+
+- JSON: defines data and event interaction on the widget UI page.
+
+ ```json
+ {
+ "data": {
+ "title": "TitleDefault",
+ "detail": "TextDefault"
+ },
+ "actions": {
+ "routerEvent": {
+ "action": "router",
+ "abilityName": "com.example.entry.EntryAbility",
+ "params": {
+ "message": "add detail"
+ }
+ }
+ }
+ }
+ ```
+
+
+### Developing Widget Events
+
+You can set router and message events for components on a widget. The router event applies to ability redirection, and the message event applies to custom click events. The key steps are as follows:
+
+1. Set the **onclick** field in the HML file to **routerEvent** or **messageEvent**, depending on the **actions** settings in the JSON file.
+
+2. Set the router event.
+ - **action**: **router**, which indicates a router event.
+ - **abilityName**: name of the ability to redirect to (PageAbility component in the FA model and UIAbility component in the stage model). For example, the default UIAbility name created by DevEco Studio in the FA model is com.example.entry.EntryAbility.
+ - **params**: custom parameters passed to the target ability. Set them as required. The value can be obtained from **parameters** in **want** used for starting the target ability. For example, in the lifecycle function **onCreate** of the EntryAbility in the FA model, **featureAbility.getWant()** can be used to obtain **want** and its **parameters** field.
+
+3. Set the message event.
+ - **action**: **message**, which indicates a message event.
+ - **params**: custom parameters of the message event. Set them as required. The value can be obtained from **message** in the widget lifecycle function **onEvent**.
+
+The following is an example:
+
+- HML file:
+
+ ```html
+