# li-modal

<!-- Auto Generated Below -->

## Properties

| Property                    | Attribute                       | Description                                                             | Type                             | Default          |
| --------------------------- | ------------------------------- | ----------------------------------------------------------------------- | -------------------------------- | ---------------- |
| `alignActions`              | `align-actions`                 | Action Button的对齐设置 {('right' \| 'left')}                           | `"left" \| "right" \| undefined` | `'right'`        |
| `allowInjectingStyleToBody` | `allow-injecting-style-to-body` | 当模态框打开时，是否允许注入style样式{overflow: hidden}到body {boolean} | `boolean \| undefined`           | `false`          |
| `closeButtonLabel`          | `close-button-label`            | 关闭按钮的标签 {string}                                                 | `string \| undefined`            | `'关闭模态弹窗'` |
| `closeButtonTitle`          | `close-button-title`            | 关闭按钮标题 {string}                                                   | `string \| undefined`            | `'关闭'`         |
| `duration`                  | `duration`                      | 动画转换的时间间隔毫秒数 {number}                                       | `number \| undefined`            | `200`            |
| `heading`                   | `heading`                       | 模态弹窗的heading {string}                                              | `string`                         | `undefined`      |
| `omitCloseButton`           | `omit-close-button`             | 是否隐藏关闭按钮 {boolean}                                              | `boolean \| undefined`           | `false`          |
| `opened`                    | `opened`                        | 模态弹窗是否打开 {boolean}                                              | `boolean \| undefined`           | `false`          |
| `size`                      | `size`                          | 模态弹窗的大小 {string}                                                 | `string \| undefined`            | `'default'`      |
| `styles`                    | `styles`                        | 可选属性， 注入的样式style字符串 {string}                               | `string \| undefined`            | `undefined`      |

## Events

| Event             | Description                                                                                                                             | Type                                  |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- |
| `li-before-close` | 自定义事件'li-before-close'，当每个close发生前触发。调用'event.preventDefault()'会阻止模态框关闭 {EventEmitter<BeforeCloseEventDetail>} | `CustomEvent<BeforeCloseEventDetail>` |
| `li-close`        | 自定义事件'li-close'，当模态框关闭后触发。 {EventEmitter<void>}                                                                         | `CustomEvent<void>`                   |
| `li-open`         | 自定义事件'li-open'， 当模态框打开后触发。 {EventEmitter<void>}                                                                         | `CustomEvent<void>`                   |

## Shadow Parts

| Part             | Description |
| ---------------- | ----------- |
| `"backdrop"`     |             |
| `"close-button"` |             |
| `"heading"`      |             |

## Dependencies

### Depends on

- [li-icon-action-circle-close](../icons/action-circle-close)

### Graph

```mermaid
graph TD;
  li-modal --> li-icon-action-circle-close
  style li-modal fill:#f9f,stroke:#333,stroke-width:4px
```

---

_Built with ITSI_
