1# LocationButton 2 3The **LocationButton** security component represents a Location button that allows you to obtain temporary, precise location permissions from users with a simple button touch, eliminating the need for a permission request dialog box. 4 5> **NOTE** 6> 7> This component is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version. 8 9## Child Components 10 11Not supported 12 13## APIs 14 15### LocationButton 16 17LocationButton() 18 19Creates a Location button with an icon, text, and background. 20 21You may want to learn the [restrictions on security component styles](../../../security/AccessToken/security-component-overview.md#constraints) to avoid authorization failures caused by incompliant styles. 22 23**Atomic service API**: This API can be used in atomic services since API version 11. 24 25**System capability**: SystemCapability.ArkUI.ArkUI.Full 26 27### LocationButton 28 29LocationButton(options:LocationButtonOptions) 30 31Creates a Location button that contains the specified elements. 32 33You may want to learn the [restrictions on security component styles](../../../security/AccessToken/security-component-overview.md#constraints) to avoid authorization failures caused by incompliant styles. 34 35**Atomic service API**: This API can be used in atomic services since API version 11. 36 37**System capability**: SystemCapability.ArkUI.ArkUI.Full 38 39**Parameters** 40 41| Name| Type| Mandatory| Description| 42| -------- | -------- | -------- | -------- | 43| options | [LocationButtonOptions](#locationbuttonoptions) | Yes| Options for creating the Location button. | 44 45## LocationButtonOptions 46 47Describes the icon, text, and other specific elements for the Location button. 48 49> **NOTE** 50> 51> At least one of **icon** or **text** must be provided.<br> 52> If neither **icon** nor **text** is provided, the **options** parameter in [LocationButton](#locationbutton-1) will not take effect, and the created Location button will be in the default style. 53 54**Atomic service API**: This API can be used in atomic services since API version 11. 55 56**System capability**: SystemCapability.ArkUI.ArkUI.Full 57 58| Name| Type| Mandatory| Description| 59| -------- | -------- | -------- | -------- | 60| icon | [LocationIconStyle](#locationiconstyle) | No| Icon style of the Location button.<br>If this parameter is not specified, there is no icon.| 61| text | [LocationDescription](#locationdescription) | No| Text on the Location button.<br>If this parameter is not specified, there is no text description.| 62| buttonType | [ButtonType](ts-basic-components-button.md#buttontype) | No| Background type of the Location button.<br>If this parameter is not specified, the button takes on the capsule type.| 63 64## LocationIconStyle 65 66**Atomic service API**: This API can be used in atomic services since API version 11. 67 68**System capability**: SystemCapability.ArkUI.ArkUI.Full 69 70| Name| Value| Description| 71| -------- | -------- | -------- | 72| FULL_FILLED | 0 | Filled style icon.| 73| LINES | 1 | Line style icon.| 74 75## LocationDescription 76 77**Atomic service API**: This API can be used in atomic services since API version 11. 78 79**System capability**: SystemCapability.ArkUI.ArkUI.Full 80 81| Name| Value| Description| 82| -------- | -------- | -------- | 83| CURRENT_LOCATION | 0 | The text on the Location button is **Current location**.| 84| ADD_LOCATION | 1 | The text on the Location button is **Add location**.| 85| SELECT_LOCATION | 2 | The text on the Location button is **Select location**.| 86| SHARE_LOCATION | 3 | The text on the Location button is **Share location**.| 87| SEND_LOCATION | 4 | The text on the Location button is **Send location**.| 88| LOCATING | 5 | The text on the Location button is **Locate**.| 89| LOCATION | 6 | The text on the Location button is **Location**.| 90| SEND_CURRENT_LOCATION | 7 | The text on the Location button is **Send current location**.| 91| RELOCATION | 8 | The text on the Location button is **Relocate**.| 92| PUNCH_IN | 9 | The text on the Location button is **Punch in**.| 93| CURRENT_POSITION | 10 | The text on the Location button is **Current position**.| 94 95## LocationButtonOnClickResult 96 97**Atomic service API**: This API can be used in atomic services since API version 11. 98 99**System capability**: SystemCapability.ArkUI.ArkUI.Full 100 101| Name| Value| Description| 102| -------- | -------- | -------- | 103| SUCCESS | 0 | The Location button is touched successfully.| 104| TEMPORARY_AUTHORIZATION_FAILED | 1 | Temporary authorization fails after the Location button is touched.| 105 106## Attributes 107 108This component can only inherit the [universal attributes of security components](ts-securitycomponent-attributes.md). 109 110## Events 111 112Only the following events are supported. 113 114### onClick 115 116onClick(event: (event: ClickEvent, result: LocationButtonOnClickResult) => void) 117 118Called when a click event occurs. 119 120**Atomic service API**: This API can be used in atomic services since API version 11. 121 122**System capability**: SystemCapability.ArkUI.ArkUI.Full 123 124**Parameters** 125 126| Name| Type | Mandatory| Description | 127|------------|------|-------|---------| 128| event | [ClickEvent](ts-universal-events-click.md#clickevent) |Yes|See **ClickEvent**.| 129| result | [LocationButtonOnClickResult](#locationbuttononclickresult)| Yes| Authorization result.| 130 131## Example 132 133```ts 134// xxx.ets 135@Entry 136@Component 137struct Index { 138 build() { 139 Row() { 140 Column({space:10}) { 141 // Create a default Location button with an icon, text, and background. 142 LocationButton().onClick((event: ClickEvent, result: LocationButtonOnClickResult)=>{ 143 console.info("result " + result) 144 }) 145 // Whether an element is contained depends on whether the parameter corresponding to the element is specified. If buttonType is not passed in, the button uses the ButtonType.Capsule settings. 146 LocationButton({icon:LocationIconStyle.LINES}) 147 // Create a button with only an icon and background. If the alpha value of the most significant eight bits of the background color is less than 0x1A, the system forcibly adjusts the alpha value to 0xFF. 148 LocationButton({icon:LocationIconStyle.LINES, buttonType:ButtonType.Capsule}) 149 .backgroundColor(0x10007dff) 150 // Create a button with an icon, text, and background. If the alpha value of the most significant eight bits of the background color is less than 0x1A, the system forcibly adjusts the alpha value to 0xFF. 151 LocationButton({icon:LocationIconStyle.LINES, text:LocationDescription.CURRENT_LOCATION, buttonType:ButtonType.Capsule}) 152 // Create a button with an icon, text, and background. If the set width is less than the minimum allowed, the button's text will wrap to guarantee full text display. 153 LocationButton({icon:LocationIconStyle.LINES, text:LocationDescription.CURRENT_LOCATION, buttonType:ButtonType.Capsule}) 154 .fontSize(16) 155 .width(30) 156 // Create a button with an icon, text, and background. If the set width is less than the minimum allowed, the button's text will wrap to guarantee full text display. 157 LocationButton({icon:LocationIconStyle.LINES, text:LocationDescription.CURRENT_LOCATION, buttonType:ButtonType.Capsule}) 158 .fontSize(16) 159 .size({width: 30, height: 30}) 160 // Create a button with an icon, text, and background. If the set width is less than the minimum allowed, the button's text will wrap to guarantee full text display. 161 LocationButton({icon:LocationIconStyle.LINES, text:LocationDescription.CURRENT_LOCATION, buttonType:ButtonType.Capsule}) 162 .fontSize(16) 163 .constraintSize({minWidth: 0, maxWidth: 30, minHeight: 0, maxHeight: 30}) 164 }.width('100%') 165 }.height('100%') 166 } 167} 168``` 169 170 171
