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>This attribute is available only in the following components: **\<Stack>**, **\<Button>**, **\<StepperItem>**, **\<FolderStack>**, **\<Marquee>**, **\<text>**, **\<TextArea>**, and **\<TextInput>**. For details about the alignment results of text-related components (the last four aforementioned components), see [textAlign](ts-basic-components-text.md#attributes).<br>If the component does not support the **textAlign** attribute, horizontal text alignment cannot be set.<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) | How elements are laid out along the main axis 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) | Absolute position of the component, which defines the offset of the component's upper left corner relative to the parent component's. With this attribute set, the component does not participate in the layout of the parent component. That is, it is relocated during drawing based on the settings, but does not take up space in the parent component.<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 for locating the component, which is used to move the component further away from the position specified by **position** or **offset**.<br/>**.position({x: value1, y: value2}).markAnchor({x: value3, y: value4})** has the same effect as **.position({x: value1 - value3, y: value2 - value4}).** The same applies to **offset**.<br/>When **markAnchor** is used alone, **markAnchor ({x: value1, y: value2})** has the same effect as **.offset ({x: -value1, y: -value2})**.<br/>The default value varies by API version.<br/>API version 9 and earlier:<br/>{<br/>x: 0,<br/>y: 0<br/>}<br/>API version 10: none<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. With this attribute set, the component participates in the layout of the parent component. During drawing, an extra offset is made based on the offset provided by the parent component.<br/>The default value varies by API version.<br/>API version 9 and earlier:<br/>{<br/>x: 0,<br/>y: 0<br/>}<br/>API version 10: none<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. This attribute is valid only when the container is [\<RelativeContainer>](ts-container-relativecontainer.md).<br>- **left**: left alignment.<br>- **right**: right alignment.<br>- **middle**: horizontal center alignment.<br>- **top**: top alignment.<br>- **bottom**: bottom alignment.<br>- **center**: vertical center alignment.<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(-5%, 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
