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## align 10 11align(value: Alignment) 12 13Sets the alignment mode of the component content in the drawing area. 14 15**Widget capability**: Since API version 9, this API is supported in ArkTS widgets. 16 17**System capability**: SystemCapability.ArkUI.ArkUI.Full 18 19**Parameters** 20 21| Name| Type | Mandatory| Description | 22| ------ | ------------------------------------------- | ---- | ------------------------------------------------------------ | 23| value | [Alignment](ts-appendix-enums.md#alignment) | Yes | 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**| 24 25## direction 26 27direction(value: Direction) 28 29Sets how elements are laid out along the main axis of the container. 30 31**Widget capability**: Since API version 9, this API is supported in ArkTS widgets. 32 33**System capability**: SystemCapability.ArkUI.ArkUI.Full 34 35**Parameters** 36 37| Name| Type | Mandatory| Description | 38| ------ | ------------------------------------------- | ---- | --------------------------------------------------- | 39| value | [Direction](ts-appendix-enums.md#direction) | Yes | How elements are laid out along the main axis of the component.<br>For example, the main axis of the **\<Column>** component runs vertically.<br>Default value: **Direction.Auto**| 40 41## position 42 43position(value: Position) 44 45Sets the absolute position of the component, which defines the offset of the component's upper left corner relative to the parent component's. 46 47**Widget capability**: Since API version 9, this API is supported in ArkTS widgets. 48 49**System capability**: SystemCapability.ArkUI.ArkUI.Full 50 51**Parameters** 52 53| Name| Type | Mandatory| Description | 54| ------ | --------------------------------- | ---- | ------------------------------------------------------------ | 55| value | [Position](ts-types.md#position8) | Yes | 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.| 56 57## markAnchor 58 59markAnchor(value: Position) 60 61Sets the anchor for locating the component. 62 63**Widget capability**: Since API version 9, this API is supported in ArkTS widgets. 64 65**System capability**: SystemCapability.ArkUI.ArkUI.Full 66 67**Parameters** 68 69| Name| Type | Mandatory| Description | 70| ------ | --------------------------------- | ---- | ------------------------------------------------------------ | 71| value | [Position](ts-types.md#position8) | Yes | 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| 72 73## offset 74 75offset(value: Position) 76 77Sets the offset of the component relative to itself. 78 79**Widget capability**: Since API version 9, this API is supported in ArkTS widgets. 80 81**System capability**: SystemCapability.ArkUI.ArkUI.Full 82 83**Parameters** 84 85| Name| Type | Mandatory| Description | 86| ------ | --------------------------------- | ---- | ------------------------------------------------------------ | 87| value | [Position](ts-types.md#position8) | Yes | 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| 88 89## alignRules<sup>9+</sup> 90 91alignRules(value: AlignRuleOption) 92 93Sets the alignment rules in the relative container. This API is valid only when the container is [\<RelativeContainer>](ts-container-relativecontainer.md). 94 95**Widget capability**: Since API version 9, this API is supported in ArkTS widgets. 96 97**System capability**: SystemCapability.ArkUI.ArkUI.Full 98 99**Parameters** 100 101| Name| Type | Mandatory| Description | 102| ------ | ------------------------------------------- | ---- | ------------------------ | 103| value | [AlignRuleOption](#alignruleoption) | Yes | Alignment rules in the relative container.| 104 105## AlignRuleOption 106 107Since API version 9, this API is supported in ArkTS widgets. 108 109| Name | Type | Description | 110| ------ | ------------------------------------------------------------ | ------------------------------------------------------------ | 111| left | { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) } | Left alignment.<br>- **anchor**: ID of the component that functions as the anchor point.<br>- **align**: alignment mode relative to the anchor component.| 112| right | { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) } | Right alignment.<br>- **anchor**: ID of the component that functions as the anchor point.<br>- **align**: alignment mode relative to the anchor component.| 113| middle | { anchor: string, align: [HorizontalAlign](ts-appendix-enums.md#horizontalalign) } | Horizontal center alignment.<br>- **anchor**: ID of the component that functions as the anchor point.<br>- **align**: alignment mode relative to the anchor component.| 114| top | { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) } | Top alignment.<br>- **anchor**: ID of the component that functions as the anchor point.<br>- **align**: alignment mode relative to the anchor component.| 115| bottom | { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) } | Bottom alignment.<br>- **anchor**: ID of the component that functions as the anchor point.<br>- **align**: alignment mode relative to the anchor component.| 116| center | { anchor: string, align: [VerticalAlign](ts-appendix-enums.md#verticalalign) } | Vertical center alignment. | 117| bias | [Bias](#bias) | Offset of the component under the anchor constraints. The value is the ratio of the distance to the left/upper anchor to the total distance between anchors.| 118 119## Bias 120| Name | Type | Mandatory | Description | 121| ----- | ---------------------------------------- | ---- | ---------------------------------------- | 122| Bias | { horizontal?: number, vertical?: number } | No| Offset of the component under the anchor constraints.<br>- **horizontal**: bias value in the horizontal direction.<br>- **vertical**: bias value in the vertical direction.<br>This parameter takes effect when:<br>The width of the child component can be determined and there are two horizontal anchors.<br><br>-The height of the child component can be determined and there are two vertical anchors.<br>Default value: {<br>horizontal: 0.5,<br>vertical: 0.5<br>}| 123 124## Example 125### Example 1 126```ts 127// xxx.ets 128@Entry 129@Component 130struct PositionExample1 { 131 build() { 132 Column() { 133 Column({ space: 10 }) { 134 // 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. 135 Text('align').fontSize(9).fontColor(0xCCCCCC).width('90%') 136 Stack() { 137 Text('First show in bottom end').height('65%').backgroundColor(0xD2B48C) 138 Text('Second show in bottom end').backgroundColor(0xF5DEB3).opacity(0.9) 139 }.width('90%').height(50).margin({ top: 5 }).backgroundColor(0xFFE4C4) 140 .align(Alignment.BottomEnd) 141 Stack() { 142 Text('top start') 143 }.width('90%').height(50).margin({ top: 5 }).backgroundColor(0xFFE4C4) 144 .align(Alignment.TopStart) 145 146 // To arrange the child components from left to right, set direction of the parent container to Direction.Ltr. 147 Text('direction').fontSize(9).fontColor(0xCCCCCC).width('90%') 148 Row() { 149 Text('1').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3) 150 Text('2').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C) 151 Text('3').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3) 152 Text('4').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C) 153 } 154 .width('90%') 155 .direction(Direction.Ltr) 156 // To arrange the child components from right to left, set direction of the parent container to Direction.Rtl. 157 Row() { 158 Text('1').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3).textAlign(TextAlign.End) 159 Text('2').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C).textAlign(TextAlign.End) 160 Text('3').height(50).width('25%').fontSize(16).backgroundColor(0xF5DEB3).textAlign(TextAlign.End) 161 Text('4').height(50).width('25%').fontSize(16).backgroundColor(0xD2B48C).textAlign(TextAlign.End) 162 } 163 .width('90%') 164 .direction(Direction.Rtl) 165 } 166 } 167 .width('100%').margin({ top: 5 }) 168 } 169} 170``` 171 172 173 174### Example 2 175```ts 176// xxx.ets 177@Entry 178@Component 179struct PositionExample2 { 180 build() { 181 Column({ space: 20 }) { 182 // Set the offset of the component's upper left corner relative to the parent component's upper left corner. 183 Text('position').fontSize(12).fontColor(0xCCCCCC).width('90%') 184 Row() { 185 Text('1').size({ width: '30%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 186 .textAlign(TextAlign.Center) 187 Text('2 position(30, 10)') 188 .size({ width: '60%', height: '30' }) 189 .backgroundColor(0xbbb2cb) 190 .border({ width: 1 }) 191 .fontSize(16) 192 .align(Alignment.Start) 193 .position({ x: 30, y: 10 }) 194 Text('3').size({ width: '45%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 195 .textAlign(TextAlign.Center) 196 Text('4 position(50%, 70%)') 197 .size({ width: '50%', height: '50' }) 198 .backgroundColor(0xbbb2cb) 199 .border({ width: 1 }) 200 .fontSize(16) 201 .position({ x: '50%', y: '70%' }) 202 }.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed }) 203 204 // 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. 205 // 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. 206 Text('markAnchor').fontSize(12).fontColor(0xCCCCCC).width('90%') 207 Stack({ alignContent: Alignment.TopStart }) { 208 Row() 209 .size({ width: '100', height: '100' }) 210 .backgroundColor(0xdeb887) 211 Text('text') 212 .fontSize('30px') 213 .textAlign(TextAlign.Center) 214 .size({ width: 25, height: 25 }) 215 .backgroundColor(Color.Green) 216 .markAnchor({ x: 25, y: 25 }) 217 Text('text') 218 .fontSize('30px') 219 .textAlign(TextAlign.Center) 220 .size({ width: 25, height: 25 }) 221 .backgroundColor(Color.Green) 222 .markAnchor({ x: -100, y: -25 }) 223 Text('text') 224 .fontSize('30px') 225 .textAlign(TextAlign.Center) 226 .size({ width: 25, height: 25 }) 227 .backgroundColor(Color.Green) 228 .markAnchor({ x: 25, y: -25 }) 229 }.margin({ top: 25 }).border({ width: 1, style: BorderStyle.Dashed }) 230 231 // 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. 232 Text('offset').fontSize(12).fontColor(0xCCCCCC).width('90%') 233 Row() { 234 Text('1').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 235 .textAlign(TextAlign.Center) 236 Text('2 offset(15, 30)') 237 .size({ width: 120, height: '50' }) 238 .backgroundColor(0xbbb2cb) 239 .border({ width: 1 }) 240 .fontSize(16) 241 .align(Alignment.Start) 242 .offset({ x: 15, y: 30 }) 243 Text('3').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(16) 244 .textAlign(TextAlign.Center) 245 Text('4 offset(-5%, 20%)') 246 .size({ width: 100, height: '50' }) 247 .backgroundColor(0xbbb2cb) 248 .border({ width: 1 }) 249 .fontSize(16) 250 .offset({ x: '-5%', y: '20%' }) 251 }.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed }) 252 } 253 .width('100%').margin({ top: 25 }) 254 } 255} 256``` 257 258 259
