134 lines
3.4 KiB
Plaintext
134 lines
3.4 KiB
Plaintext
import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs";
|
|
import { Story } from "@/components/Story";
|
|
import {
|
|
LoadedCode,
|
|
GITHUB_DIR_COMP,
|
|
GITHUB_COMP_PREVIEW,
|
|
GITHUB_STORY,
|
|
} from "@/components/LoadedCode";
|
|
import { DialogDemo } from "./DialogBlocks/Preview";
|
|
import Examples from "./DialogBlocks/Examples";
|
|
|
|
# Dialog
|
|
|
|
A modal window that prompts the user to take an action or provides critical information.
|
|
|
|
<TabProvider defaultName="preview">
|
|
<TabList>
|
|
<TabTrigger name="preview">Preview</TabTrigger>
|
|
<TabTrigger name="code">Code</TabTrigger>
|
|
</TabList>
|
|
<TabContent name="preview">
|
|
<Story layout="centered">
|
|
<DialogDemo />
|
|
</Story>
|
|
</TabContent>
|
|
<TabContent name="code">
|
|
<LoadedCode from={GITHUB_COMP_PREVIEW("Dialog")} />
|
|
</TabContent>
|
|
</TabProvider>
|
|
|
|
## Installation
|
|
|
|
1. Create a new directory named `Dialog` in your component folder.
|
|
2. Create following files in the folder, and paste the code into the file.
|
|
|
|
- `index.ts`
|
|
<LoadedCode from={GITHUB_DIR_COMP("Dialog", "index.ts")} />
|
|
- `Context.ts`
|
|
<LoadedCode from={GITHUB_DIR_COMP("Dialog", "Context.ts")} />
|
|
- `Component.tsx`
|
|
<LoadedCode from={GITHUB_DIR_COMP("Dialog", "Component.tsx")} />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import {
|
|
DialogRoot,
|
|
DialogTrigger,
|
|
DialogOverlay,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogSubtitle,
|
|
DialogFooter,
|
|
DialogClose,
|
|
} from "@components/Dialog";
|
|
```
|
|
|
|
```html
|
|
<DialogRoot>
|
|
<DialogTrigger>
|
|
<button>Open Dialog</button>
|
|
</DialogTrigger>
|
|
<DialogOverlay>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>Dialog Title</DialogTitle>
|
|
<DialogSubtitle>Dialog Subtitle</DialogSubtitle>
|
|
</DialogHeader>
|
|
{/* Main Contents */}
|
|
<DialogFooter>
|
|
<DialogClose>
|
|
<button>Close</button>
|
|
</DialogClose>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</DialogOverlay>
|
|
</DialogRoot>
|
|
```
|
|
|
|
> Note:
|
|
>
|
|
> DialogTrigger and DialogClose will merge its onClick event handler to its children.
|
|
> Also, there is no default element for those.
|
|
> So you always have to provide the clickable children for DialogTrigger and DialogClose.
|
|
>
|
|
> It is easier to understand if you think of this component as always having the `asChild` prop applied to it.
|
|
|
|
## Props
|
|
|
|
### DialogOverlay
|
|
|
|
#### Special
|
|
|
|
| Prop | Type | Default | Description |
|
|
| :------------- | :-------- | :------ | :--------------------------------------------- |
|
|
| `closeOnClick` | `boolean` | `false` | Whether the dialog will be closed when clicked |
|
|
|
|
## Examples
|
|
|
|
### Basic Informational Dialog
|
|
|
|
<TabProvider defaultName="preview">
|
|
<TabList>
|
|
<TabTrigger name="preview">Preview</TabTrigger>
|
|
<TabTrigger name="code">Code</TabTrigger>
|
|
</TabList>
|
|
<TabContent name="preview">
|
|
<Story layout="centered">
|
|
<Examples.BasicInformationalDialog />
|
|
</Story>
|
|
</TabContent>
|
|
<TabContent name="code">
|
|
<LoadedCode from={GITHUB_STORY("Dialog", "BasicInformationalDialog")} />
|
|
</TabContent>
|
|
</TabProvider>
|
|
|
|
### Deleting Item
|
|
|
|
<TabProvider defaultName="preview">
|
|
<TabList>
|
|
<TabTrigger name="preview">Preview</TabTrigger>
|
|
<TabTrigger name="code">Code</TabTrigger>
|
|
</TabList>
|
|
<TabContent name="preview">
|
|
<Story layout="centered">
|
|
<Examples.DeletingItem />
|
|
</Story>
|
|
</TabContent>
|
|
<TabContent name="code">
|
|
<LoadedCode from={GITHUB_STORY("Dialog", "DeletingItem")} />
|
|
</TabContent>
|
|
</TabProvider>
|