-
-
-
-
-
- {{title}}
- {{detail}}
-
-
-
- ```
-
- - css:
-
- ```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:
- ```json
- {
- "data": {
- "title": "TitleDefault",
- "detail": "TextDefault"
- },
- "actions": {
- "routerEvent": {
- "action": "router",
- "abilityName": "com.example.entry.EntryAbility",
- "params": {
- "message": "add detail"
- }
- }
- }
- }
- ```
-
-最终可以得到如下卡片:
-
-
-
-### 开发卡片事件
-
-卡片支持为组件设置action,包括router事件和message事件,其中router事件用于Ability跳转,message事件用于卡片开发人员自定义点击事件。关键步骤说明如下:
-
-1. 在hml中为组件设置onclick属性,其值对应到json文件的actions字段中。
-2. 若设置router事件,则
- - action属性值为"router";
- - abilityName为跳转目标的Ability名,如目前DevEco创建的FA模型的UIAbility默认名为com.example.entry.EntryAbility;
- - params为跳转目标Ability的自定义参数,可以按需填写。其值可以在目标Ability启动时的want中的parameters里获取。如FA模型EntryAbility的onCreate生命周期里可以通过featureAbility.getWant()获取到want,然后在其parameters字段下获取到配置的参数;
-3. 若设置message事件,则
- - action属性值为"message";
- - params为message事件的用户自定义参数,可以按需填写。其值可以在卡片生命周期函数onEvent中的message里获取;
-
-示例如下:
-
- - hml:
- ```html
-