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