1# Point Light Style (System API)
2
3You can apply a point light style to components.
4
5>  **NOTE**
6>
7>  The initial APIs of this module are supported since API version 11. Updates will be marked with a superscript to indicate their earliest API version.
8>
9>  The point light style is only available for the following components: **Image**, **Column**, **Flex**, **Row**, **Stack**
10
11## PointLightStyle
12
13You apply a point light style by setting the light source that emits illumination and the components to be illuminated.
14
15**System API**: This is a system API.
16
17**System capability**: SystemCapability.ArkUI.ArkUI.Full
18
19| Name       | Type                                                   | Mandatory| Description                                                        |
20| ----------- | ----------------------------------------------------------- | ---- | ------------------------------------------------------------ |
21| lightSource | [LightSource](#lightsource)                         | No  | Light source. The light source affects the surrounding components that are marked as illuminable and creates light effects on those components.<br>Default value: none|
22| illuminated | [IlluminatedType](ts-appendix-enums-sys.md#illuminatedtype) | No  | Whether the current component can be illuminated by the light source and the illuminated type.<br>Default value: **IlluminatedType.NONE**|
23| bloom       | number                                                      | No  | Luminous intensity of the component. The recommended value range is 0-1.<br>Default value: **0**       |
24
25## LightSource
26
27Each component allows for one light source.
28
29**System API**: This is a system API.
30
31**System capability**: SystemCapability.ArkUI.ArkUI.Full
32
33| Name               | Type                                  | Mandatory| Description                                                    |
34| ------------------- | ------------------------------------------ | ---- | -------------------------------------------------------- |
35| positionX           | [Dimension](ts-types.md#dimension10)       | Yes  | X-coordinate of the light source relative to the current component.                             |
36| positionY           | [Dimension](ts-types.md#dimension10)       | Yes  | Y-coordinate of the light source relative to the current component.                             |
37| positionZ           | [Dimension](ts-types.md#dimension10)       | Yes  | Height of the light source. The higher the light source, the broader the light distribution.                      |
38| intensity           | number                                     | Yes  | Intensity of the light source. The recommended value range is 0-1. When the intensity is **0**, the light source does not emit light.|
39| color<sup>12+</sup> | [ResourceColor](ts-types.md#resourcecolor) | No  | Light source color.<br>Default value: **Color.White**                      |
40
41## Example
42
43```ts
44// xxx.ets
45@Entry
46@Component
47struct Index {
48  @State lightIntensity: number = 0;
49  @State bloomValue: number = 0;
50
51  build() {
52    Row({ space: 20 }) {
53      Flex()
54        .pointLight({ illuminated: IlluminatedType.BORDER })
55        .backgroundColor(0x307af7)
56        .size({ width: 50, height: 50 })
57        .borderRadius(25)
58
59      Flex()
60        .pointLight({
61          lightSource: { intensity: this.lightIntensity, positionX: "50%", positionY: "50%", positionZ: 80 },
62          bloom: this.bloomValue
63        })
64        .animation({ duration: 333 })
65        .backgroundColor(0x307af7)
66        .size({ width: 50, height: 50 })
67        .borderRadius(25)
68        .onTouch((event: TouchEvent) => {
69          if (event.type === TouchType.Down) {
70            this.lightIntensity = 2;
71            this.bloomValue = 1;
72          } else if (event.type === TouchType.Up || event.type === TouchType.Cancel) {
73            this.lightIntensity = 0;
74            this.bloomValue = 0;
75          }
76        })
77
78      Flex()
79        .pointLight({ illuminated: IlluminatedType.BORDER_CONTENT })
80        .backgroundColor(0x307af7)
81        .size({ width: 50, height: 50 })
82        .borderRadius(25)
83    }
84    .justifyContent(FlexAlign.Center)
85    .backgroundColor(Color.Black)
86    .size({ width: '100%', height: '100%' })
87  }
88}
89```
90