<tdclass="cellrowborder"valign="top"width="51.754824517548236%"headers="mcps1.1.6.1.5 "><pid="a692121725a9b4ebbae65cd22b94b672e"><aname="a692121725a9b4ebbae65cd22b94b672e"></a><aname="a692121725a9b4ebbae65cd22b94b672e"></a>Whether the pop-up can be dragged.</p>
>- The **<dialog\>** component does not support the **focusable** and **click-effect** attributes.
## Styles<a name="section5775351116"></a>
Only the **width**, **height**, **margin**, **margin-\[left|top|right|bottom\]**, and **margin-\[start|end\]** styles in [Universal Styles](js-components-common-styles.md) are supported.
## Events<a name="section8562129182916"></a>
Events in [Universal Events](js-components-common-events.md) are not supported. The following table lists the supported event.
<tdclass="cellrowborder"valign="top"width="50.77%"headers="mcps1.1.4.1.3 "><pid="p55621629122916"><aname="p55621629122916"></a><aname="p55621629122916"></a>Triggered when a user taps a non-dialog area to cancel the pop-up.</p>
<tdclass="cellrowborder"valign="top"width="50.77%"headers="mcps1.1.4.1.3 "><pid="p204465311269"><aname="p204465311269"></a><aname="p204465311269"></a>Triggered when the pop-up is displayed.</p>
<tdclass="cellrowborder"valign="top"width="50.77%"headers="mcps1.1.4.1.3 "><pid="p5848121742920"><aname="p5848121742920"></a><aname="p5848121742920"></a>Triggered when the pop-up is closed.</p>
</td>
</tr>
</tbody>
</table>
## Methods<a name="section11753103216253"></a>
Methods in [Universal Methods](js-components-common-methods.md) are not supported. The following table lists the supported methods.
<tdclass="cellrowborder"valign="top"width="50.77%"headers="mcps1.1.4.1.3 "><pid="p0314958162512"><aname="p0314958162512"></a><aname="p0314958162512"></a>Shows a dialog box.</p>
<tdclass="cellrowborder"valign="top"width="50.77%"headers="mcps1.1.4.1.3 "><pid="p10314105842512"><aname="p10314105842512"></a><aname="p10314105842512"></a>Closes a dialog box.</p>
| dragable<sup>7+</sup> | boolean | false | No | Whether the dialog box can be dragged.|
> **NOTE**
>
> The **\<dialog>** component does not support the **focusable** and **click-effect** attributes.
## Styles
Only the **width**, **height**, **margin**, **margin-[left|top|right|bottom]**, and **margin-[start|end]** styles in [Universal Styles](../arkui-js/js-components-common-styles.md) are supported.
## Events
The following events are supported. The [universal events](../arkui-js/js-components-common-events.md) are not supported.
| value | number | Yes| Current value of the chart, that is, the position to which the pointer points in the chart. It is used as the initial value of the chart when the component is created.|
| min | number | No| Minimum value of the current data segment.<br>Default value: **0**|
| max | number | No| Maximum value of the current data segment.<br>Default value: **100**|
...
...
@@ -31,10 +31,10 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name| Type| Description|
| -------- | -------- | -------- |
| value | number | Value of the chart.<br>Default value: **0**|
| startAngle | number | Start angle of the chart. The value 0 indicates 0 degrees, and a positive value indicates the clockwise direction.<br>Default value: **-150**|
| endAngle | number | End angle of the chart. The value 0 indicates 0 degrees, and a positive value indicates the clockwise direction.<br>Default value: **150**|
| colors | Array<ColorStop> | Colors of the chart. Colors can be set for individual segments.|
| value | number | Value of the chart. It can be dynamically changed.<br>Default value: **0**|
| startAngle | number | Start angle of the chart. The value **0** indicates 0 degrees, and a positive value indicates the clockwise direction.<br>Default value: **0**|
| endAngle | number | End angle of the chart. The value **0** indicates 0 degrees, and a positive value indicates the clockwise direction.<br>Default value: **360**|
| colors | Array<[ColorStop](#colorstop)> | Colors of the chart. Colors can be set for individual segments.|
| strokeWidth | Length | Stroke width of the chart.|
| ColorStop | [[ResourceColor](ts-types.md#resourcecolor), number] | Type of the gradient stop. The first parameter specifies the color, and the second parameter specifies the offset, which ranges from 0 to 1.|
| ColorStop | [[ResourceColor](ts-types.md#resourcecolor), number] | Type of the gradient stop. The first parameter indicates the color value. If it is set to a non-color value, the black color is used. The second parameter indicates the color weight. If it is set to a negative number or a non-numeric value, the color weight is 0, which means that the color is not displayed.|
| color | [ResourceColor](ts-types.md#resourcecolor) | No | Color.White | Font color. |
| fontSize | number \| string | No | 10 | Font size, in vp. |
| badgeSize | number \| string | No | 16 | Badge size, in vp. This parameter cannot be set in percentage. If it is set to an invalid value, the default value is used.|