1# Location 2 3The location attributes set the alignment mode, layout direction, and position of a component. 4 5> **NOTE** 6> 7> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Attributes 11 12 13| Name| Type| Description| 14| -------- | -------- | -------- | 15| align | [Alignment](ts-appendix-enums.md#alignment) | Alignment mode of the component content in the drawing area.<br>Default value: **Alignment.Center**<br>Since API version 9, this API is supported in ArkTS widgets.| 16| direction | [Direction](ts-appendix-enums.md#direction) | Horizontal layout of the component.<br>Default value: **Direction.Auto**<br>Since API version 9, this API is supported in ArkTS widgets.| 17| position | [Position](ts-types.md#position8) | Offset of the component's upper left corner relative to the parent component's upper left corner. This offset is expressed using absolute values. When laying out components, this attribute does not affect the layout of the parent component. It only adjusts the component position during drawing.<br>This attribute is applicable to scenarios where the component is fixed at a position in the parent container, for example, where it is pinned to top or floating above the UI.<br>Since API version 9, this API is supported in ArkTS widgets.| 18| markAnchor | [Position](ts-types.md#position8) | Anchor point of the component for positioning. The upper left corner of the component is used as the reference point for offset. Generally, this attribute is used together with the **position** and **offset** attributes. When used independently, this attribute is similar to **offset**.<br>Default value:<br>{<br>x: 0,<br>y: 0<br>}<br>Since API version 9, this API is supported in ArkTS widgets.| 19| offset | [Position](ts-types.md#position8) | Offset of the component relative to itself. This offset is expressed using relative values. This attribute does not affect the layout of the parent component. It only adjusts the component position during drawing.<br>Default value:<br>{<br>x: 0,<br>y: 0<br>}<br>Since API version 9, this API is supported in ArkTS widgets.| 20| alignRules<sup>9+</sup> | {<br>left?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };<br>right?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };<br>middle?: { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) };<br>top?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) };<br>bottom?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) };<br>center?: { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) }<br>} | Alignment rules relative to the container.<br>- **left**: left-aligned.<br>- **right**: right-aligned.<br>- **middle**: center-aligned.<br>- **top**: top-aligned.<br>- **bottom**: bottom-aligned.<br>- **center**: center-aligned.<br>This API is supported in ArkTS widgets.<br>**NOTE**<br>- **anchor**: ID of the component that functions as the anchor point.<br>- **align**: alignment mode relative to the anchor component. | 21 22 23## Example 24### Example 1 25```ts 26// xxx.ets 27@Entry 28@Component 29struct PositionExample1 { 30 build() { 31 Column() { 32 Column({ space: 10 }) { 33 // When the component content is within the area specified by the component width and height, set the alignment mode of the content in the component. 34 Text('align').fontSize(9).fontColor(0xCCCCCC).width('90%') 35 Stack() { 36 Text('First show in bottom end').height('65%').backgroundColor(0xD2B48C) 37 Text('Second show in bottom end').backgroundColor(0xF5DEB3).opacity(0.9) 38 }.width('90%').height(50).margin({ top: 5 }).backgroundColor(0xFFE4C4) 39 .align(Alignment.BottomEnd) 40 Stack() { 41 Text('top start') 42 }.width('90%').height(50).margin({ top: 5 }).backgroundColor(0xFFE4C4) 43 .align(Alignment.TopStart) 44 45 // To arrange the child components from left to right, set direction of the parent container to Direction.Ltr. 46 Text('direction').fontSize(9).fontColor(0xCCCCCC).width('90%') 47 Row() { 48 Text('1').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3) 49 Text('2').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C) 50 Text('3').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3) 51 Text('4').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C) 52 } 53 .width('90%') 54 .direction(Direction.Ltr) 55 // To arrange the child components from right to left, set direction of the parent container to Direction.Rtl. 56 Row() { 57 Text('1').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3).textAlign(TextAlign.End) 58 Text('2').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C).textAlign(TextAlign.End) 59 Text('3').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3).textAlign(TextAlign.End) 60 Text('4').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C).textAlign(TextAlign.End) 61 } 62 .width('90%') 63 .direction(Direction.Rtl) 64 } 65 } 66 .width('100%').margin({ top: 5 }) 67 } 68} 69``` 70 71 72 73### Example 2 74```ts 75// xxx.ets 76@Entry 77@Component 78struct PositionExample2 { 79 build() { 80 Column({ space: 20 }) { 81 // Set the offset of the component's upper left corner relative to the parent component's upper left corner. 82 Text('position').fontSize(12).fontColor(0xCCCCCC).width('90%') 83 Row() { 84 Text('1').size({ width: '30%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 85 .textAlign(TextAlign.Center) 86 Text('2 position(30, 10)') 87 .size({ width: '60%', height: '30' }) 88 .backgroundColor(0xbbb2cb) 89 .border({ width: 1 }) 90 .fontSize(16) 91 .align(Alignment.Start) 92 .position({ x: 30, y: 10 }) 93 Text('3').size({ width: '45%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 94 .textAlign(TextAlign.Center) 95 Text('4 position(50%, 70%)') 96 .size({ width: '50%', height: '50' }) 97 .backgroundColor(0xbbb2cb) 98 .border({ width: 1 }) 99 .fontSize(16) 100 .position({ x: '50%', y: '70%' }) 101 }.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed }) 102 103 // Offset relative to the start point. x indicates the horizontal distance between the end point and the start point. If the value of x is greater than 0, the component is offset to the left. Otherwise, the component is offset to the right. 104 // y indicates the vertical distance between the end point and the start point. If the value of y is greater than 0, the component is offset to the top. Otherwise, the component is offset to the bottom. 105 Text('markAnchor').fontSize(12).fontColor(0xCCCCCC).width('90%') 106 Stack({ alignContent: Alignment.TopStart }) { 107 Row() 108 .size({ width: '100', height: '100' }) 109 .backgroundColor(0xdeb887) 110 Text('text') 111 .fontSize('30px') 112 .textAlign(TextAlign.Center) 113 .size({ width: 25, height: 25 }) 114 .backgroundColor(Color.Green) 115 .markAnchor({ x: 25, y: 25 }) 116 Text('text') 117 .fontSize('30px') 118 .textAlign(TextAlign.Center) 119 .size({ width: 25, height: 25 }) 120 .backgroundColor(Color.Green) 121 .markAnchor({ x: -100, y: -25 }) 122 Text('text') 123 .fontSize('30px') 124 .textAlign(TextAlign.Center) 125 .size({ width: 25, height: 25 }) 126 .backgroundColor(Color.Green) 127 .markAnchor({ x: 25, y: -25 }) 128 }.margin({ top: 25 }).border({ width: 1, style: BorderStyle.Dashed }) 129 130 // Offset of the component relative to itself. If the value of x is greater than 0, the component is offset to the right. Otherwise, the component is offset to the left. If the value of y is greater than 0, the component is offset to the bottom. Otherwise, the component is offset to the top. 131 Text('offset').fontSize(12).fontColor(0xCCCCCC).width('90%') 132 Row() { 133 Text('1').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 134 .textAlign(TextAlign.Center) 135 Text('2 offset(15, 30)') 136 .size({ width: 120, height: '50' }) 137 .backgroundColor(0xbbb2cb) 138 .border({ width: 1 }) 139 .fontSize(16) 140 .align(Alignment.Start) 141 .offset({ x: 15, y: 30 }) 142 Text('3').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 143 .textAlign(TextAlign.Center) 144 Text('4 offset(-10%, 20%)') 145 .size({ width: 100, height: '50' }) 146 .backgroundColor(0xbbb2cb) 147 .border({ width: 1 }) 148 .fontSize(16) 149 .offset({ x: '-5%', y: '20%' }) 150 }.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed }) 151 } 152 .width('100%').margin({ top: 25 }) 153 } 154} 155``` 156 157 158
