mirror of
https://github.com/apache/superset.git
synced 2026-08-04 21:12:44 +00:00
feat(build): migrate from Prettier to Oxfmt for docs
Signed-off-by: hainenber <dotronghai96@gmail.com>
This commit is contained in:
@@ -33,73 +33,73 @@ A component that renders a trigger element which opens a modal when clicked. Use
|
||||
<StoryWithControls
|
||||
component="ModalTrigger"
|
||||
props={{
|
||||
isButton: true,
|
||||
modalTitle: "Modal Title",
|
||||
modalBody: "This is the modal body content.",
|
||||
tooltip: "Click to open modal",
|
||||
width: "600px",
|
||||
maxWidth: "1000px",
|
||||
responsive: true,
|
||||
draggable: false,
|
||||
resizable: false,
|
||||
triggerNode: "Click to Open Modal"
|
||||
}}
|
||||
isButton: true,
|
||||
modalTitle: 'Modal Title',
|
||||
modalBody: 'This is the modal body content.',
|
||||
tooltip: 'Click to open modal',
|
||||
width: '600px',
|
||||
maxWidth: '1000px',
|
||||
responsive: true,
|
||||
draggable: false,
|
||||
resizable: false,
|
||||
triggerNode: 'Click to Open Modal',
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "isButton",
|
||||
label: "Is Button",
|
||||
type: "boolean",
|
||||
description: "Whether to wrap the trigger in a button element."
|
||||
},
|
||||
{
|
||||
name: "modalTitle",
|
||||
label: "Modal Title",
|
||||
type: "text",
|
||||
description: "Title displayed in the modal header."
|
||||
},
|
||||
{
|
||||
name: "modalBody",
|
||||
label: "Modal Body",
|
||||
type: "text",
|
||||
description: "Content displayed in the modal body."
|
||||
},
|
||||
{
|
||||
name: "tooltip",
|
||||
label: "Tooltip",
|
||||
type: "text",
|
||||
description: "Tooltip text shown on hover over the trigger."
|
||||
},
|
||||
{
|
||||
name: "width",
|
||||
label: "Width",
|
||||
type: "text",
|
||||
description: "Width of the modal (e.g., \"600px\", \"80%\")."
|
||||
},
|
||||
{
|
||||
name: "maxWidth",
|
||||
label: "Max Width",
|
||||
type: "text",
|
||||
description: "Maximum width of the modal."
|
||||
},
|
||||
{
|
||||
name: "responsive",
|
||||
label: "Responsive",
|
||||
type: "boolean",
|
||||
description: "Whether the modal should be responsive."
|
||||
},
|
||||
{
|
||||
name: "draggable",
|
||||
label: "Draggable",
|
||||
type: "boolean",
|
||||
description: "Whether the modal can be dragged by its header."
|
||||
},
|
||||
{
|
||||
name: "resizable",
|
||||
label: "Resizable",
|
||||
type: "boolean",
|
||||
description: "Whether the modal can be resized by dragging corners."
|
||||
}
|
||||
]}
|
||||
{
|
||||
name: 'isButton',
|
||||
label: 'Is Button',
|
||||
type: 'boolean',
|
||||
description: 'Whether to wrap the trigger in a button element.',
|
||||
},
|
||||
{
|
||||
name: 'modalTitle',
|
||||
label: 'Modal Title',
|
||||
type: 'text',
|
||||
description: 'Title displayed in the modal header.',
|
||||
},
|
||||
{
|
||||
name: 'modalBody',
|
||||
label: 'Modal Body',
|
||||
type: 'text',
|
||||
description: 'Content displayed in the modal body.',
|
||||
},
|
||||
{
|
||||
name: 'tooltip',
|
||||
label: 'Tooltip',
|
||||
type: 'text',
|
||||
description: 'Tooltip text shown on hover over the trigger.',
|
||||
},
|
||||
{
|
||||
name: 'width',
|
||||
label: 'Width',
|
||||
type: 'text',
|
||||
description: 'Width of the modal (e.g., "600px", "80%").',
|
||||
},
|
||||
{
|
||||
name: 'maxWidth',
|
||||
label: 'Max Width',
|
||||
type: 'text',
|
||||
description: 'Maximum width of the modal.',
|
||||
},
|
||||
{
|
||||
name: 'responsive',
|
||||
label: 'Responsive',
|
||||
type: 'boolean',
|
||||
description: 'Whether the modal should be responsive.',
|
||||
},
|
||||
{
|
||||
name: 'draggable',
|
||||
label: 'Draggable',
|
||||
type: 'boolean',
|
||||
description: 'Whether the modal can be dragged by its header.',
|
||||
},
|
||||
{
|
||||
name: 'resizable',
|
||||
label: 'Resizable',
|
||||
type: 'boolean',
|
||||
description: 'Whether the modal can be resized by dragging corners.',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
@@ -113,7 +113,9 @@ function Demo() {
|
||||
isButton
|
||||
triggerNode={<span>Click to Open</span>}
|
||||
modalTitle="Example Modal"
|
||||
modalBody={<p>This is the modal content. You can put any React elements here.</p>}
|
||||
modalBody={
|
||||
<p>This is the modal content. You can put any React elements here.</p>
|
||||
}
|
||||
width="500px"
|
||||
responsive
|
||||
/>
|
||||
@@ -165,18 +167,18 @@ function DraggableModal() {
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `isButton` | `boolean` | `true` | Whether to wrap the trigger in a button element. |
|
||||
| `modalTitle` | `string` | `"Modal Title"` | Title displayed in the modal header. |
|
||||
| `modalBody` | `string` | `"This is the modal body content."` | Content displayed in the modal body. |
|
||||
| `tooltip` | `string` | `"Click to open modal"` | Tooltip text shown on hover over the trigger. |
|
||||
| `width` | `string` | `"600px"` | Width of the modal (e.g., "600px", "80%"). |
|
||||
| `maxWidth` | `string` | `"1000px"` | Maximum width of the modal. |
|
||||
| `responsive` | `boolean` | `true` | Whether the modal should be responsive. |
|
||||
| `draggable` | `boolean` | `false` | Whether the modal can be dragged by its header. |
|
||||
| `resizable` | `boolean` | `false` | Whether the modal can be resized by dragging corners. |
|
||||
| `triggerNode` | `string` | `"Click to Open Modal"` | The clickable element that opens the modal when clicked. |
|
||||
| Prop | Type | Default | Description |
|
||||
| ------------- | --------- | ----------------------------------- | -------------------------------------------------------- |
|
||||
| `isButton` | `boolean` | `true` | Whether to wrap the trigger in a button element. |
|
||||
| `modalTitle` | `string` | `"Modal Title"` | Title displayed in the modal header. |
|
||||
| `modalBody` | `string` | `"This is the modal body content."` | Content displayed in the modal body. |
|
||||
| `tooltip` | `string` | `"Click to open modal"` | Tooltip text shown on hover over the trigger. |
|
||||
| `width` | `string` | `"600px"` | Width of the modal (e.g., "600px", "80%"). |
|
||||
| `maxWidth` | `string` | `"1000px"` | Maximum width of the modal. |
|
||||
| `responsive` | `boolean` | `true` | Whether the modal should be responsive. |
|
||||
| `draggable` | `boolean` | `false` | Whether the modal can be dragged by its header. |
|
||||
| `resizable` | `boolean` | `false` | Whether the modal can be resized by dragging corners. |
|
||||
| `triggerNode` | `string` | `"Click to Open Modal"` | The clickable element that opens the modal when clicked. |
|
||||
|
||||
## Import
|
||||
|
||||
|
||||
Reference in New Issue
Block a user