@kelvininc/ui-components
Version:
Kelvin UI Components
100 lines (71 loc) • 4.76 kB
Markdown
<!-- Auto Generated Below -->
## Usage
### React
```tsx
import React from 'react';
import { ModalOverlay, useModal } from '@kelvininc/react-ui-components';
import type { ModalOverlayProps } from '@kelvininc/react-ui-components';
export const ModalOverlayExample: React.FC = (args: ModalOverlayProps) => {
const modalController = useModal(args.isOpen);
return (
<>
<button type="button" onClick={modalController.open}>
Open Modal
</button>
<ModalOverlay rootId="root" {...args} isOpen={modalCtrl.isOpen} />
</>
);
};
```
## Properties
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | ----------- |
| `customClass` | `custom-class` | (optional) Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. It is also valid to provide CssClassMap with boolean logic. | `CssClassMap \| string \| string[]` | `''` |
| `headerTitle` | `header-title` | (optional) Defines the modal title label | `string` | `undefined` |
| `showCloseButton` | `show-close-button` | (optional) Defines if the modal shows the close button | `boolean` | `true` |
| `showOverlay` | `show-overlay` | (optional) Defines if the modal has an overlay background | `boolean` | `true` |
## Events
| Event | Description | Type |
| -------------- | --------------------------------------------- | ------------------- |
| `clickClose` | Emitted when the close button is clicked | `CustomEvent<void>` |
| `clickOverlay` | Emitted when the overlay container is clicked | `CustomEvent<void>` |
## Shadow Parts
| Part | Description |
| ----------- | ---------------------------- |
| `"content"` | The modal's content section. |
| `"topbar"` | The modal's topbar section. |
## CSS Custom Properties
| Name | Description |
| ----------------------------- | --------------------------------- |
| `--modal-background-color` | The modal's background color. |
| `--modal-background-color` | The modal's background color. |
| `--modal-close-button-height` | The modal's close button height |
| `--modal-close-button-height` | The modal's close button height |
| `--modal-close-button-width` | The modal's close button width |
| `--modal-close-button-width` | The modal's close button width |
| `--modal-height` | The modal's height in px. |
| `--modal-height` | The modal's height in px. |
| `--modal-min-height` | The modal's minimum height in px. |
| `--modal-min-height` | The modal's minimum height in px. |
| `--modal-min-width` | The modal's minimum width in px. |
| `--modal-min-width` | The modal's minimum width in px. |
| `--modal-overlay-color` | The modal's overlay color. |
| `--modal-overlay-color` | The modal's overlay color. |
| `--modal-topbar-height` | The modal's topbar height in px. |
| `--modal-topbar-height` | The modal's topbar height in px. |
| `--modal-topbar-text-color` | The modal's text topbar color. |
| `--modal-topbar-text-color` | The modal's text topbar color. |
| `--modal-width` | The modal's width in px. |
| `--modal-width` | The modal's width in px. |
| `--modal-z-index` | The modal's z-index |
| `--modal-z-index` | The modal's z-index |
## Dependencies
### Depends on
- [kv-icon](../icon)
### Graph
```mermaid
graph TD;
kv-modal --> kv-icon
style kv-modal fill:#f9f,stroke:#333,stroke-width:4px
```
----------------------------------------------