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 25| Name | Type | Mandatory | Description | 26| --------------- | ---------------------------------------- | ---- | --------------- | 27| height | [SheetSize](#sheetsize) \| [Length](ts-types.md#length) | No | Height of the sheet.<br>Default value: **LARGE**| 28| dragBar | boolean | No | Whether to display the drag bar. By default, the drag bar is displayed . | 29| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | No | Background color of the sheet. | 30| maskColor | [ResourceColor](ts-types.md#resourcecolor) | No| Mask color of the sheet.| 31| onAppear | () => void | No | Callback invoked when the sheet is displayed. | 32| onDisappear | () => void | No | Callback invoked when the sheet is hidden. | 33 34## SheetSize 35 36| Name | Description | 37| ------ | --------------- | 38| MEDIUM | The sheet height is half of the screen height.| 39| LARGE | The sheet height is almost the screen height.| 40 41## Example 42 43```ts 44// xxx.ets 45@Entry 46@Component 47struct SheetTransitionExample { 48 @State isShow:boolean = false 49 @State isShow2:boolean = false 50 @State sheetHeight:number = 300; 51 @State showDragBar:boolean = true; 52 53 @Builder myBuilder() { 54 Column() { 55 Button("change height") 56 .margin(10) 57 .fontSize(20) 58 .onClick(()=>{ 59 this.sheetHeight = 500; 60 }) 61 62 Button("Set Illegal height") 63 .margin(10) 64 .fontSize(20) 65 .onClick(()=>{ 66 this.sheetHeight = 300; 67 }) 68 69 Button("close dragBar") 70 .margin(10) 71 .fontSize(20) 72 .onClick(()=>{ 73 this.showDragBar = false; 74 }) 75 76 Button("close modal 1") 77 .margin(10) 78 .fontSize(20) 79 .onClick(()=>{ 80 this.isShow = false; 81 }) 82 } 83 .width('100%') 84 .height('100%') 85 } 86 87 build() { 88 Column() { 89 Button("transition modal 1") 90 .onClick(() => { 91 this.isShow = true 92 }) 93 .fontSize(20) 94 .margin(10) 95 .bindSheet($$this.isShow, this.myBuilder(), {height: this.sheetHeight, dragBar: this.showDragBar, backgroundColor: Color.Green, onAppear: () => {console.log("BindSheet onAppear.")}, onDisappear: () => {console.log("BindSheet onDisappear.")}}) 96 } 97 .justifyContent(FlexAlign.Center) 98 .width('100%') 99 .height('100%') 100 } 101} 102``` 103 104 105
