1# Sheet Transition 2 3You can bind a sheet to a component through the **bindSheet** attribute. You can also set the sheet to the preset or custom height for when the component is inserted. 4 5> **NOTE** 6> 7> The APIs of this module are supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version. 8> 9> Switching between landscape and portrait modes is not supported. 10> 11> Route hopping is not supported. 12 13## Attributes 14 15| Name | Parameter | Description | 16| --------- | ---------------------------------------- | ---------------------------------------- | 17| bindSheet | isShow: boolean,<br>builder: [CustomBuilder](ts-types.md#custombuilder8),<br>options?: [SheetOptions](#sheetoptions) | Binds a sheet to the component, which can be displayed when the component is touched.<br>**isShow**: whether to display the sheet.<br>Since API version 10, this parameter supports two-way binding through [$$](../../quick-start/arkts-two-way-sync.md).<br>**builder**: content of the sheet.<br> **options**: optional attributes of the sheet.| 18> **NOTE** 19> 20> When no two-way binding is set up for the **isShow** parameter, closing the sheet by dragging does not change the parameter value. 21> 22> To synchronize the value of **isShow** with the actual state of the sheet, it is recommended that you use the [$$](../../quick-start/arkts-two-way-sync.md) to set up two-way binding for **isShow**. 23## SheetOptions 24 25Inherited from [BindOptions](#bindoptions). 26 27| Name | Type | Mandatory | Description | 28| --------------- | ---------------------------------------- | ---- | --------------- | 29| height | [SheetSize](#sheetsize) \| [Length](ts-types.md#length) | No | Height of the sheet.<br>Default value: **LARGE**| 30| dragBar | boolean | No | Whether to display the drag bar. By default, the drag bar is displayed . | 31| maskColor | [ResourceColor](ts-types.md#resourcecolor) | No| Mask color of the sheet.| 32 33## BindOptions 34| Name | Type | Mandatory| Description | 35| --------------- | ------------------------------------------ | ---- | ------------------------ | 36| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No | Background color of the sheet. | 37| onAppear | () => void | No | Callback invoked when the sheet is displayed.| 38| onDisappear | () => void | No | Callback invoked when the sheet is hidden.| 39 40## SheetSize 41 42| Name | Description | 43| ------ | --------------- | 44| MEDIUM | The sheet height is half of the screen height.| 45| LARGE | The sheet height is almost the screen height.| 46 47## Example 48 49```ts 50// xxx.ets 51@Entry 52@Component 53struct SheetTransitionExample { 54 @State isShow:boolean = false 55 @State isShow2:boolean = false 56 @State sheetHeight:number = 300; 57 @State showDragBar:boolean = true; 58 59 @Builder myBuilder() { 60 Column() { 61 Button("change height") 62 .margin(10) 63 .fontSize(20) 64 .onClick(()=>{ 65 this.sheetHeight = 500; 66 }) 67 68 Button("Set Illegal height") 69 .margin(10) 70 .fontSize(20) 71 .onClick(()=>{ 72 this.sheetHeight = -1; 73 }) 74 75 Button("close dragBar") 76 .margin(10) 77 .fontSize(20) 78 .onClick(()=>{ 79 this.showDragBar = false; 80 }) 81 82 Button("close modal 1") 83 .margin(10) 84 .fontSize(20) 85 .onClick(()=>{ 86 this.isShow = false; 87 }) 88 } 89 .width('100%') 90 .height('100%') 91 } 92 93 build() { 94 Column() { 95 Button("transition modal 1") 96 .onClick(() => { 97 this.isShow = true 98 }) 99 .fontSize(20) 100 .margin(10) 101 .bindSheet($$this.isShow, this.myBuilder(), {height: this.sheetHeight, dragBar: this.showDragBar, backgroundColor: Color.Green, onAppear: () => {console.log("BindSheet onAppear.")}, onDisappear: () => {console.log("BindSheet onDisappear.")}}) 102 } 103 .justifyContent(FlexAlign.Center) 104 .width('100%') 105 .height('100%') 106 } 107} 108``` 109 110 111
