1# @ohos.data.UdmfComponents (Content Card) 2 3A content card designed in the [ContentForm](js-apis-data-uniformDataStruct.md#contentform14) struct. You can set the title (mandatory), description, application icon, application name, redirection link, and content image for the content card. When a user taps the card, a callback of the pass event is triggered to redirect the user to the specified page if the target link is set. 4 5> **NOTE** 6> 7> This component is supported since API version 20. Updates will be marked with a superscript to indicate their earliest API version. 8 9## Module to Import 10 11```js 12import { ContentFormCard, FormType } from '@kit.ArkData'; 13``` 14 15## Child Component 16 17N/A 18 19## ContentFormCard 20 21ContentFormCard({contentFormData: uniformDataStruct.ContentForm, formType: FormType, formWidth?: number, formHeight?: number, handleOnClick?: Function}) 22 23Defines the information of a content card component that displayed in an application, including the title, description, content image, application information, and the like. 24 25**Decorator**: \@Component 26 27**System capability**: SystemCapability.DistributedDataManager.UDMF.Core 28 29| Name| Type| Mandatory| Decorator| Description| 30| -------- | -------- | -------- | -------- | -------- | 31| contentFormData | [uniformDataStruct.ContentForm](js-apis-data-uniformDataStruct.md#contentform14) | Yes| - | Content card data.| 32| formType | [FormType](#formtype) | Yes| @Prop | Content card type, which affects the size of the content card.| 33| formWidth | number | No| @Prop | Card width. The value ranges from 0.8 to 1.2 times the default width of the content card type. If **formType** is set to **TYPE_SMALL**, the value ranges from 0.4 to 1.2 times the default width of the content card type.| 34| formHeight | number | No| @Prop | Card height. If title in **contentFormData** is an empty string, the card height is the passed value. Otherwise, the value is 0.8 to 1.2 times the default width of the content card type. If **formType** is set to **TYPE_SMALL**, the value is 0.4 to 1.2 times the default width of the content card type.| 35| handleOnClick | Function | No| - | Callback for the click event.| 36 37## FormType 38 39Enumerates content card types, including large, medium, and small. 40 41**System capability**: SystemCapability.DistributedDataManager.UDMF.Core 42 43| Name | Value| Description | 44|-------------|---|-------------------| 45| TYPE_BIG | 0 | 4 × 4. The default card width and height are both 200.| 46| TYPE_MID | 1 | 4 × 2. The default card width and height are 200 and 100, respectively.| 47| TYPE_SMALL | 2 | 2 × 1. The default card width and height are 137 and 83, respectively.| 48 49## Example 50 51```ts 52import { uniformDataStruct } from '@kit.ArkData' 53 54@Entry 55@Component 56struct Index { 57 @State contentForm: uniformDataStruct.ContentForm = { 58 uniformDataType: 'general.content-form', 59 title: '' 60 }; 61 @State startToShow: boolean = false; 62 63 aboutToAppear(): void { 64 this.initData(); 65 } 66 67 async initData() { 68 let context = this.getUIContext().getHostContext(); 69 if (!context) { 70 return; 71 } 72 try { 73 let appIcon = await context.resourceManager.getMediaContent($r('app.media.startIcon').id); 74 let thumbImage = await context.resourceManager.getMediaContent($r('app.media.foreground').id); 75 this.contentForm = { 76 uniformDataType: 'general.content-form', 77 title: "Content form title", 78 thumbData: appIcon, 79 description: "Content form description", 80 appIcon: thumbImage, 81 appName: "com.test.demo" 82 }; 83 } catch (err) { 84 console.error("Init data error"); 85 } 86 } 87 88 build() { 89 Column() { 90 Button('show card') 91 .onClick(() => { 92 this.startToShow = true; 93 }) 94 if (this.startToShow) { 95 ContentFormCard({ 96 contentFormData: this.contentForm, 97 formType: FormType.TYPE_SMALL, 98 formWidth: 110, 99 formHeight: 50, 100 handleOnClick: () => { 101 console.info("Clicked card"); 102 } 103 }) 104 } 105 } 106 } 107} 108``` 109