mirror of
https://github.com/apache/superset.git
synced 2026-05-23 00:36:01 +00:00
docs: cut 6.1.0 versions for docs, admin_docs, developer_docs, components
Snapshots all four versioned Docusaurus sections at v6.1.0, cut from master after the version-cutting tooling (#39837) and broken-internal- links fixes (#40102) landed. Captures fresh auto-generated content and freezes data dependencies so the historical snapshot stays correct. Versioning behavior: lastVersion stays at current for every section, so the canonical URLs (/docs/..., /admin-docs/..., /developer-docs/..., /components/...) continue to render content from master. The current version is consistently labeled "Next" with an unreleased banner, and 6.1.0 is a historical pin accessible only via its explicit version segment. Component playground: previously disabled: true in versions-config.json, now enabled and versioned. The plugin block in docusaurus.config.ts was already gated only by the disabled flag, so no other code changes were needed to bring it back online. Snapshot includes: - All MDX content for the four sections. - Auto-gen captured fresh: 74 database pages (engine spec metadata), ~1,800 API reference files (openapi.json), 59 component pages (Storybook stories). - Data imports frozen at cut time into snapshot-local _versioned_data/ dirs: versioned_docs/version-6.1.0/_versioned_data/src/data/databases.json (canonical 80-database diagnostics from master, preserved by the generator's input-hash cache) admin_docs_versioned_docs/version-6.1.0/_versioned_data/data/countries.json admin_docs_versioned_docs/version-6.1.0/_versioned_data/static/feature-flags.json developer_docs_versioned_docs/version-6.1.0/_versioned_data/static/data/components.json - Import paths in deeply-nested files rewritten so they still resolve from one directory deeper inside the snapshot. Verified via full yarn build: exit 0, no broken links surfaced by onBrokenLinks: throw. Anchor warnings present are pre-existing on master (community#superset-community-calendar) and unrelated.
This commit is contained in:
Claude Code
@@ -0,0 +1,215 @@
|
||||
---
|
||||
title: AutoComplete
|
||||
sidebar_label: AutoComplete
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# AutoComplete
|
||||
|
||||
AutoComplete component for search functionality.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="AutoComplete"
|
||||
props={{
|
||||
placeholder: "Type to search...",
|
||||
options: [
|
||||
{
|
||||
value: "Dashboard",
|
||||
label: "Dashboard"
|
||||
},
|
||||
{
|
||||
value: "Chart",
|
||||
label: "Chart"
|
||||
},
|
||||
{
|
||||
value: "Dataset",
|
||||
label: "Dataset"
|
||||
},
|
||||
{
|
||||
value: "Database",
|
||||
label: "Database"
|
||||
},
|
||||
{
|
||||
value: "Query",
|
||||
label: "Query"
|
||||
}
|
||||
],
|
||||
style: {
|
||||
width: 300
|
||||
},
|
||||
filterOption: true
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "placeholder",
|
||||
label: "Placeholder",
|
||||
type: "text",
|
||||
description: "Placeholder text for AutoComplete"
|
||||
},
|
||||
{
|
||||
name: "style",
|
||||
label: "Style",
|
||||
type: "object",
|
||||
description: "Custom styles for AutoComplete"
|
||||
},
|
||||
{
|
||||
name: "value",
|
||||
label: "Value",
|
||||
type: "text",
|
||||
description: "Selected option"
|
||||
},
|
||||
{
|
||||
name: "disabled",
|
||||
label: "Disabled",
|
||||
type: "boolean",
|
||||
description: "Disable the AutoComplete"
|
||||
},
|
||||
{
|
||||
name: "popupMatchSelectWidth",
|
||||
label: "Popup Match Select Width",
|
||||
type: "number",
|
||||
description: "Width of the dropdown"
|
||||
},
|
||||
{
|
||||
name: "allowClear",
|
||||
label: "Allow Clear",
|
||||
type: "boolean",
|
||||
description: "Show clear button"
|
||||
},
|
||||
{
|
||||
name: "autoFocus",
|
||||
label: "Auto Focus",
|
||||
type: "boolean",
|
||||
description: "If get focus when component mounted"
|
||||
},
|
||||
{
|
||||
name: "backfill",
|
||||
label: "Backfill",
|
||||
type: "boolean",
|
||||
description: "If backfill selected item the input when using keyboard"
|
||||
},
|
||||
{
|
||||
name: "popupClassName",
|
||||
label: "Popup Class Name",
|
||||
type: "text",
|
||||
description: "The className of dropdown menu"
|
||||
},
|
||||
{
|
||||
name: "filterOption",
|
||||
label: "Filter Option",
|
||||
type: "boolean",
|
||||
description: "Enable filtering of options based on input"
|
||||
},
|
||||
{
|
||||
name: "notFoundContent",
|
||||
label: "Not Found Content",
|
||||
type: "text",
|
||||
description: "Specify content to show when no result matches."
|
||||
},
|
||||
{
|
||||
name: "open",
|
||||
label: "Open",
|
||||
type: "boolean",
|
||||
description: "Controlled open state of dropdown"
|
||||
},
|
||||
{
|
||||
name: "status",
|
||||
label: "Status",
|
||||
type: "select",
|
||||
options: [
|
||||
"error",
|
||||
"warning"
|
||||
],
|
||||
description: "Set validation status"
|
||||
},
|
||||
{
|
||||
name: "size",
|
||||
label: "Size",
|
||||
type: "select",
|
||||
options: [
|
||||
"large",
|
||||
"middle",
|
||||
"small"
|
||||
],
|
||||
description: "The size of the input box"
|
||||
},
|
||||
{
|
||||
name: "variant",
|
||||
label: "Variant",
|
||||
type: "select",
|
||||
options: [
|
||||
"outlined",
|
||||
"borderless",
|
||||
"filled"
|
||||
],
|
||||
description: "Variants of input"
|
||||
},
|
||||
{
|
||||
name: "virtual",
|
||||
label: "Virtual",
|
||||
type: "boolean",
|
||||
description: "Disable virtual scroll when set to false"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<AutoComplete
|
||||
placeholder="Type to search..."
|
||||
options={[{"value":"Dashboard","label":"Dashboard"},{"value":"Chart","label":"Chart"},{"value":"Dataset","label":"Dataset"},{"value":"Database","label":"Database"},{"value":"Query","label":"Query"}]}
|
||||
style={{"width":300}}
|
||||
filterOption
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `placeholder` | `string` | `"Type to search..."` | Placeholder text for AutoComplete |
|
||||
| `options` | `any` | `[{"value":"Dashboard","label":"Dashboard"},{"value":"Chart","label":"Chart"},{"value":"Dataset","label":"Dataset"},{"value":"Database","label":"Database"},{"value":"Query","label":"Query"}]` | The dropdown options |
|
||||
| `style` | `any` | `{"width":300}` | Custom styles for AutoComplete |
|
||||
| `filterOption` | `boolean` | `true` | Enable filtering of options based on input |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { AutoComplete } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/AutoComplete/AutoComplete.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,140 @@
|
||||
---
|
||||
title: Avatar
|
||||
sidebar_label: Avatar
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# Avatar
|
||||
|
||||
The Avatar component from Superset's UI library.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="Avatar"
|
||||
props={{
|
||||
children: "AB",
|
||||
alt: "",
|
||||
gap: 4,
|
||||
shape: "circle",
|
||||
size: "default",
|
||||
src: "",
|
||||
draggable: false
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "children",
|
||||
label: "Children",
|
||||
type: "text",
|
||||
description: "Text or initials to display inside the avatar."
|
||||
},
|
||||
{
|
||||
name: "alt",
|
||||
label: "Alt",
|
||||
type: "text"
|
||||
},
|
||||
{
|
||||
name: "gap",
|
||||
label: "Gap",
|
||||
type: "number",
|
||||
description: "Letter spacing inside the avatar."
|
||||
},
|
||||
{
|
||||
name: "shape",
|
||||
label: "Shape",
|
||||
type: "select",
|
||||
options: [
|
||||
"circle",
|
||||
"square"
|
||||
],
|
||||
description: "The shape of the avatar."
|
||||
},
|
||||
{
|
||||
name: "size",
|
||||
label: "Size",
|
||||
type: "select",
|
||||
options: [
|
||||
"small",
|
||||
"default",
|
||||
"large"
|
||||
],
|
||||
description: "The size of the avatar."
|
||||
},
|
||||
{
|
||||
name: "src",
|
||||
label: "Src",
|
||||
type: "text",
|
||||
description: "Image URL for the avatar. If provided, overrides children."
|
||||
},
|
||||
{
|
||||
name: "draggable",
|
||||
label: "Draggable",
|
||||
type: "boolean"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<Avatar
|
||||
alt=""
|
||||
gap={4}
|
||||
shape="circle"
|
||||
size="default"
|
||||
src=""
|
||||
>
|
||||
AB
|
||||
</Avatar>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `children` | `string` | `"AB"` | Text or initials to display inside the avatar. |
|
||||
| `alt` | `string` | `""` | - |
|
||||
| `gap` | `number` | `4` | Letter spacing inside the avatar. |
|
||||
| `shape` | `string` | `"circle"` | The shape of the avatar. |
|
||||
| `size` | `string` | `"default"` | The size of the avatar. |
|
||||
| `src` | `string` | `""` | Image URL for the avatar. If provided, overrides children. |
|
||||
| `draggable` | `boolean` | `false` | - |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { Avatar } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Avatar/Avatar.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,160 @@
|
||||
---
|
||||
title: Badge
|
||||
sidebar_label: Badge
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# Badge
|
||||
|
||||
The Badge component from Superset's UI library.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="Badge"
|
||||
props={{
|
||||
count: 5,
|
||||
size: "default",
|
||||
showZero: false,
|
||||
overflowCount: 99
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "count",
|
||||
label: "Count",
|
||||
type: "number",
|
||||
description: "Number to show in the badge."
|
||||
},
|
||||
{
|
||||
name: "size",
|
||||
label: "Size",
|
||||
type: "select",
|
||||
options: [
|
||||
"default",
|
||||
"small"
|
||||
],
|
||||
description: "Size of the badge."
|
||||
},
|
||||
{
|
||||
name: "showZero",
|
||||
label: "Show Zero",
|
||||
type: "boolean",
|
||||
description: "Whether to show badge when count is zero."
|
||||
},
|
||||
{
|
||||
name: "overflowCount",
|
||||
label: "Overflow Count",
|
||||
type: "number",
|
||||
description: "Max count to show. Shows count+ when exceeded (e.g., 99+)."
|
||||
},
|
||||
{
|
||||
name: "color",
|
||||
label: "Color",
|
||||
type: "select",
|
||||
options: [
|
||||
"pink",
|
||||
"red",
|
||||
"yellow",
|
||||
"orange",
|
||||
"cyan",
|
||||
"green",
|
||||
"blue",
|
||||
"purple",
|
||||
"geekblue",
|
||||
"magenta",
|
||||
"volcano",
|
||||
"gold",
|
||||
"lime"
|
||||
],
|
||||
description: "Custom background color for the badge."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<Badge
|
||||
count={5}
|
||||
size="default"
|
||||
overflowCount={99}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Status Badge
|
||||
|
||||
```tsx live
|
||||
function StatusBadgeDemo() {
|
||||
const statuses = ['default', 'success', 'processing', 'warning', 'error'];
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||||
{statuses.map(status => (
|
||||
<Badge key={status} status={status} text={`Status: ${status}`} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Color Gallery
|
||||
|
||||
```tsx live
|
||||
function ColorGallery() {
|
||||
const colors = ['pink', 'red', 'orange', 'green', 'cyan', 'blue', 'purple'];
|
||||
return (
|
||||
<div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
|
||||
{colors.map(color => (
|
||||
<Badge key={color} count={9} color={color} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `count` | `number` | `5` | Number to show in the badge. |
|
||||
| `size` | `string` | `"default"` | Size of the badge. |
|
||||
| `showZero` | `boolean` | `false` | Whether to show badge when count is zero. |
|
||||
| `overflowCount` | `number` | `99` | Max count to show. Shows count+ when exceeded (e.g., 99+). |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { Badge } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Badge/Badge.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,93 @@
|
||||
---
|
||||
title: Breadcrumb
|
||||
sidebar_label: Breadcrumb
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# Breadcrumb
|
||||
|
||||
Breadcrumb component for displaying navigation paths.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="Breadcrumb"
|
||||
props={{
|
||||
items: [
|
||||
{
|
||||
title: "Home",
|
||||
href: "/"
|
||||
},
|
||||
{
|
||||
title: "Library",
|
||||
href: "/library"
|
||||
},
|
||||
{
|
||||
title: "Data"
|
||||
}
|
||||
],
|
||||
separator: "/"
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "separator",
|
||||
label: "Separator",
|
||||
type: "text",
|
||||
description: "Custom separator between items"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{ title: 'Home', href: '/' },
|
||||
{ title: 'Library', href: '/library' },
|
||||
{ title: 'Data' },
|
||||
]}
|
||||
separator="/"
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { Breadcrumb } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Breadcrumb/Breadcrumb.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,142 @@
|
||||
---
|
||||
title: Button
|
||||
sidebar_label: Button
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls, ComponentGallery } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# Button
|
||||
|
||||
The Button component from Superset's UI library.
|
||||
|
||||
## All Variants
|
||||
|
||||
<ComponentGallery
|
||||
component="Button"
|
||||
sizes={["xsmall","small","default"]}
|
||||
styles={["primary","secondary","dashed","danger","link"]}
|
||||
sizeProp="buttonSize"
|
||||
styleProp="buttonStyle"
|
||||
/>
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="Button"
|
||||
props={{
|
||||
buttonStyle: "primary",
|
||||
buttonSize: "default",
|
||||
children: "Button!"
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "buttonStyle",
|
||||
label: "Button Style",
|
||||
type: "select",
|
||||
options: [
|
||||
"primary",
|
||||
"secondary",
|
||||
"dashed",
|
||||
"danger",
|
||||
"link"
|
||||
],
|
||||
description: "The style variant of the button."
|
||||
},
|
||||
{
|
||||
name: "buttonSize",
|
||||
label: "Button Size",
|
||||
type: "select",
|
||||
options: [
|
||||
"xsmall",
|
||||
"small",
|
||||
"default"
|
||||
],
|
||||
description: "The size of the button."
|
||||
},
|
||||
{
|
||||
name: "children",
|
||||
label: "Children",
|
||||
type: "text",
|
||||
description: "The button text or content."
|
||||
},
|
||||
{
|
||||
name: "target",
|
||||
label: "Target",
|
||||
type: "select"
|
||||
},
|
||||
{
|
||||
name: "href",
|
||||
label: "Href",
|
||||
type: "select"
|
||||
},
|
||||
{
|
||||
name: "disabled",
|
||||
label: "Disabled",
|
||||
type: "boolean",
|
||||
description: "Whether the button is disabled."
|
||||
},
|
||||
{
|
||||
name: "loading",
|
||||
label: "Loading",
|
||||
type: "boolean",
|
||||
description: "Whether to show loading spinner."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<Button
|
||||
buttonStyle="primary"
|
||||
buttonSize="default"
|
||||
>
|
||||
Button!
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `buttonStyle` | `string` | `"primary"` | The style variant of the button. |
|
||||
| `buttonSize` | `string` | `"default"` | The size of the button. |
|
||||
| `children` | `string` | `"Button!"` | The button text or content. |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { Button } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Button/Button.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,88 @@
|
||||
---
|
||||
title: ButtonGroup
|
||||
sidebar_label: ButtonGroup
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# ButtonGroup
|
||||
|
||||
ButtonGroup is a container that groups multiple Button components together with consistent spacing and styling.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="ButtonGroup"
|
||||
props={{
|
||||
expand: false
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "expand",
|
||||
label: "Expand",
|
||||
type: "boolean",
|
||||
description: "When true, buttons expand to fill available width."
|
||||
},
|
||||
{
|
||||
name: "className",
|
||||
label: "Class Name",
|
||||
type: "text",
|
||||
description: "CSS class name for custom styling."
|
||||
}
|
||||
]}
|
||||
sampleChildren={[{"component":"Button","props":{"buttonStyle":"tertiary","children":"Button 1"}},{"component":"Button","props":{"buttonStyle":"tertiary","children":"Button 2"}},{"component":"Button","props":{"buttonStyle":"tertiary","children":"Button 3"}}]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<ButtonGroup>
|
||||
<Button buttonStyle="tertiary">Button 1</Button>
|
||||
<Button buttonStyle="tertiary">Button 2</Button>
|
||||
<Button buttonStyle="tertiary">Button 3</Button>
|
||||
</ButtonGroup>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `expand` | `boolean` | `false` | When true, buttons expand to fill available width. |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { ButtonGroup } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/ButtonGroup/ButtonGroup.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,79 @@
|
||||
---
|
||||
title: CachedLabel
|
||||
sidebar_label: CachedLabel
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# CachedLabel
|
||||
|
||||
The CachedLabel component from Superset's UI library.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="CachedLabel"
|
||||
props={{}}
|
||||
controls={[
|
||||
{
|
||||
name: "cachedTimestamp",
|
||||
label: "Cached Timestamp",
|
||||
type: "text",
|
||||
description: "ISO timestamp of when the data was cached"
|
||||
},
|
||||
{
|
||||
name: "className",
|
||||
label: "Class Name",
|
||||
type: "text",
|
||||
description: "Additional CSS class for the label"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<CachedLabel
|
||||
// Add props here
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { CachedLabel } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/CachedLabel/CachedLabel.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,142 @@
|
||||
---
|
||||
title: Card
|
||||
sidebar_label: Card
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# Card
|
||||
|
||||
A container component for grouping related content. Supports titles, borders, loading states, and hover effects.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="Card"
|
||||
props={{
|
||||
padded: true,
|
||||
title: "Dashboard Overview",
|
||||
children: "This card displays a summary of your dashboard metrics and recent activity.",
|
||||
bordered: true,
|
||||
loading: false,
|
||||
hoverable: false
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "padded",
|
||||
label: "Padded",
|
||||
type: "boolean",
|
||||
description: "Whether the card content has padding."
|
||||
},
|
||||
{
|
||||
name: "title",
|
||||
label: "Title",
|
||||
type: "text",
|
||||
description: "Title text displayed at the top of the card."
|
||||
},
|
||||
{
|
||||
name: "children",
|
||||
label: "Children",
|
||||
type: "text",
|
||||
description: "The content inside the card."
|
||||
},
|
||||
{
|
||||
name: "bordered",
|
||||
label: "Bordered",
|
||||
type: "boolean",
|
||||
description: "Whether to show a border around the card."
|
||||
},
|
||||
{
|
||||
name: "loading",
|
||||
label: "Loading",
|
||||
type: "boolean",
|
||||
description: "Whether to show a loading skeleton."
|
||||
},
|
||||
{
|
||||
name: "hoverable",
|
||||
label: "Hoverable",
|
||||
type: "boolean",
|
||||
description: "Whether the card lifts on hover."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<Card title="Dashboard Overview" bordered>
|
||||
This card displays a summary of your dashboard metrics and recent activity.
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Card States
|
||||
|
||||
```tsx live
|
||||
function CardStates() {
|
||||
return (
|
||||
<div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
|
||||
<Card title="Default" bordered style={{ width: 250 }}>
|
||||
Default card content.
|
||||
</Card>
|
||||
<Card title="Hoverable" bordered hoverable style={{ width: 250 }}>
|
||||
Hover over this card.
|
||||
</Card>
|
||||
<Card title="Loading" bordered loading style={{ width: 250 }}>
|
||||
This content is hidden while loading.
|
||||
</Card>
|
||||
<Card title="No Border" style={{ width: 250 }}>
|
||||
Borderless card.
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `padded` | `boolean` | `true` | Whether the card content has padding. |
|
||||
| `title` | `string` | `"Dashboard Overview"` | Title text displayed at the top of the card. |
|
||||
| `children` | `string` | `"This card displays a summary of your dashboard metrics and recent activity."` | The content inside the card. |
|
||||
| `bordered` | `boolean` | `true` | Whether to show a border around the card. |
|
||||
| `loading` | `boolean` | `false` | Whether to show a loading skeleton. |
|
||||
| `hoverable` | `boolean` | `false` | Whether the card lifts on hover. |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { Card } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Card/Card.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,141 @@
|
||||
---
|
||||
title: Checkbox
|
||||
sidebar_label: Checkbox
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# Checkbox
|
||||
|
||||
Checkbox component that supports both regular and indeterminate states, built on top of Ant Design v5 Checkbox.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="Checkbox"
|
||||
props={{
|
||||
checked: false,
|
||||
indeterminate: false
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "checked",
|
||||
label: "Checked",
|
||||
type: "boolean",
|
||||
description: "Whether the checkbox is checked."
|
||||
},
|
||||
{
|
||||
name: "indeterminate",
|
||||
label: "Indeterminate",
|
||||
type: "boolean",
|
||||
description: "Whether the checkbox is in indeterminate state (partially selected)."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<Checkbox
|
||||
// Add props here
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## All Checkbox States
|
||||
|
||||
```tsx live
|
||||
function AllStates() {
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||||
<Checkbox checked={false}>Unchecked</Checkbox>
|
||||
<Checkbox checked={true}>Checked</Checkbox>
|
||||
<Checkbox indeterminate={true}>Indeterminate</Checkbox>
|
||||
<Checkbox disabled>Disabled unchecked</Checkbox>
|
||||
<Checkbox disabled checked>Disabled checked</Checkbox>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Select All Pattern
|
||||
|
||||
```tsx live
|
||||
function SelectAllDemo() {
|
||||
const [selected, setSelected] = React.useState([]);
|
||||
const options = ['Option A', 'Option B', 'Option C'];
|
||||
|
||||
const allSelected = selected.length === options.length;
|
||||
const indeterminate = selected.length > 0 && !allSelected;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Checkbox
|
||||
checked={allSelected}
|
||||
indeterminate={indeterminate}
|
||||
onChange={(e) => setSelected(e.target.checked ? [...options] : [])}
|
||||
>
|
||||
Select All
|
||||
</Checkbox>
|
||||
<div style={{ marginLeft: 24, marginTop: 8 }}>
|
||||
{options.map(opt => (
|
||||
<div key={opt}>
|
||||
<Checkbox
|
||||
checked={selected.includes(opt)}
|
||||
onChange={() => setSelected(prev =>
|
||||
prev.includes(opt) ? prev.filter(x => x !== opt) : [...prev, opt]
|
||||
)}
|
||||
>
|
||||
{opt}
|
||||
</Checkbox>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `checked` | `boolean` | `false` | Whether the checkbox is checked. |
|
||||
| `indeterminate` | `boolean` | `false` | Whether the checkbox is in indeterminate state (partially selected). |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { Checkbox } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Checkbox/Checkbox.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,106 @@
|
||||
---
|
||||
title: Collapse
|
||||
sidebar_label: Collapse
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# Collapse
|
||||
|
||||
The Collapse component from Superset's UI library.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="Collapse"
|
||||
props={{
|
||||
ghost: false,
|
||||
bordered: true,
|
||||
accordion: false,
|
||||
animateArrows: false,
|
||||
modalMode: false
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "ghost",
|
||||
label: "Ghost",
|
||||
type: "boolean"
|
||||
},
|
||||
{
|
||||
name: "bordered",
|
||||
label: "Bordered",
|
||||
type: "boolean"
|
||||
},
|
||||
{
|
||||
name: "accordion",
|
||||
label: "Accordion",
|
||||
type: "boolean"
|
||||
},
|
||||
{
|
||||
name: "animateArrows",
|
||||
label: "Animate Arrows",
|
||||
type: "boolean"
|
||||
},
|
||||
{
|
||||
name: "modalMode",
|
||||
label: "Modal Mode",
|
||||
type: "boolean"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<Collapse
|
||||
bordered
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `ghost` | `boolean` | `false` | - |
|
||||
| `bordered` | `boolean` | `true` | - |
|
||||
| `accordion` | `boolean` | `false` | - |
|
||||
| `animateArrows` | `boolean` | `false` | - |
|
||||
| `modalMode` | `boolean` | `false` | - |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { Collapse } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Collapse/Collapse.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,110 @@
|
||||
---
|
||||
title: DatePicker
|
||||
sidebar_label: DatePicker
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# DatePicker
|
||||
|
||||
The DatePicker component from Superset's UI library.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="DatePicker"
|
||||
props={{
|
||||
placeholder: "Select date",
|
||||
showNow: true,
|
||||
allowClear: false,
|
||||
autoFocus: true,
|
||||
disabled: false,
|
||||
format: "YYYY-MM-DD hh:mm a",
|
||||
inputReadOnly: false,
|
||||
picker: "date",
|
||||
placement: "bottomLeft",
|
||||
size: "middle",
|
||||
showTime: {
|
||||
format: "hh:mm a",
|
||||
needConfirm: false
|
||||
}
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "placeholder",
|
||||
label: "Placeholder",
|
||||
type: "text"
|
||||
},
|
||||
{
|
||||
name: "showNow",
|
||||
label: "Show Now",
|
||||
type: "boolean",
|
||||
description: "Show \"Now\" button to select current date and time."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<DatePicker
|
||||
placeholder="Select date"
|
||||
format="YYYY-MM-DD hh:mm a"
|
||||
showNow
|
||||
showTime={{ format: 'hh:mm a', needConfirm: false }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `placeholder` | `string` | `"Select date"` | - |
|
||||
| `showNow` | `boolean` | `true` | Show "Now" button to select current date and time. |
|
||||
| `allowClear` | `boolean` | `false` | - |
|
||||
| `autoFocus` | `boolean` | `true` | - |
|
||||
| `disabled` | `boolean` | `false` | - |
|
||||
| `format` | `string` | `"YYYY-MM-DD hh:mm a"` | - |
|
||||
| `inputReadOnly` | `boolean` | `false` | - |
|
||||
| `picker` | `string` | `"date"` | - |
|
||||
| `placement` | `string` | `"bottomLeft"` | - |
|
||||
| `size` | `string` | `"middle"` | - |
|
||||
| `showTime` | `any` | `{"format":"hh:mm a","needConfirm":false}` | - |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { DatePicker } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/DatePicker/DatePicker.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,144 @@
|
||||
---
|
||||
title: Divider
|
||||
sidebar_label: Divider
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# Divider
|
||||
|
||||
The Divider component from Superset's UI library.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="Divider"
|
||||
props={{
|
||||
dashed: false,
|
||||
variant: "solid",
|
||||
orientation: "center",
|
||||
orientationMargin: "",
|
||||
plain: true,
|
||||
type: "horizontal"
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "dashed",
|
||||
label: "Dashed",
|
||||
type: "boolean",
|
||||
description: "Whether line is dashed (deprecated, use variant)."
|
||||
},
|
||||
{
|
||||
name: "variant",
|
||||
label: "Variant",
|
||||
type: "select",
|
||||
options: [
|
||||
"dashed",
|
||||
"dotted",
|
||||
"solid"
|
||||
],
|
||||
description: "Line style of the divider."
|
||||
},
|
||||
{
|
||||
name: "orientation",
|
||||
label: "Orientation",
|
||||
type: "select",
|
||||
options: [
|
||||
"left",
|
||||
"right",
|
||||
"center"
|
||||
],
|
||||
description: "Position of title inside divider."
|
||||
},
|
||||
{
|
||||
name: "orientationMargin",
|
||||
label: "Orientation Margin",
|
||||
type: "text",
|
||||
description: "Margin from divider edge to title."
|
||||
},
|
||||
{
|
||||
name: "plain",
|
||||
label: "Plain",
|
||||
type: "boolean",
|
||||
description: "Use plain style without bold title."
|
||||
},
|
||||
{
|
||||
name: "type",
|
||||
label: "Type",
|
||||
type: "select",
|
||||
options: [
|
||||
"horizontal",
|
||||
"vertical"
|
||||
],
|
||||
description: "Direction of the divider."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<>
|
||||
<p>Horizontal divider with title (orientationMargin applies here):</p>
|
||||
<Divider orientation="left" orientationMargin={0}>Left Title</Divider>
|
||||
<Divider orientation="right" orientationMargin={50}>Right Title</Divider>
|
||||
<Divider>Center Title</Divider>
|
||||
<p>Vertical divider (use container gap for spacing):</p>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
|
||||
<span>Link</span>
|
||||
<Divider type="vertical" />
|
||||
<span>Link</span>
|
||||
<Divider type="vertical" />
|
||||
<span>Link</span>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `dashed` | `boolean` | `false` | Whether line is dashed (deprecated, use variant). |
|
||||
| `variant` | `string` | `"solid"` | Line style of the divider. |
|
||||
| `orientation` | `string` | `"center"` | Position of title inside divider. |
|
||||
| `orientationMargin` | `string` | `""` | Margin from divider edge to title. |
|
||||
| `plain` | `boolean` | `true` | Use plain style without bold title. |
|
||||
| `type` | `string` | `"horizontal"` | Direction of the divider. |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { Divider } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Divider/Divider.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,172 @@
|
||||
---
|
||||
title: EditableTitle
|
||||
sidebar_label: EditableTitle
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# EditableTitle
|
||||
|
||||
The EditableTitle component from Superset's UI library.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="EditableTitle"
|
||||
props={{
|
||||
canEdit: true,
|
||||
editing: false,
|
||||
emptyText: "Empty text",
|
||||
noPermitTooltip: "Not permitted",
|
||||
showTooltip: true,
|
||||
title: "Title",
|
||||
defaultTitle: "Default title",
|
||||
placeholder: "Placeholder",
|
||||
certifiedBy: "",
|
||||
certificationDetails: "",
|
||||
maxWidth: 100,
|
||||
autoSize: true
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "canEdit",
|
||||
label: "Can Edit",
|
||||
type: "boolean",
|
||||
description: "Whether the title can be edited."
|
||||
},
|
||||
{
|
||||
name: "editing",
|
||||
label: "Editing",
|
||||
type: "boolean",
|
||||
description: "Whether the title is currently in edit mode."
|
||||
},
|
||||
{
|
||||
name: "emptyText",
|
||||
label: "Empty Text",
|
||||
type: "text",
|
||||
description: "Text to display when title is empty."
|
||||
},
|
||||
{
|
||||
name: "noPermitTooltip",
|
||||
label: "No Permit Tooltip",
|
||||
type: "text",
|
||||
description: "Tooltip shown when user lacks edit permission."
|
||||
},
|
||||
{
|
||||
name: "showTooltip",
|
||||
label: "Show Tooltip",
|
||||
type: "boolean",
|
||||
description: "Whether to show tooltip on hover."
|
||||
},
|
||||
{
|
||||
name: "title",
|
||||
label: "Title",
|
||||
type: "text",
|
||||
description: "The title text to display."
|
||||
},
|
||||
{
|
||||
name: "defaultTitle",
|
||||
label: "Default Title",
|
||||
type: "text",
|
||||
description: "Default title when none is provided."
|
||||
},
|
||||
{
|
||||
name: "placeholder",
|
||||
label: "Placeholder",
|
||||
type: "text",
|
||||
description: "Placeholder text when editing."
|
||||
},
|
||||
{
|
||||
name: "certifiedBy",
|
||||
label: "Certified By",
|
||||
type: "text",
|
||||
description: "Name of person/team who certified this item."
|
||||
},
|
||||
{
|
||||
name: "certificationDetails",
|
||||
label: "Certification Details",
|
||||
type: "text",
|
||||
description: "Additional certification details or description."
|
||||
},
|
||||
{
|
||||
name: "maxWidth",
|
||||
label: "Max Width",
|
||||
type: "number",
|
||||
description: "Maximum width of the title in pixels."
|
||||
},
|
||||
{
|
||||
name: "autoSize",
|
||||
label: "Auto Size",
|
||||
type: "boolean",
|
||||
description: "Whether to auto-size based on content."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<EditableTitle
|
||||
title="My Dashboard"
|
||||
canEdit
|
||||
showTooltip
|
||||
certifiedBy="Data Team"
|
||||
certificationDetails="Verified Q1 2024"
|
||||
onSaveTitle={(newTitle) => console.log('Saved:', newTitle)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `canEdit` | `boolean` | `true` | Whether the title can be edited. |
|
||||
| `editing` | `boolean` | `false` | Whether the title is currently in edit mode. |
|
||||
| `emptyText` | `string` | `"Empty text"` | Text to display when title is empty. |
|
||||
| `noPermitTooltip` | `string` | `"Not permitted"` | Tooltip shown when user lacks edit permission. |
|
||||
| `showTooltip` | `boolean` | `true` | Whether to show tooltip on hover. |
|
||||
| `title` | `string` | `"Title"` | The title text to display. |
|
||||
| `defaultTitle` | `string` | `"Default title"` | Default title when none is provided. |
|
||||
| `placeholder` | `string` | `"Placeholder"` | Placeholder text when editing. |
|
||||
| `certifiedBy` | `string` | `""` | Name of person/team who certified this item. |
|
||||
| `certificationDetails` | `string` | `""` | Additional certification details or description. |
|
||||
| `maxWidth` | `number` | `100` | Maximum width of the title in pixels. |
|
||||
| `autoSize` | `boolean` | `true` | Whether to auto-size based on content. |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { EditableTitle } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/EditableTitle/EditableTitle.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,147 @@
|
||||
---
|
||||
title: EmptyState
|
||||
sidebar_label: EmptyState
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls, ComponentGallery } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# EmptyState
|
||||
|
||||
The EmptyState component from Superset's UI library.
|
||||
|
||||
## All Variants
|
||||
|
||||
<ComponentGallery
|
||||
component="EmptyState"
|
||||
sizes={["medium"]}
|
||||
styles={["chart.svg","document.svg","empty-charts.svg","empty-dashboard.svg","empty-dataset.svg","empty-query.svg","empty-table.svg","empty.svg","empty_sql_chart.svg","filter-results.svg","filter.svg","star-circle.svg","union.svg","vector.svg"]}
|
||||
sizeProp="size"
|
||||
styleProp="image"
|
||||
/>
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="EmptyState"
|
||||
props={{
|
||||
size: "medium",
|
||||
title: "No Data Available",
|
||||
description: "There is no data to display at this time.",
|
||||
image: "empty.svg",
|
||||
buttonText: ""
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "size",
|
||||
label: "Size",
|
||||
type: "select",
|
||||
options: [
|
||||
"small",
|
||||
"medium",
|
||||
"large"
|
||||
],
|
||||
description: "Size of the empty state component."
|
||||
},
|
||||
{
|
||||
name: "title",
|
||||
label: "Title",
|
||||
type: "text",
|
||||
description: "Main title text."
|
||||
},
|
||||
{
|
||||
name: "description",
|
||||
label: "Description",
|
||||
type: "text",
|
||||
description: "Description text below the title."
|
||||
},
|
||||
{
|
||||
name: "image",
|
||||
label: "Image",
|
||||
type: "select",
|
||||
options: [
|
||||
"chart.svg",
|
||||
"document.svg",
|
||||
"empty-charts.svg",
|
||||
"empty-dashboard.svg",
|
||||
"empty-dataset.svg",
|
||||
"empty-query.svg",
|
||||
"empty-table.svg",
|
||||
"empty.svg",
|
||||
"empty_sql_chart.svg",
|
||||
"filter-results.svg",
|
||||
"filter.svg",
|
||||
"star-circle.svg",
|
||||
"union.svg",
|
||||
"vector.svg"
|
||||
],
|
||||
description: "Predefined image to display."
|
||||
},
|
||||
{
|
||||
name: "buttonText",
|
||||
label: "Button Text",
|
||||
type: "text",
|
||||
description: "Text for optional action button."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<EmptyState
|
||||
size="medium"
|
||||
title="No Results Found"
|
||||
description="Try adjusting your filters or search terms."
|
||||
image="filter.svg"
|
||||
buttonText="Clear Filters"
|
||||
buttonAction={() => alert('Filters cleared!')}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `size` | `string` | `"medium"` | Size of the empty state component. |
|
||||
| `title` | `string` | `"No Data Available"` | Main title text. |
|
||||
| `description` | `string` | `"There is no data to display at this time."` | Description text below the title. |
|
||||
| `image` | `string` | `"empty.svg"` | Predefined image to display. |
|
||||
| `buttonText` | `string` | `""` | Text for optional action button. |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { EmptyState } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/EmptyState/EmptyState.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,96 @@
|
||||
---
|
||||
title: FaveStar
|
||||
sidebar_label: FaveStar
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# FaveStar
|
||||
|
||||
FaveStar component for marking items as favorites
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="FaveStar"
|
||||
props={{
|
||||
itemId: 1,
|
||||
isStarred: false,
|
||||
showTooltip: true
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "itemId",
|
||||
label: "Item ID",
|
||||
type: "number",
|
||||
description: "Unique identifier for the item"
|
||||
},
|
||||
{
|
||||
name: "isStarred",
|
||||
label: "Is Starred",
|
||||
type: "boolean",
|
||||
description: "Whether the item is currently starred."
|
||||
},
|
||||
{
|
||||
name: "showTooltip",
|
||||
label: "Show Tooltip",
|
||||
type: "boolean",
|
||||
description: "Show tooltip on hover."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<FaveStar
|
||||
itemId={1}
|
||||
showTooltip
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `itemId` | `number` | `1` | Unique identifier for the item |
|
||||
| `isStarred` | `boolean` | `false` | Whether the item is currently starred. |
|
||||
| `showTooltip` | `boolean` | `true` | Show tooltip on hover. |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { FaveStar } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/FaveStar/FaveStar.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,106 @@
|
||||
---
|
||||
title: IconButton
|
||||
sidebar_label: IconButton
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# IconButton
|
||||
|
||||
The IconButton component is a versatile button that allows you to combine an icon with a text label. It is designed for use in situations where you want to display an icon along with some text in a single clickable element.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="IconButton"
|
||||
props={{
|
||||
buttonText: "IconButton",
|
||||
altText: "Icon button alt text",
|
||||
padded: true,
|
||||
icon: "https://superset.apache.org/img/superset-logo-horiz.svg"
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "buttonText",
|
||||
label: "Button Text",
|
||||
type: "text",
|
||||
description: "The text inside the button."
|
||||
},
|
||||
{
|
||||
name: "altText",
|
||||
label: "Alt Text",
|
||||
type: "text",
|
||||
description: "The alt text for the button. If not provided, the button text is used as the alt text by default."
|
||||
},
|
||||
{
|
||||
name: "padded",
|
||||
label: "Padded",
|
||||
type: "boolean",
|
||||
description: "Add padding between icon and button text."
|
||||
},
|
||||
{
|
||||
name: "icon",
|
||||
label: "Icon",
|
||||
type: "text",
|
||||
description: "Icon inside the button (URL or path)."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<IconButton
|
||||
buttonText="IconButton"
|
||||
altText="Icon button alt text"
|
||||
padded
|
||||
icon="https://superset.apache.org/img/superset-logo-horiz.svg"
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `buttonText` | `string` | `"IconButton"` | The text inside the button. |
|
||||
| `altText` | `string` | `"Icon button alt text"` | The alt text for the button. If not provided, the button text is used as the alt text by default. |
|
||||
| `padded` | `boolean` | `true` | Add padding between icon and button text. |
|
||||
| `icon` | `string` | `"https://superset.apache.org/img/superset-logo-horiz.svg"` | Icon inside the button (URL or path). |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { IconButton } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/IconButton/IconButton.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,252 @@
|
||||
---
|
||||
title: Icons
|
||||
sidebar_label: Icons
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# Icons
|
||||
|
||||
Icon library for Apache Superset. Contains over 200 icons based on Ant Design icons with consistent sizing and theming support.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="Icons"
|
||||
renderComponent="Icons.InfoCircleOutlined"
|
||||
props={{
|
||||
iconSize: "xl"
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "iconSize",
|
||||
label: "Icon Size",
|
||||
type: "inline-radio",
|
||||
options: [
|
||||
"s",
|
||||
"m",
|
||||
"l",
|
||||
"xl",
|
||||
"xxl"
|
||||
],
|
||||
description: "Size of the icons: s (12px), m (16px), l (20px), xl (24px), xxl (32px)."
|
||||
},
|
||||
{
|
||||
name: "showNames",
|
||||
label: "Show Names",
|
||||
type: "boolean"
|
||||
},
|
||||
{
|
||||
name: "iconColor",
|
||||
label: "Icon Color",
|
||||
type: "select"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
|
||||
<Icons.InfoCircleOutlined iconSize="xl" />
|
||||
<Icons.CheckCircleOutlined iconSize="xl" />
|
||||
<Icons.WarningOutlined iconSize="xl" />
|
||||
<Icons.CloseCircleOutlined iconSize="xl" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Icon Sizes
|
||||
|
||||
```tsx live
|
||||
function IconSizes() {
|
||||
const sizes = ['s', 'm', 'l', 'xl', 'xxl'];
|
||||
return (
|
||||
<div style={{ display: 'flex', gap: 24, alignItems: 'end' }}>
|
||||
{sizes.map(size => (
|
||||
<div key={size} style={{ textAlign: 'center' }}>
|
||||
<Icons.DatabaseOutlined iconSize={size} />
|
||||
<div style={{ fontSize: 12, marginTop: 8, color: '#666' }}>{size}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Icon Gallery
|
||||
|
||||
```tsx live
|
||||
function IconGallery() {
|
||||
const Section = ({ title, children }) => (
|
||||
<div style={{ marginBottom: 24 }}>
|
||||
<div style={{ fontWeight: 600, marginBottom: 8, color: '#666' }}>{title}</div>
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 16 }}>{children}</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
<Section title="Charts">
|
||||
<Icons.LineChartOutlined iconSize="xl" />
|
||||
<Icons.BarChartOutlined iconSize="xl" />
|
||||
<Icons.PieChartOutlined iconSize="xl" />
|
||||
<Icons.AreaChartOutlined iconSize="xl" />
|
||||
<Icons.DashboardOutlined iconSize="xl" />
|
||||
<Icons.FundProjectionScreenOutlined iconSize="xl" />
|
||||
</Section>
|
||||
<Section title="Data">
|
||||
<Icons.DatabaseOutlined iconSize="xl" />
|
||||
<Icons.TableOutlined iconSize="xl" />
|
||||
<Icons.ConsoleSqlOutlined iconSize="xl" />
|
||||
<Icons.FilterOutlined iconSize="xl" />
|
||||
<Icons.FieldNumberOutlined iconSize="xl" />
|
||||
<Icons.FieldTimeOutlined iconSize="xl" />
|
||||
<Icons.FunctionOutlined iconSize="xl" />
|
||||
<Icons.CalculatorOutlined iconSize="xl" />
|
||||
</Section>
|
||||
<Section title="Actions">
|
||||
<Icons.PlusOutlined iconSize="xl" />
|
||||
<Icons.EditOutlined iconSize="xl" />
|
||||
<Icons.DeleteOutlined iconSize="xl" />
|
||||
<Icons.CopyOutlined iconSize="xl" />
|
||||
<Icons.SaveOutlined iconSize="xl" />
|
||||
<Icons.DownloadOutlined iconSize="xl" />
|
||||
<Icons.UploadOutlined iconSize="xl" />
|
||||
<Icons.ReloadOutlined iconSize="xl" />
|
||||
<Icons.SyncOutlined iconSize="xl" />
|
||||
<Icons.SearchOutlined iconSize="xl" />
|
||||
<Icons.ExpandOutlined iconSize="xl" />
|
||||
<Icons.FullscreenOutlined iconSize="xl" />
|
||||
<Icons.ShareAltOutlined iconSize="xl" />
|
||||
<Icons.ExportOutlined iconSize="xl" />
|
||||
</Section>
|
||||
<Section title="Status">
|
||||
<Icons.CheckOutlined iconSize="xl" />
|
||||
<Icons.CheckCircleOutlined iconSize="xl" />
|
||||
<Icons.CloseOutlined iconSize="xl" />
|
||||
<Icons.CloseCircleOutlined iconSize="xl" />
|
||||
<Icons.InfoCircleOutlined iconSize="xl" />
|
||||
<Icons.WarningOutlined iconSize="xl" />
|
||||
<Icons.ExclamationCircleOutlined iconSize="xl" />
|
||||
<Icons.QuestionCircleOutlined iconSize="xl" />
|
||||
<Icons.LoadingOutlined iconSize="xl" />
|
||||
<Icons.StopOutlined iconSize="xl" />
|
||||
</Section>
|
||||
<Section title="Navigation">
|
||||
<Icons.MenuOutlined iconSize="xl" />
|
||||
<Icons.DownOutlined iconSize="xl" />
|
||||
<Icons.UpOutlined iconSize="xl" />
|
||||
<Icons.RightOutlined iconSize="xl" />
|
||||
<Icons.CaretDownOutlined iconSize="xl" />
|
||||
<Icons.CaretUpOutlined iconSize="xl" />
|
||||
<Icons.ArrowRightOutlined iconSize="xl" />
|
||||
<Icons.MoreOutlined iconSize="xl" />
|
||||
<Icons.EllipsisOutlined iconSize="xl" />
|
||||
</Section>
|
||||
<Section title="Objects">
|
||||
<Icons.FileOutlined iconSize="xl" />
|
||||
<Icons.FileTextOutlined iconSize="xl" />
|
||||
<Icons.FileImageOutlined iconSize="xl" />
|
||||
<Icons.BookOutlined iconSize="xl" />
|
||||
<Icons.TagOutlined iconSize="xl" />
|
||||
<Icons.TagsOutlined iconSize="xl" />
|
||||
<Icons.StarOutlined iconSize="xl" />
|
||||
<Icons.BellOutlined iconSize="xl" />
|
||||
<Icons.CalendarOutlined iconSize="xl" />
|
||||
<Icons.ClockCircleOutlined iconSize="xl" />
|
||||
<Icons.MailOutlined iconSize="xl" />
|
||||
<Icons.LinkOutlined iconSize="xl" />
|
||||
<Icons.LockOutlined iconSize="xl" />
|
||||
<Icons.UnlockOutlined iconSize="xl" />
|
||||
<Icons.KeyOutlined iconSize="xl" />
|
||||
</Section>
|
||||
<Section title="Users">
|
||||
<Icons.UserOutlined iconSize="xl" />
|
||||
<Icons.UserAddOutlined iconSize="xl" />
|
||||
<Icons.UsergroupAddOutlined iconSize="xl" />
|
||||
<Icons.LoginOutlined iconSize="xl" />
|
||||
</Section>
|
||||
<Section title="Settings">
|
||||
<Icons.SettingOutlined iconSize="xl" />
|
||||
<Icons.BgColorsOutlined iconSize="xl" />
|
||||
<Icons.FormatPainterOutlined iconSize="xl" />
|
||||
<Icons.HighlightOutlined iconSize="xl" />
|
||||
<Icons.EyeOutlined iconSize="xl" />
|
||||
<Icons.EyeInvisibleOutlined iconSize="xl" />
|
||||
<Icons.SunOutlined iconSize="xl" />
|
||||
<Icons.MoonOutlined iconSize="xl" />
|
||||
</Section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Icon with Text
|
||||
|
||||
```tsx live
|
||||
function IconWithText() {
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<Icons.CheckCircleOutlined iconSize="l" style={{ color: '#52c41a' }} />
|
||||
<span>Success message</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<Icons.InfoCircleOutlined iconSize="l" style={{ color: '#1890ff' }} />
|
||||
<span>Information message</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<Icons.WarningOutlined iconSize="l" style={{ color: '#faad14' }} />
|
||||
<span>Warning message</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<Icons.CloseCircleOutlined iconSize="l" style={{ color: '#ff4d4f' }} />
|
||||
<span>Error message</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `iconSize` | `string` | `"xl"` | Size of the icons: s (12px), m (16px), l (20px), xl (24px), xxl (32px). |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { Icons } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Icons/Icons.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,100 @@
|
||||
---
|
||||
title: IconTooltip
|
||||
sidebar_label: IconTooltip
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# IconTooltip
|
||||
|
||||
The IconTooltip component from Superset's UI library.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="IconTooltip"
|
||||
props={{
|
||||
tooltip: "Tooltip"
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "tooltip",
|
||||
label: "Tooltip",
|
||||
type: "text",
|
||||
description: "Text content to display in the tooltip."
|
||||
},
|
||||
{
|
||||
name: "placement",
|
||||
label: "Placement",
|
||||
type: "select",
|
||||
options: [
|
||||
"bottom",
|
||||
"bottomLeft",
|
||||
"bottomRight",
|
||||
"left",
|
||||
"leftBottom",
|
||||
"leftTop",
|
||||
"right",
|
||||
"rightBottom",
|
||||
"rightTop",
|
||||
"top",
|
||||
"topLeft",
|
||||
"topRight"
|
||||
],
|
||||
description: "Position of the tooltip relative to the icon."
|
||||
}
|
||||
]}
|
||||
sampleChildren={[{"component":"Icons.InfoCircleOutlined","props":{"iconSize":"l"}}]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<IconTooltip tooltip="Helpful information">
|
||||
<Icons.InfoCircleOutlined iconSize="l" />
|
||||
</IconTooltip>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `tooltip` | `string` | `"Tooltip"` | Text content to display in the tooltip. |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { IconTooltip } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/IconTooltip/IconTooltip.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
title: Core Components
|
||||
sidebar_label: Core Components
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
# Core Components
|
||||
|
||||
46 components available in this category.
|
||||
|
||||
## Components
|
||||
|
||||
- [AutoComplete](./autocomplete.mdx)
|
||||
- [Avatar](./avatar.mdx)
|
||||
- [Badge](./badge.mdx)
|
||||
- [Breadcrumb](./breadcrumb.mdx)
|
||||
- [Button](./button.mdx)
|
||||
- [ButtonGroup](./buttongroup.mdx)
|
||||
- [CachedLabel](./cachedlabel.mdx)
|
||||
- [Card](./card.mdx)
|
||||
- [Checkbox](./checkbox.mdx)
|
||||
- [Collapse](./collapse.mdx)
|
||||
- [DatePicker](./datepicker.mdx)
|
||||
- [Divider](./divider.mdx)
|
||||
- [EditableTitle](./editabletitle.mdx)
|
||||
- [EmptyState](./emptystate.mdx)
|
||||
- [FaveStar](./favestar.mdx)
|
||||
- [IconButton](./iconbutton.mdx)
|
||||
- [Icons](./icons.mdx)
|
||||
- [IconTooltip](./icontooltip.mdx)
|
||||
- [InfoTooltip](./infotooltip.mdx)
|
||||
- [Input](./input.mdx)
|
||||
- [Label](./label.mdx)
|
||||
- [List](./list.mdx)
|
||||
- [ListViewCard](./listviewcard.mdx)
|
||||
- [Loading](./loading.mdx)
|
||||
- [Menu](./menu.mdx)
|
||||
- [Modal](./modal.mdx)
|
||||
- [ModalTrigger](./modaltrigger.mdx)
|
||||
- [Popover](./popover.mdx)
|
||||
- [ProgressBar](./progressbar.mdx)
|
||||
- [Radio](./radio.mdx)
|
||||
- [SafeMarkdown](./safemarkdown.mdx)
|
||||
- [Select](./select.mdx)
|
||||
- [Skeleton](./skeleton.mdx)
|
||||
- [Slider](./slider.mdx)
|
||||
- [Steps](./steps.mdx)
|
||||
- [Switch](./switch.mdx)
|
||||
- [TableCollection](./tablecollection.mdx)
|
||||
- [TableView](./tableview.mdx)
|
||||
- [Tabs](./tabs.mdx)
|
||||
- [Timer](./timer.mdx)
|
||||
- [Tooltip](./tooltip.mdx)
|
||||
- [Tree](./tree.mdx)
|
||||
- [TreeSelect](./treeselect.mdx)
|
||||
- [Typography](./typography.mdx)
|
||||
- [UnsavedChangesModal](./unsavedchangesmodal.mdx)
|
||||
- [Upload](./upload.mdx)
|
||||
@@ -0,0 +1,106 @@
|
||||
---
|
||||
title: InfoTooltip
|
||||
sidebar_label: InfoTooltip
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# InfoTooltip
|
||||
|
||||
The InfoTooltip component from Superset's UI library.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="InfoTooltip"
|
||||
props={{
|
||||
tooltip: "This is the text that will display!"
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "tooltip",
|
||||
label: "Tooltip",
|
||||
type: "text"
|
||||
},
|
||||
{
|
||||
name: "placement",
|
||||
label: "Placement",
|
||||
type: "select",
|
||||
options: [
|
||||
"bottom",
|
||||
"left",
|
||||
"right",
|
||||
"top",
|
||||
"topLeft",
|
||||
"topRight",
|
||||
"bottomLeft",
|
||||
"bottomRight",
|
||||
"leftTop",
|
||||
"leftBottom",
|
||||
"rightTop",
|
||||
"rightBottom"
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "trigger",
|
||||
label: "Trigger",
|
||||
type: "select",
|
||||
options: [
|
||||
"hover",
|
||||
"click"
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<InfoTooltip
|
||||
tooltip="This is the text that will display!"
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `tooltip` | `string` | `"This is the text that will display!"` | - |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { InfoTooltip } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/InfoTooltip/InfoTooltip.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,162 @@
|
||||
---
|
||||
title: Input
|
||||
sidebar_label: Input
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# Input
|
||||
|
||||
The Input component from Superset's UI library.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="Input"
|
||||
props={{
|
||||
allowClear: false,
|
||||
disabled: false,
|
||||
showCount: false,
|
||||
type: "text",
|
||||
variant: "outlined"
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "allowClear",
|
||||
label: "Allow Clear",
|
||||
type: "boolean"
|
||||
},
|
||||
{
|
||||
name: "disabled",
|
||||
label: "Disabled",
|
||||
type: "boolean"
|
||||
},
|
||||
{
|
||||
name: "showCount",
|
||||
label: "Show Count",
|
||||
type: "boolean"
|
||||
},
|
||||
{
|
||||
name: "type",
|
||||
label: "Type",
|
||||
type: "select",
|
||||
options: [
|
||||
"text",
|
||||
"password",
|
||||
"email",
|
||||
"number",
|
||||
"tel",
|
||||
"url",
|
||||
"search"
|
||||
],
|
||||
description: "HTML input type"
|
||||
},
|
||||
{
|
||||
name: "variant",
|
||||
label: "Variant",
|
||||
type: "select",
|
||||
options: [
|
||||
"outlined",
|
||||
"borderless",
|
||||
"filled"
|
||||
],
|
||||
description: "Input style variant"
|
||||
},
|
||||
{
|
||||
name: "defaultValue",
|
||||
label: "Default Value",
|
||||
type: "text",
|
||||
description: "Default input value"
|
||||
},
|
||||
{
|
||||
name: "id",
|
||||
label: "ID",
|
||||
type: "text",
|
||||
description: "HTML id attribute"
|
||||
},
|
||||
{
|
||||
name: "maxLength",
|
||||
label: "Max Length",
|
||||
type: "number",
|
||||
description: "Maximum length of input"
|
||||
},
|
||||
{
|
||||
name: "status",
|
||||
label: "Status",
|
||||
type: "select",
|
||||
options: [
|
||||
"error",
|
||||
"warning"
|
||||
],
|
||||
description: "Validation status"
|
||||
},
|
||||
{
|
||||
name: "size",
|
||||
label: "Size",
|
||||
type: "select",
|
||||
options: [
|
||||
"large",
|
||||
"middle",
|
||||
"small"
|
||||
],
|
||||
description: "Size of the input"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<Input
|
||||
type="text"
|
||||
variant="outlined"
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `allowClear` | `boolean` | `false` | - |
|
||||
| `disabled` | `boolean` | `false` | - |
|
||||
| `showCount` | `boolean` | `false` | - |
|
||||
| `type` | `string` | `"text"` | HTML input type |
|
||||
| `variant` | `string` | `"outlined"` | Input style variant |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { Input } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Input/Input.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,105 @@
|
||||
---
|
||||
title: Label
|
||||
sidebar_label: Label
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# Label
|
||||
|
||||
The Label component from Superset's UI library.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="Label"
|
||||
props={{
|
||||
type: "default",
|
||||
children: "Label text",
|
||||
monospace: false
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "type",
|
||||
label: "Type",
|
||||
type: "select",
|
||||
options: [
|
||||
"default",
|
||||
"info",
|
||||
"success",
|
||||
"warning",
|
||||
"error",
|
||||
"primary"
|
||||
],
|
||||
description: "The visual style of the label."
|
||||
},
|
||||
{
|
||||
name: "children",
|
||||
label: "Children",
|
||||
type: "text",
|
||||
description: "The label text content."
|
||||
},
|
||||
{
|
||||
name: "monospace",
|
||||
label: "Monospace",
|
||||
type: "boolean",
|
||||
description: "Use monospace font."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<Label
|
||||
type="default"
|
||||
>
|
||||
Label text
|
||||
</Label>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `type` | `string` | `"default"` | The visual style of the label. |
|
||||
| `children` | `string` | `"Label text"` | The label text content. |
|
||||
| `monospace` | `boolean` | `false` | Use monospace font. |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { Label } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Label/Label.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,117 @@
|
||||
---
|
||||
title: List
|
||||
sidebar_label: List
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# List
|
||||
|
||||
The List component from Superset's UI library.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="List"
|
||||
props={{
|
||||
bordered: false,
|
||||
split: true,
|
||||
size: "default",
|
||||
loading: false,
|
||||
dataSource: [
|
||||
"Dashboard Analytics",
|
||||
"User Management",
|
||||
"Data Sources"
|
||||
]
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "bordered",
|
||||
label: "Bordered",
|
||||
type: "boolean",
|
||||
description: "Whether to show a border around the list."
|
||||
},
|
||||
{
|
||||
name: "split",
|
||||
label: "Split",
|
||||
type: "boolean",
|
||||
description: "Whether to show a divider between items."
|
||||
},
|
||||
{
|
||||
name: "size",
|
||||
label: "Size",
|
||||
type: "select",
|
||||
options: [
|
||||
"default",
|
||||
"small",
|
||||
"large"
|
||||
],
|
||||
description: "Size of the list."
|
||||
},
|
||||
{
|
||||
name: "loading",
|
||||
label: "Loading",
|
||||
type: "boolean",
|
||||
description: "Whether to show a loading indicator."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
const data = ['Dashboard Analytics', 'User Management', 'Data Sources'];
|
||||
return (
|
||||
<List
|
||||
bordered
|
||||
dataSource={data}
|
||||
renderItem={(item) => <List.Item>{item}</List.Item>}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `bordered` | `boolean` | `false` | Whether to show a border around the list. |
|
||||
| `split` | `boolean` | `true` | Whether to show a divider between items. |
|
||||
| `size` | `string` | `"default"` | Size of the list. |
|
||||
| `loading` | `boolean` | `false` | Whether to show a loading indicator. |
|
||||
| `dataSource` | `any` | `["Dashboard Analytics","User Management","Data Sources"]` | - |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { List } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/List/List.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,132 @@
|
||||
---
|
||||
title: ListViewCard
|
||||
sidebar_label: ListViewCard
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# ListViewCard
|
||||
|
||||
ListViewCard is a card component used to display items in list views with an image, title, description, and optional cover sections.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="ListViewCard"
|
||||
props={{
|
||||
title: "Superset Card Title",
|
||||
loading: false,
|
||||
url: "/superset/dashboard/births/",
|
||||
imgURL: "https://picsum.photos/seed/superset/300/200",
|
||||
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
|
||||
coverLeft: "Left Section",
|
||||
coverRight: "Right Section"
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "title",
|
||||
label: "Title",
|
||||
type: "text",
|
||||
description: "Title displayed on the card."
|
||||
},
|
||||
{
|
||||
name: "loading",
|
||||
label: "Loading",
|
||||
type: "boolean",
|
||||
description: "Whether the card is in loading state."
|
||||
},
|
||||
{
|
||||
name: "url",
|
||||
label: "URL",
|
||||
type: "text",
|
||||
description: "URL the card links to."
|
||||
},
|
||||
{
|
||||
name: "imgURL",
|
||||
label: "Image URL",
|
||||
type: "text",
|
||||
description: "Primary image URL for the card."
|
||||
},
|
||||
{
|
||||
name: "description",
|
||||
label: "Description",
|
||||
type: "text",
|
||||
description: "Description text displayed on the card."
|
||||
},
|
||||
{
|
||||
name: "coverLeft",
|
||||
label: "Cover Left",
|
||||
type: "text",
|
||||
description: "Content for the left section of the cover."
|
||||
},
|
||||
{
|
||||
name: "coverRight",
|
||||
label: "Cover Right",
|
||||
type: "text",
|
||||
description: "Content for the right section of the cover."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<ListViewCard
|
||||
title="Superset Card Title"
|
||||
url="/superset/dashboard/births/"
|
||||
imgURL="https://picsum.photos/seed/superset/300/200"
|
||||
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit..."
|
||||
coverLeft="Left Section"
|
||||
coverRight="Right Section"
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `title` | `string` | `"Superset Card Title"` | Title displayed on the card. |
|
||||
| `loading` | `boolean` | `false` | Whether the card is in loading state. |
|
||||
| `url` | `string` | `"/superset/dashboard/births/"` | URL the card links to. |
|
||||
| `imgURL` | `string` | `"https://picsum.photos/seed/superset/300/200"` | Primary image URL for the card. |
|
||||
| `description` | `string` | `"Lorem ipsum dolor sit amet, consectetur adipiscing elit..."` | Description text displayed on the card. |
|
||||
| `coverLeft` | `string` | `"Left Section"` | Content for the left section of the cover. |
|
||||
| `coverRight` | `string` | `"Right Section"` | Content for the right section of the cover. |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { ListViewCard } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/ListViewCard/ListViewCard.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,187 @@
|
||||
---
|
||||
title: Loading
|
||||
sidebar_label: Loading
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# Loading
|
||||
|
||||
The Loading component from Superset's UI library.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="Loading"
|
||||
props={{
|
||||
size: "m",
|
||||
position: "normal",
|
||||
muted: false
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "size",
|
||||
label: "Size",
|
||||
type: "select",
|
||||
options: [
|
||||
"s",
|
||||
"m",
|
||||
"l"
|
||||
],
|
||||
description: "Size of the spinner: s (40px), m (70px), or l (100px)."
|
||||
},
|
||||
{
|
||||
name: "position",
|
||||
label: "Position",
|
||||
type: "select",
|
||||
options: [
|
||||
"normal",
|
||||
"floating",
|
||||
"inline"
|
||||
],
|
||||
description: "Position style: normal (inline flow), floating (overlay), or inline."
|
||||
},
|
||||
{
|
||||
name: "muted",
|
||||
label: "Muted",
|
||||
type: "boolean",
|
||||
description: "Whether to show a muted/subtle version of the spinner."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<div>
|
||||
{['normal', 'floating', 'inline'].map(position => (
|
||||
<div
|
||||
key={position}
|
||||
style={{
|
||||
marginBottom: 40,
|
||||
padding: 20,
|
||||
border: '1px solid #eee',
|
||||
position: 'relative',
|
||||
minHeight: 80,
|
||||
}}
|
||||
>
|
||||
<h4 style={{ marginTop: 0 }}>{position}</h4>
|
||||
<Loading position={position} size="m" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Size and Opacity Showcase
|
||||
|
||||
```tsx live
|
||||
function SizeShowcase() {
|
||||
const sizes = ['s', 'm', 'l'];
|
||||
return (
|
||||
<div style={{ padding: 20 }}>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20, alignItems: 'center' }}>
|
||||
<div><strong>Size</strong></div>
|
||||
<div><strong>Normal</strong></div>
|
||||
<div><strong>Muted</strong></div>
|
||||
<div><strong>Usage</strong></div>
|
||||
{sizes.map(size => (
|
||||
<React.Fragment key={size}>
|
||||
<div style={{ fontWeight: 'bold' }}>
|
||||
{size.toUpperCase()} ({size === 's' ? '40px' : size === 'm' ? '70px' : '100px'})
|
||||
</div>
|
||||
<div style={{ textAlign: 'center', padding: 10, border: '1px solid #eee' }}>
|
||||
<Loading size={size} position="normal" />
|
||||
</div>
|
||||
<div style={{ textAlign: 'center', padding: 10, border: '1px solid #eee' }}>
|
||||
<Loading size={size} muted position="normal" />
|
||||
</div>
|
||||
<div style={{ fontSize: 12, color: '#666' }}>
|
||||
{size === 's' && 'Filter bars, inline'}
|
||||
{size === 'm' && 'Explore pages'}
|
||||
{size === 'l' && 'Full page loading'}
|
||||
</div>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Contextual Examples
|
||||
|
||||
```tsx live
|
||||
function ContextualDemo() {
|
||||
return (
|
||||
<div style={{ padding: 20 }}>
|
||||
<h4>Filter Bar (size="s", muted)</h4>
|
||||
<div style={{ height: 40, backgroundColor: '#f5f5f5', display: 'flex', alignItems: 'center', padding: '0 10px', gap: 10, marginBottom: 30 }}>
|
||||
<span>Filter 1:</span>
|
||||
<Loading size="s" muted position="normal" />
|
||||
<span>Filter 2:</span>
|
||||
<Loading size="s" muted position="normal" />
|
||||
</div>
|
||||
|
||||
<h4>Dashboard Grid (size="s", muted)</h4>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 30 }}>
|
||||
{[1, 2, 3].map(i => (
|
||||
<div key={i} style={{ height: 100, backgroundColor: '#fafafa', border: '1px solid #ddd', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<Loading size="s" muted position="normal" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<h4>Main Loading (size="l")</h4>
|
||||
<div style={{ height: 200, display: 'flex', alignItems: 'center', justifyContent: 'center', border: '2px dashed #ccc' }}>
|
||||
<Loading size="l" position="normal" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `size` | `string` | `"m"` | Size of the spinner: s (40px), m (70px), or l (100px). |
|
||||
| `position` | `string` | `"normal"` | Position style: normal (inline flow), floating (overlay), or inline. |
|
||||
| `muted` | `boolean` | `false` | Whether to show a muted/subtle version of the spinner. |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { Loading } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Loading/Loading.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,174 @@
|
||||
---
|
||||
title: Menu
|
||||
sidebar_label: Menu
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# Menu
|
||||
|
||||
Navigation menu component supporting horizontal, vertical, and inline modes. Based on Ant Design Menu with Superset styling.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="Menu"
|
||||
props={{
|
||||
mode: "horizontal",
|
||||
selectable: true,
|
||||
items: [
|
||||
{
|
||||
label: "Dashboards",
|
||||
key: "dashboards"
|
||||
},
|
||||
{
|
||||
label: "Charts",
|
||||
key: "charts"
|
||||
},
|
||||
{
|
||||
label: "Datasets",
|
||||
key: "datasets"
|
||||
},
|
||||
{
|
||||
label: "SQL Lab",
|
||||
key: "sqllab"
|
||||
}
|
||||
]
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "mode",
|
||||
label: "Mode",
|
||||
type: "select",
|
||||
options: [
|
||||
"horizontal",
|
||||
"vertical",
|
||||
"inline"
|
||||
],
|
||||
description: "Menu display mode: horizontal navbar, vertical sidebar, or inline collapsible."
|
||||
},
|
||||
{
|
||||
name: "selectable",
|
||||
label: "Selectable",
|
||||
type: "boolean",
|
||||
description: "Whether menu items can be selected."
|
||||
},
|
||||
{
|
||||
name: "multiple",
|
||||
label: "Multiple",
|
||||
type: "boolean",
|
||||
description: "Allow multiple items to be selected."
|
||||
},
|
||||
{
|
||||
name: "inlineCollapsed",
|
||||
label: "Inline Collapsed",
|
||||
type: "boolean",
|
||||
description: "Whether the inline menu is collapsed (only applies to inline mode)."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<Menu
|
||||
mode="horizontal"
|
||||
selectable
|
||||
items={[
|
||||
{ label: 'Dashboards', key: 'dashboards' },
|
||||
{ label: 'Charts', key: 'charts' },
|
||||
{ label: 'Datasets', key: 'datasets' },
|
||||
{ label: 'SQL Lab', key: 'sqllab' },
|
||||
]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Vertical Menu
|
||||
|
||||
```tsx live
|
||||
function VerticalMenu() {
|
||||
return (
|
||||
<Menu
|
||||
mode="vertical"
|
||||
style={{ width: 200 }}
|
||||
items={[
|
||||
{ label: 'Dashboards', key: 'dashboards' },
|
||||
{ label: 'Charts', key: 'charts' },
|
||||
{ label: 'Datasets', key: 'datasets' },
|
||||
{
|
||||
label: 'Settings',
|
||||
key: 'settings',
|
||||
children: [
|
||||
{ label: 'Profile', key: 'profile' },
|
||||
{ label: 'Preferences', key: 'preferences' },
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Menu with Icons
|
||||
|
||||
```tsx live
|
||||
function MenuWithIcons() {
|
||||
return (
|
||||
<Menu
|
||||
mode="horizontal"
|
||||
items={[
|
||||
{ label: <><Icons.DashboardOutlined /> Dashboards</>, key: 'dashboards' },
|
||||
{ label: <><Icons.LineChartOutlined /> Charts</>, key: 'charts' },
|
||||
{ label: <><Icons.DatabaseOutlined /> Datasets</>, key: 'datasets' },
|
||||
{ label: <><Icons.ConsoleSqlOutlined /> SQL Lab</>, key: 'sqllab' },
|
||||
]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `mode` | `string` | `"horizontal"` | Menu display mode: horizontal navbar, vertical sidebar, or inline collapsible. |
|
||||
| `selectable` | `boolean` | `true` | Whether menu items can be selected. |
|
||||
| `items` | `any` | `[{"label":"Dashboards","key":"dashboards"},{"label":"Charts","key":"charts"},{"label":"Datasets","key":"datasets"},{"label":"SQL Lab","key":"sqllab"}]` | - |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { Menu } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Menu/Menu.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,207 @@
|
||||
---
|
||||
title: Modal
|
||||
sidebar_label: Modal
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# Modal
|
||||
|
||||
Modal dialog component for displaying content that requires user attention or interaction. Supports customizable buttons, drag/resize, and confirmation dialogs.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="Modal"
|
||||
props={{
|
||||
disablePrimaryButton: false,
|
||||
primaryButtonName: "Submit",
|
||||
primaryButtonStyle: "primary",
|
||||
show: false,
|
||||
title: "I'm a modal!",
|
||||
resizable: false,
|
||||
draggable: false,
|
||||
width: 500
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "disablePrimaryButton",
|
||||
label: "Disable Primary Button",
|
||||
type: "boolean",
|
||||
description: "Whether the primary button is disabled."
|
||||
},
|
||||
{
|
||||
name: "primaryButtonName",
|
||||
label: "Primary Button Name",
|
||||
type: "text",
|
||||
description: "Text for the primary action button."
|
||||
},
|
||||
{
|
||||
name: "primaryButtonStyle",
|
||||
label: "Primary Button Style",
|
||||
type: "select",
|
||||
options: [
|
||||
"primary",
|
||||
"secondary",
|
||||
"dashed",
|
||||
"danger",
|
||||
"link"
|
||||
],
|
||||
description: "The style of the primary action button."
|
||||
},
|
||||
{
|
||||
name: "show",
|
||||
label: "Show",
|
||||
type: "boolean",
|
||||
description: "Whether the modal is visible. Use the \"Try It\" example below for a working demo."
|
||||
},
|
||||
{
|
||||
name: "title",
|
||||
label: "Title",
|
||||
type: "text",
|
||||
description: "Title displayed in the modal header."
|
||||
},
|
||||
{
|
||||
name: "resizable",
|
||||
label: "Resizable",
|
||||
type: "boolean",
|
||||
description: "Whether the modal can be resized by dragging corners."
|
||||
},
|
||||
{
|
||||
name: "draggable",
|
||||
label: "Draggable",
|
||||
type: "boolean",
|
||||
description: "Whether the modal can be dragged by its header."
|
||||
},
|
||||
{
|
||||
name: "width",
|
||||
label: "Width",
|
||||
type: "number",
|
||||
description: "Width of the modal in pixels."
|
||||
}
|
||||
]}
|
||||
triggerProp="show"
|
||||
onHideProp="onHide"
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function ModalDemo() {
|
||||
const [isOpen, setIsOpen] = React.useState(false);
|
||||
return (
|
||||
<>
|
||||
<Button onClick={() => setIsOpen(true)}>Open Modal</Button>
|
||||
<Modal
|
||||
show={isOpen}
|
||||
onHide={() => setIsOpen(false)}
|
||||
title="Example Modal"
|
||||
primaryButtonName="Submit"
|
||||
onHandledPrimaryAction={() => {
|
||||
alert('Submitted!');
|
||||
setIsOpen(false);
|
||||
}}
|
||||
>
|
||||
<p>This is the modal content. Click Submit or close the modal.</p>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Danger Modal
|
||||
|
||||
```tsx live
|
||||
function DangerModal() {
|
||||
const [isOpen, setIsOpen] = React.useState(false);
|
||||
return (
|
||||
<>
|
||||
<Button buttonStyle="danger" onClick={() => setIsOpen(true)}>Delete Item</Button>
|
||||
<Modal
|
||||
show={isOpen}
|
||||
onHide={() => setIsOpen(false)}
|
||||
title="Confirm Delete"
|
||||
primaryButtonName="Delete"
|
||||
primaryButtonStyle="danger"
|
||||
onHandledPrimaryAction={() => {
|
||||
alert('Deleted!');
|
||||
setIsOpen(false);
|
||||
}}
|
||||
>
|
||||
<p>Are you sure you want to delete this item? This action cannot be undone.</p>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Confirmation Dialogs
|
||||
|
||||
```tsx live
|
||||
function ConfirmationDialogs() {
|
||||
return (
|
||||
<div style={{ display: 'flex', gap: 8 }}>
|
||||
<Button onClick={() => Modal.confirm({
|
||||
title: 'Confirm Action',
|
||||
content: 'Are you sure you want to proceed?',
|
||||
okText: 'Yes',
|
||||
})}>Confirm</Button>
|
||||
<Button onClick={() => Modal.warning({
|
||||
title: 'Warning',
|
||||
content: 'This action may have consequences.',
|
||||
})}>Warning</Button>
|
||||
<Button onClick={() => Modal.error({
|
||||
title: 'Error',
|
||||
content: 'Something went wrong.',
|
||||
})}>Error</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `disablePrimaryButton` | `boolean` | `false` | Whether the primary button is disabled. |
|
||||
| `primaryButtonName` | `string` | `"Submit"` | Text for the primary action button. |
|
||||
| `primaryButtonStyle` | `string` | `"primary"` | The style of the primary action button. |
|
||||
| `show` | `boolean` | `false` | Whether the modal is visible. Use the "Try It" example below for a working demo. |
|
||||
| `title` | `string` | `"I'm a modal!"` | Title displayed in the modal header. |
|
||||
| `resizable` | `boolean` | `false` | Whether the modal can be resized by dragging corners. |
|
||||
| `draggable` | `boolean` | `false` | Whether the modal can be dragged by its header. |
|
||||
| `width` | `number` | `500` | Width of the modal in pixels. |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { Modal } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Modal/Modal.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,192 @@
|
||||
---
|
||||
title: ModalTrigger
|
||||
sidebar_label: ModalTrigger
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# ModalTrigger
|
||||
|
||||
A component that renders a trigger element which opens a modal when clicked. Useful for actions that need confirmation or additional input.
|
||||
|
||||
## Live Example
|
||||
|
||||
<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"
|
||||
}}
|
||||
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."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<ModalTrigger
|
||||
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>}
|
||||
width="500px"
|
||||
responsive
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## With Custom Trigger
|
||||
|
||||
```tsx live
|
||||
function CustomTrigger() {
|
||||
return (
|
||||
<ModalTrigger
|
||||
triggerNode={
|
||||
<Button buttonStyle="primary">
|
||||
<Icons.PlusOutlined /> Add New Item
|
||||
</Button>
|
||||
}
|
||||
modalTitle="Add New Item"
|
||||
modalBody={
|
||||
<div>
|
||||
<p>Fill out the form to add a new item.</p>
|
||||
<Input placeholder="Item name" />
|
||||
</div>
|
||||
}
|
||||
width="400px"
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Draggable & Resizable
|
||||
|
||||
```tsx live
|
||||
function DraggableModal() {
|
||||
return (
|
||||
<ModalTrigger
|
||||
isButton
|
||||
triggerNode={<span>Open Draggable Modal</span>}
|
||||
modalTitle="Draggable & Resizable"
|
||||
modalBody={<p>Try dragging the header or resizing from the corners!</p>}
|
||||
draggable
|
||||
resizable
|
||||
width="500px"
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## 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. |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { ModalTrigger } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/ModalTrigger/ModalTrigger.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,199 @@
|
||||
---
|
||||
title: Popover
|
||||
sidebar_label: Popover
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# Popover
|
||||
|
||||
A floating card that appears when hovering or clicking a trigger element. Supports configurable placement, trigger behavior, and custom content.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="Popover"
|
||||
props={{
|
||||
content: "Popover sample content",
|
||||
title: "Popover title",
|
||||
arrow: true,
|
||||
color: "#fff"
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "content",
|
||||
label: "Content",
|
||||
type: "text",
|
||||
description: "Content displayed inside the popover body."
|
||||
},
|
||||
{
|
||||
name: "title",
|
||||
label: "Title",
|
||||
type: "text",
|
||||
description: "Title displayed in the popover header."
|
||||
},
|
||||
{
|
||||
name: "arrow",
|
||||
label: "Arrow",
|
||||
type: "boolean",
|
||||
description: "Whether to show the popover's arrow pointing to the trigger."
|
||||
},
|
||||
{
|
||||
name: "color",
|
||||
label: "Color",
|
||||
type: "color",
|
||||
description: "The background color of the popover."
|
||||
},
|
||||
{
|
||||
name: "placement",
|
||||
label: "Placement",
|
||||
type: "select",
|
||||
options: [
|
||||
"topLeft",
|
||||
"top",
|
||||
"topRight",
|
||||
"leftTop",
|
||||
"left",
|
||||
"leftBottom",
|
||||
"rightTop",
|
||||
"right",
|
||||
"rightBottom",
|
||||
"bottomLeft",
|
||||
"bottom",
|
||||
"bottomRight"
|
||||
],
|
||||
description: "Position of the popover relative to the trigger element."
|
||||
},
|
||||
{
|
||||
name: "trigger",
|
||||
label: "Trigger",
|
||||
type: "select",
|
||||
options: [
|
||||
"hover",
|
||||
"click",
|
||||
"focus"
|
||||
],
|
||||
description: "Event that triggers the popover to appear."
|
||||
}
|
||||
]}
|
||||
sampleChildren={[{"component":"Button","props":{"children":"Hover me"}}]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<Popover
|
||||
content="Popover sample content"
|
||||
title="Popover title"
|
||||
arrow
|
||||
>
|
||||
<Button>Hover me</Button>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Click Trigger
|
||||
|
||||
```tsx live
|
||||
function ClickPopover() {
|
||||
return (
|
||||
<Popover
|
||||
content="This popover appears on click."
|
||||
title="Click Popover"
|
||||
trigger="click"
|
||||
>
|
||||
<Button>Click me</Button>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Placements
|
||||
|
||||
```tsx live
|
||||
function PlacementsDemo() {
|
||||
return (
|
||||
<div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', justifyContent: 'center', padding: '60px 0' }}>
|
||||
{['top', 'right', 'bottom', 'left'].map(placement => (
|
||||
<Popover
|
||||
key={placement}
|
||||
content={`This popover is placed on the ${placement}`}
|
||||
title={placement}
|
||||
placement={placement}
|
||||
>
|
||||
<Button>{placement}</Button>
|
||||
</Popover>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Rich Content
|
||||
|
||||
```tsx live
|
||||
function RichPopover() {
|
||||
return (
|
||||
<Popover
|
||||
title="Dashboard Info"
|
||||
content={
|
||||
<div>
|
||||
<p><strong>Created by:</strong> Admin</p>
|
||||
<p><strong>Last modified:</strong> Jan 2025</p>
|
||||
<p><strong>Charts:</strong> 12</p>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Button buttonStyle="primary">
|
||||
<Icons.InfoCircleOutlined /> View Details
|
||||
</Button>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `content` | `string` | `"Popover sample content"` | Content displayed inside the popover body. |
|
||||
| `title` | `string` | `"Popover title"` | Title displayed in the popover header. |
|
||||
| `arrow` | `boolean` | `true` | Whether to show the popover's arrow pointing to the trigger. |
|
||||
| `color` | `string` | `"#fff"` | The background color of the popover. |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { Popover } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Popover/Popover.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,206 @@
|
||||
---
|
||||
title: ProgressBar
|
||||
sidebar_label: ProgressBar
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# ProgressBar
|
||||
|
||||
Progress bar component for displaying completion status. Supports line, circle, and dashboard display types.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="ProgressBar"
|
||||
props={{
|
||||
percent: 75,
|
||||
status: "normal",
|
||||
type: "line",
|
||||
striped: false,
|
||||
showInfo: true,
|
||||
strokeLinecap: "round"
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "percent",
|
||||
label: "Percent",
|
||||
type: "number",
|
||||
description: "Completion percentage (0-100)."
|
||||
},
|
||||
{
|
||||
name: "status",
|
||||
label: "Status",
|
||||
type: "select",
|
||||
options: [
|
||||
"normal",
|
||||
"success",
|
||||
"exception",
|
||||
"active"
|
||||
],
|
||||
description: "Current status of the progress bar."
|
||||
},
|
||||
{
|
||||
name: "type",
|
||||
label: "Type",
|
||||
type: "select",
|
||||
options: [
|
||||
"line",
|
||||
"circle",
|
||||
"dashboard"
|
||||
],
|
||||
description: "Display type: line, circle, or dashboard gauge."
|
||||
},
|
||||
{
|
||||
name: "striped",
|
||||
label: "Striped",
|
||||
type: "boolean",
|
||||
description: "Whether to show striped animation on the bar."
|
||||
},
|
||||
{
|
||||
name: "showInfo",
|
||||
label: "Show Info",
|
||||
type: "boolean",
|
||||
description: "Whether to show the percentage text."
|
||||
},
|
||||
{
|
||||
name: "strokeLinecap",
|
||||
label: "Stroke Linecap",
|
||||
type: "select",
|
||||
options: [
|
||||
"round",
|
||||
"butt",
|
||||
"square"
|
||||
],
|
||||
description: "Shape of the progress bar endpoints."
|
||||
},
|
||||
{
|
||||
name: "strokeColor",
|
||||
label: "Stroke Color",
|
||||
type: "color",
|
||||
description: "Color of the progress bar fill."
|
||||
},
|
||||
{
|
||||
name: "trailColor",
|
||||
label: "Trail Color",
|
||||
type: "color",
|
||||
description: "Color of the unfilled portion."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<ProgressBar
|
||||
percent={75}
|
||||
status="normal"
|
||||
type="line"
|
||||
showInfo
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## All Progress Types
|
||||
|
||||
```tsx live
|
||||
function AllTypesDemo() {
|
||||
return (
|
||||
<div style={{ display: 'flex', gap: 40, alignItems: 'center' }}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<h4>Line</h4>
|
||||
<ProgressBar percent={75} type="line" />
|
||||
</div>
|
||||
<div>
|
||||
<h4>Circle</h4>
|
||||
<ProgressBar percent={75} type="circle" />
|
||||
</div>
|
||||
<div>
|
||||
<h4>Dashboard</h4>
|
||||
<ProgressBar percent={75} type="dashboard" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Status Variants
|
||||
|
||||
```tsx live
|
||||
function StatusDemo() {
|
||||
const statuses = ['normal', 'success', 'exception', 'active'];
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||||
{statuses.map(status => (
|
||||
<div key={status} style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
|
||||
<span style={{ width: 80 }}>{status}</span>
|
||||
<ProgressBar percent={75} status={status} type="line" style={{ flex: 1 }} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Custom Colors
|
||||
|
||||
```tsx live
|
||||
function CustomColors() {
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||||
<ProgressBar percent={50} strokeColor="#1890ff" />
|
||||
<ProgressBar percent={70} strokeColor="#52c41a" />
|
||||
<ProgressBar percent={30} strokeColor="#faad14" trailColor="#f0f0f0" />
|
||||
<ProgressBar percent={90} strokeColor="#ff4d4f" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `percent` | `number` | `75` | Completion percentage (0-100). |
|
||||
| `status` | `string` | `"normal"` | Current status of the progress bar. |
|
||||
| `type` | `string` | `"line"` | Display type: line, circle, or dashboard gauge. |
|
||||
| `striped` | `boolean` | `false` | Whether to show striped animation on the bar. |
|
||||
| `showInfo` | `boolean` | `true` | Whether to show the percentage text. |
|
||||
| `strokeLinecap` | `string` | `"round"` | Shape of the progress bar endpoints. |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { ProgressBar } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/ProgressBar/ProgressBar.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,137 @@
|
||||
---
|
||||
title: Radio
|
||||
sidebar_label: Radio
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# Radio
|
||||
|
||||
Radio button component for selecting one option from a set. Supports standalone radio buttons, radio buttons styled as buttons, and grouped radio buttons with layout configuration.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="Radio"
|
||||
props={{
|
||||
value: "radio1",
|
||||
disabled: false,
|
||||
checked: false,
|
||||
children: "Radio"
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "value",
|
||||
label: "Value",
|
||||
type: "text",
|
||||
description: "The value associated with this radio button."
|
||||
},
|
||||
{
|
||||
name: "disabled",
|
||||
label: "Disabled",
|
||||
type: "boolean",
|
||||
description: "Whether the radio button is disabled."
|
||||
},
|
||||
{
|
||||
name: "checked",
|
||||
label: "Checked",
|
||||
type: "boolean",
|
||||
description: "Whether the radio button is checked (controlled mode)."
|
||||
},
|
||||
{
|
||||
name: "children",
|
||||
label: "Children",
|
||||
type: "text",
|
||||
description: "Label text displayed next to the radio button."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<Radio
|
||||
value="radio1"
|
||||
>
|
||||
Radio
|
||||
</Radio>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Radio Button Variants
|
||||
|
||||
```tsx live
|
||||
function RadioButtonDemo() {
|
||||
const [value, setValue] = React.useState('line');
|
||||
return (
|
||||
<Radio.Group value={value} onChange={e => setValue(e.target.value)}>
|
||||
<Radio.Button value="line">Line Chart</Radio.Button>
|
||||
<Radio.Button value="bar">Bar Chart</Radio.Button>
|
||||
<Radio.Button value="pie">Pie Chart</Radio.Button>
|
||||
</Radio.Group>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Vertical Radio Group
|
||||
|
||||
```tsx live
|
||||
function VerticalDemo() {
|
||||
const [value, setValue] = React.useState('option1');
|
||||
return (
|
||||
<Radio.Group value={value} onChange={e => setValue(e.target.value)}>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
<Radio value="option1">First option</Radio>
|
||||
<Radio value="option2">Second option</Radio>
|
||||
<Radio value="option3">Third option</Radio>
|
||||
</div>
|
||||
</Radio.Group>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `value` | `string` | `"radio1"` | The value associated with this radio button. |
|
||||
| `disabled` | `boolean` | `false` | Whether the radio button is disabled. |
|
||||
| `checked` | `boolean` | `false` | Whether the radio button is checked (controlled mode). |
|
||||
| `children` | `string` | `"Radio"` | Label text displayed next to the radio button. |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { Radio } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Radio/Radio.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,85 @@
|
||||
---
|
||||
title: SafeMarkdown
|
||||
sidebar_label: SafeMarkdown
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# SafeMarkdown
|
||||
|
||||
The SafeMarkdown component from Superset's UI library.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="SafeMarkdown"
|
||||
props={{
|
||||
htmlSanitization: true
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "htmlSanitization",
|
||||
label: "Html Sanitization",
|
||||
type: "boolean",
|
||||
description: "Enable HTML sanitization (recommended for user input)"
|
||||
},
|
||||
{
|
||||
name: "source",
|
||||
label: "Source",
|
||||
type: "text",
|
||||
description: "Markdown source string to render"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<SafeMarkdown
|
||||
htmlSanitization
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `htmlSanitization` | `boolean` | `true` | Enable HTML sanitization (recommended for user input) |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { SafeMarkdown } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/SafeMarkdown/SafeMarkdown.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,308 @@
|
||||
---
|
||||
title: Select
|
||||
sidebar_label: Select
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# Select
|
||||
|
||||
A versatile select component supporting single and multi-select modes, search filtering, option creation, and both synchronous and asynchronous data sources.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="Select"
|
||||
props={{
|
||||
mode: "single",
|
||||
placeholder: "Select ...",
|
||||
showSearch: true,
|
||||
allowNewOptions: false,
|
||||
allowClear: false,
|
||||
allowSelectAll: true,
|
||||
disabled: false,
|
||||
invertSelection: false,
|
||||
oneLine: false,
|
||||
maxTagCount: 4,
|
||||
options: [
|
||||
{
|
||||
label: "Such an incredibly awesome long long label",
|
||||
value: "long-label-1"
|
||||
},
|
||||
{
|
||||
label: "Another incredibly awesome long long label",
|
||||
value: "long-label-2"
|
||||
},
|
||||
{
|
||||
label: "Option A",
|
||||
value: "A"
|
||||
},
|
||||
{
|
||||
label: "Option B",
|
||||
value: "B"
|
||||
},
|
||||
{
|
||||
label: "Option C",
|
||||
value: "C"
|
||||
},
|
||||
{
|
||||
label: "Option D",
|
||||
value: "D"
|
||||
},
|
||||
{
|
||||
label: "Option E",
|
||||
value: "E"
|
||||
},
|
||||
{
|
||||
label: "Option F",
|
||||
value: "F"
|
||||
},
|
||||
{
|
||||
label: "Option G",
|
||||
value: "G"
|
||||
},
|
||||
{
|
||||
label: "Option H",
|
||||
value: "H"
|
||||
},
|
||||
{
|
||||
label: "Option I",
|
||||
value: "I"
|
||||
}
|
||||
]
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "mode",
|
||||
label: "Mode",
|
||||
type: "inline-radio",
|
||||
options: [
|
||||
"single",
|
||||
"multiple"
|
||||
],
|
||||
description: "Whether to allow selection of a single option or multiple."
|
||||
},
|
||||
{
|
||||
name: "placeholder",
|
||||
label: "Placeholder",
|
||||
type: "text",
|
||||
description: "Placeholder text when no option is selected."
|
||||
},
|
||||
{
|
||||
name: "showSearch",
|
||||
label: "Show Search",
|
||||
type: "boolean",
|
||||
description: "Whether to show a search input for filtering."
|
||||
},
|
||||
{
|
||||
name: "allowNewOptions",
|
||||
label: "Allow New Options",
|
||||
type: "boolean",
|
||||
description: "Whether users can create new options by typing a value not in the list."
|
||||
},
|
||||
{
|
||||
name: "allowClear",
|
||||
label: "Allow Clear",
|
||||
type: "boolean",
|
||||
description: "Whether to show a clear button to reset the selection."
|
||||
},
|
||||
{
|
||||
name: "allowSelectAll",
|
||||
label: "Allow Select All",
|
||||
type: "boolean",
|
||||
description: "Whether to show a \"Select All\" option in multiple mode."
|
||||
},
|
||||
{
|
||||
name: "disabled",
|
||||
label: "Disabled",
|
||||
type: "boolean",
|
||||
description: "Whether the select is disabled."
|
||||
},
|
||||
{
|
||||
name: "invertSelection",
|
||||
label: "Invert Selection",
|
||||
type: "boolean",
|
||||
description: "Shows a stop icon instead of a checkmark on selected options, indicating deselection on click."
|
||||
},
|
||||
{
|
||||
name: "oneLine",
|
||||
label: "One Line",
|
||||
type: "boolean",
|
||||
description: "Forces tags onto one line with overflow count. Requires multiple mode."
|
||||
},
|
||||
{
|
||||
name: "maxTagCount",
|
||||
label: "Max Tag Count",
|
||||
type: "number",
|
||||
description: "Maximum number of tags to display in multiple mode before showing an overflow count."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<div style={{ width: 300 }}>
|
||||
<Select
|
||||
ariaLabel="demo-select"
|
||||
options={[
|
||||
{ label: 'Dashboards', value: 'dashboards' },
|
||||
{ label: 'Charts', value: 'charts' },
|
||||
{ label: 'Datasets', value: 'datasets' },
|
||||
{ label: 'SQL Lab', value: 'sqllab' },
|
||||
{ label: 'Settings', value: 'settings' },
|
||||
]}
|
||||
placeholder="Select ..."
|
||||
showSearch
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Multi Select
|
||||
|
||||
```tsx live
|
||||
function MultiSelectDemo() {
|
||||
return (
|
||||
<div style={{ width: 400 }}>
|
||||
<Select
|
||||
ariaLabel="multi-select"
|
||||
mode="multiple"
|
||||
options={[
|
||||
{ label: 'Dashboards', value: 'dashboards' },
|
||||
{ label: 'Charts', value: 'charts' },
|
||||
{ label: 'Datasets', value: 'datasets' },
|
||||
{ label: 'SQL Lab', value: 'sqllab' },
|
||||
{ label: 'Settings', value: 'settings' },
|
||||
]}
|
||||
placeholder="Select items..."
|
||||
allowSelectAll
|
||||
maxTagCount={3}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Allow New Options
|
||||
|
||||
```tsx live
|
||||
function AllowNewDemo() {
|
||||
return (
|
||||
<div style={{ width: 300 }}>
|
||||
<Select
|
||||
ariaLabel="allow-new-select"
|
||||
mode="multiple"
|
||||
options={[
|
||||
{ label: 'Red', value: 'red' },
|
||||
{ label: 'Green', value: 'green' },
|
||||
{ label: 'Blue', value: 'blue' },
|
||||
]}
|
||||
placeholder="Type to add tags..."
|
||||
allowNewOptions
|
||||
showSearch
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Inverted Selection
|
||||
|
||||
```tsx live
|
||||
function InvertedDemo() {
|
||||
return (
|
||||
<div style={{ width: 400 }}>
|
||||
<Select
|
||||
ariaLabel="inverted-select"
|
||||
mode="multiple"
|
||||
options={[
|
||||
{ label: 'Admin', value: 'admin' },
|
||||
{ label: 'Editor', value: 'editor' },
|
||||
{ label: 'Viewer', value: 'viewer' },
|
||||
{ label: 'Public', value: 'public' },
|
||||
]}
|
||||
placeholder="Exclude roles..."
|
||||
invertSelection
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## One Line Mode
|
||||
|
||||
```tsx live
|
||||
function OneLineDemo() {
|
||||
return (
|
||||
<div style={{ width: 300 }}>
|
||||
<Select
|
||||
ariaLabel="oneline-select"
|
||||
mode="multiple"
|
||||
options={[
|
||||
{ label: 'Dashboard 1', value: 'd1' },
|
||||
{ label: 'Dashboard 2', value: 'd2' },
|
||||
{ label: 'Dashboard 3', value: 'd3' },
|
||||
{ label: 'Dashboard 4', value: 'd4' },
|
||||
{ label: 'Dashboard 5', value: 'd5' },
|
||||
]}
|
||||
placeholder="Select dashboards..."
|
||||
oneLine
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `mode` | `string` | `"single"` | Whether to allow selection of a single option or multiple. |
|
||||
| `placeholder` | `string` | `"Select ..."` | Placeholder text when no option is selected. |
|
||||
| `showSearch` | `boolean` | `true` | Whether to show a search input for filtering. |
|
||||
| `allowNewOptions` | `boolean` | `false` | Whether users can create new options by typing a value not in the list. |
|
||||
| `allowClear` | `boolean` | `false` | Whether to show a clear button to reset the selection. |
|
||||
| `allowSelectAll` | `boolean` | `true` | Whether to show a "Select All" option in multiple mode. |
|
||||
| `disabled` | `boolean` | `false` | Whether the select is disabled. |
|
||||
| `invertSelection` | `boolean` | `false` | Shows a stop icon instead of a checkmark on selected options, indicating deselection on click. |
|
||||
| `oneLine` | `boolean` | `false` | Forces tags onto one line with overflow count. Requires multiple mode. |
|
||||
| `maxTagCount` | `number` | `4` | Maximum number of tags to display in multiple mode before showing an overflow count. |
|
||||
| `options` | `any` | `[{"label":"Such an incredibly awesome long long label","value":"long-label-1"},{"label":"Another incredibly awesome long long label","value":"long-label-2"},{"label":"Option A","value":"A"},{"label":"Option B","value":"B"},{"label":"Option C","value":"C"},{"label":"Option D","value":"D"},{"label":"Option E","value":"E"},{"label":"Option F","value":"F"},{"label":"Option G","value":"G"},{"label":"Option H","value":"H"},{"label":"Option I","value":"I"}]` | - |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { Select } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Select/Select.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,140 @@
|
||||
---
|
||||
title: Skeleton
|
||||
sidebar_label: Skeleton
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# Skeleton
|
||||
|
||||
Skeleton loading component with support for avatar, title, paragraph, button, and input placeholders.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="Skeleton"
|
||||
props={{
|
||||
active: true,
|
||||
avatar: false,
|
||||
loading: true,
|
||||
title: true,
|
||||
shape: "circle",
|
||||
size: "default",
|
||||
block: false
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "active",
|
||||
label: "Active",
|
||||
type: "boolean",
|
||||
description: "Show animation effect."
|
||||
},
|
||||
{
|
||||
name: "avatar",
|
||||
label: "Avatar",
|
||||
type: "boolean",
|
||||
description: "Show avatar placeholder."
|
||||
},
|
||||
{
|
||||
name: "loading",
|
||||
label: "Loading",
|
||||
type: "boolean",
|
||||
description: "Display the skeleton when true."
|
||||
},
|
||||
{
|
||||
name: "title",
|
||||
label: "Title",
|
||||
type: "boolean",
|
||||
description: "Show title placeholder."
|
||||
},
|
||||
{
|
||||
name: "shape",
|
||||
label: "Shape",
|
||||
type: "select",
|
||||
options: [
|
||||
"circle",
|
||||
"square"
|
||||
],
|
||||
description: "Shape of the avatar/button skeleton."
|
||||
},
|
||||
{
|
||||
name: "size",
|
||||
label: "Size",
|
||||
type: "select",
|
||||
options: [
|
||||
"large",
|
||||
"small",
|
||||
"default"
|
||||
],
|
||||
description: "Size of the skeleton elements."
|
||||
},
|
||||
{
|
||||
name: "block",
|
||||
label: "Block",
|
||||
type: "boolean",
|
||||
description: "Option to fit button width to its parent width."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<Skeleton
|
||||
active
|
||||
loading
|
||||
title
|
||||
shape="circle"
|
||||
size="default"
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `active` | `boolean` | `true` | Show animation effect. |
|
||||
| `avatar` | `boolean` | `false` | Show avatar placeholder. |
|
||||
| `loading` | `boolean` | `true` | Display the skeleton when true. |
|
||||
| `title` | `boolean` | `true` | Show title placeholder. |
|
||||
| `shape` | `string` | `"circle"` | Shape of the avatar/button skeleton. |
|
||||
| `size` | `string` | `"default"` | Size of the skeleton elements. |
|
||||
| `block` | `boolean` | `false` | Option to fit button width to its parent width. |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { Skeleton } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Skeleton/Skeleton.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,253 @@
|
||||
---
|
||||
title: Slider
|
||||
sidebar_label: Slider
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# Slider
|
||||
|
||||
A slider input for selecting a value or range from a continuous or stepped interval. Supports single value, range, vertical orientation, marks, and tooltip display.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="Slider"
|
||||
props={{
|
||||
min: 0,
|
||||
max: 100,
|
||||
defaultValue: 70,
|
||||
step: 1,
|
||||
disabled: false,
|
||||
reverse: false,
|
||||
vertical: false,
|
||||
keyboard: true,
|
||||
dots: false,
|
||||
included: true
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "min",
|
||||
label: "Min",
|
||||
type: "number",
|
||||
description: "Minimum value of the slider."
|
||||
},
|
||||
{
|
||||
name: "max",
|
||||
label: "Max",
|
||||
type: "number",
|
||||
description: "Maximum value of the slider."
|
||||
},
|
||||
{
|
||||
name: "defaultValue",
|
||||
label: "Default Value",
|
||||
type: "number",
|
||||
description: "Initial value of the slider."
|
||||
},
|
||||
{
|
||||
name: "step",
|
||||
label: "Step",
|
||||
type: "number",
|
||||
description: "Step increment between values. Use null for marks-only mode."
|
||||
},
|
||||
{
|
||||
name: "disabled",
|
||||
label: "Disabled",
|
||||
type: "boolean",
|
||||
description: "Whether the slider is disabled."
|
||||
},
|
||||
{
|
||||
name: "reverse",
|
||||
label: "Reverse",
|
||||
type: "boolean",
|
||||
description: "Whether to reverse the slider direction."
|
||||
},
|
||||
{
|
||||
name: "vertical",
|
||||
label: "Vertical",
|
||||
type: "boolean",
|
||||
description: "Whether to display the slider vertically."
|
||||
},
|
||||
{
|
||||
name: "keyboard",
|
||||
label: "Keyboard",
|
||||
type: "boolean",
|
||||
description: "Whether keyboard arrow keys can control the slider."
|
||||
},
|
||||
{
|
||||
name: "dots",
|
||||
label: "Dots",
|
||||
type: "boolean",
|
||||
description: "Whether to show dots at each step mark."
|
||||
},
|
||||
{
|
||||
name: "included",
|
||||
label: "Included",
|
||||
type: "boolean",
|
||||
description: "Whether to highlight the filled portion of the track."
|
||||
},
|
||||
{
|
||||
name: "tooltipOpen",
|
||||
label: "Tooltip Open",
|
||||
type: "boolean",
|
||||
description: "Whether the value tooltip is always visible."
|
||||
},
|
||||
{
|
||||
name: "tooltipPosition",
|
||||
label: "Tooltip Position",
|
||||
type: "select",
|
||||
options: [
|
||||
"top",
|
||||
"left",
|
||||
"bottom",
|
||||
"right",
|
||||
"topLeft",
|
||||
"topRight",
|
||||
"bottomLeft",
|
||||
"bottomRight",
|
||||
"leftTop",
|
||||
"leftBottom",
|
||||
"rightTop",
|
||||
"rightBottom"
|
||||
],
|
||||
description: "Position of the value tooltip relative to the handle."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<div style={{ width: 400, padding: '20px 0' }}>
|
||||
<Slider
|
||||
min={0}
|
||||
max={100}
|
||||
defaultValue={70}
|
||||
step={1}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Range Slider
|
||||
|
||||
```tsx live
|
||||
function RangeSliderDemo() {
|
||||
return (
|
||||
<div style={{ width: 400, padding: '20px 0' }}>
|
||||
<h4>Basic Range</h4>
|
||||
<Slider range defaultValue={[20, 70]} min={0} max={100} />
|
||||
<br />
|
||||
<h4>Draggable Track</h4>
|
||||
<Slider range={{ draggableTrack: true }} defaultValue={[30, 60]} min={0} max={100} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## With Marks
|
||||
|
||||
```tsx live
|
||||
function MarksDemo() {
|
||||
return (
|
||||
<div style={{ width: 400, padding: '20px 0' }}>
|
||||
<Slider
|
||||
min={0}
|
||||
max={100}
|
||||
defaultValue={37}
|
||||
marks={{
|
||||
0: '0°C',
|
||||
25: '25°C',
|
||||
50: '50°C',
|
||||
75: '75°C',
|
||||
100: '100°C',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Stepped and Dots
|
||||
|
||||
```tsx live
|
||||
function SteppedDemo() {
|
||||
return (
|
||||
<div style={{ width: 400, padding: '20px 0' }}>
|
||||
<h4>Step = 10 with Dots</h4>
|
||||
<Slider min={0} max={100} defaultValue={30} step={10} dots />
|
||||
<br />
|
||||
<h4>Step = 25</h4>
|
||||
<Slider min={0} max={100} defaultValue={50} step={25} dots
|
||||
marks={{ 0: '0', 25: '25', 50: '50', 75: '75', 100: '100' }} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Vertical Slider
|
||||
|
||||
```tsx live
|
||||
function VerticalDemo() {
|
||||
return (
|
||||
<div style={{ height: 300, display: 'flex', gap: 40, padding: '0 40px' }}>
|
||||
<Slider vertical defaultValue={30} />
|
||||
<Slider vertical range defaultValue={[20, 60]} />
|
||||
<Slider vertical defaultValue={50} dots step={10}
|
||||
marks={{ 0: '0', 50: '50', 100: '100' }} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `min` | `number` | `0` | Minimum value of the slider. |
|
||||
| `max` | `number` | `100` | Maximum value of the slider. |
|
||||
| `defaultValue` | `number` | `70` | Initial value of the slider. |
|
||||
| `step` | `number` | `1` | Step increment between values. Use null for marks-only mode. |
|
||||
| `disabled` | `boolean` | `false` | Whether the slider is disabled. |
|
||||
| `reverse` | `boolean` | `false` | Whether to reverse the slider direction. |
|
||||
| `vertical` | `boolean` | `false` | Whether to display the slider vertically. |
|
||||
| `keyboard` | `boolean` | `true` | Whether keyboard arrow keys can control the slider. |
|
||||
| `dots` | `boolean` | `false` | Whether to show dots at each step mark. |
|
||||
| `included` | `boolean` | `true` | Whether to highlight the filled portion of the track. |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { Slider } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Slider/Slider.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,272 @@
|
||||
---
|
||||
title: Steps
|
||||
sidebar_label: Steps
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# Steps
|
||||
|
||||
A navigation component for guiding users through multi-step workflows. Supports horizontal, vertical, and inline layouts with progress tracking.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="Steps"
|
||||
props={{
|
||||
direction: "horizontal",
|
||||
current: 1,
|
||||
labelPlacement: "horizontal",
|
||||
progressDot: false,
|
||||
size: "default",
|
||||
status: "process",
|
||||
type: "default",
|
||||
title: "Step 3",
|
||||
description: "Description 3",
|
||||
items: [
|
||||
{
|
||||
title: "Connect Database",
|
||||
description: "Configure the connection"
|
||||
},
|
||||
{
|
||||
title: "Create Dataset",
|
||||
description: "Select tables and columns"
|
||||
},
|
||||
{
|
||||
title: "Build Chart",
|
||||
description: "Choose visualization type"
|
||||
}
|
||||
]
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "direction",
|
||||
label: "Direction",
|
||||
type: "select",
|
||||
options: [
|
||||
"horizontal",
|
||||
"vertical"
|
||||
],
|
||||
description: "Layout direction of the steps."
|
||||
},
|
||||
{
|
||||
name: "current",
|
||||
label: "Current",
|
||||
type: "number",
|
||||
description: "Index of the current step (zero-based)."
|
||||
},
|
||||
{
|
||||
name: "labelPlacement",
|
||||
label: "Label Placement",
|
||||
type: "select",
|
||||
options: [
|
||||
"horizontal",
|
||||
"vertical"
|
||||
],
|
||||
description: "Position of step labels relative to the step icon."
|
||||
},
|
||||
{
|
||||
name: "progressDot",
|
||||
label: "Progress Dot",
|
||||
type: "boolean",
|
||||
description: "Whether to use a dot style instead of numbered icons."
|
||||
},
|
||||
{
|
||||
name: "size",
|
||||
label: "Size",
|
||||
type: "select",
|
||||
options: [
|
||||
"default",
|
||||
"small"
|
||||
],
|
||||
description: "Size of the step icons and text."
|
||||
},
|
||||
{
|
||||
name: "status",
|
||||
label: "Status",
|
||||
type: "select",
|
||||
options: [
|
||||
"wait",
|
||||
"process",
|
||||
"finish",
|
||||
"error"
|
||||
],
|
||||
description: "Status of the current step."
|
||||
},
|
||||
{
|
||||
name: "type",
|
||||
label: "Type",
|
||||
type: "select",
|
||||
options: [
|
||||
"default",
|
||||
"navigation",
|
||||
"inline"
|
||||
],
|
||||
description: "Visual style: default numbered, navigation breadcrumb, or inline compact."
|
||||
},
|
||||
{
|
||||
name: "title",
|
||||
label: "Title",
|
||||
type: "text"
|
||||
},
|
||||
{
|
||||
name: "description",
|
||||
label: "Description",
|
||||
type: "text"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<Steps
|
||||
current={1}
|
||||
items={[
|
||||
{ title: 'Connect Database', description: 'Configure the connection' },
|
||||
{ title: 'Create Dataset', description: 'Select tables and columns' },
|
||||
{ title: 'Build Chart', description: 'Choose visualization type' },
|
||||
]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Vertical Steps
|
||||
|
||||
```tsx live
|
||||
function VerticalSteps() {
|
||||
return (
|
||||
<Steps
|
||||
direction="vertical"
|
||||
current={1}
|
||||
items={[
|
||||
{ title: 'Upload CSV', description: 'Select a file from your computer' },
|
||||
{ title: 'Configure Columns', description: 'Set data types and names' },
|
||||
{ title: 'Review', description: 'Verify the data looks correct' },
|
||||
{ title: 'Import', description: 'Save the dataset' },
|
||||
]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Status Indicators
|
||||
|
||||
```tsx live
|
||||
function StatusSteps() {
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
|
||||
<div>
|
||||
<h4>Error on Step 2</h4>
|
||||
<Steps
|
||||
current={1}
|
||||
status="error"
|
||||
items={[
|
||||
{ title: 'Connection', description: 'Configured' },
|
||||
{ title: 'Validation', description: 'Failed to validate' },
|
||||
{ title: 'Complete' },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h4>All Complete</h4>
|
||||
<Steps
|
||||
current={3}
|
||||
items={[
|
||||
{ title: 'Step 1' },
|
||||
{ title: 'Step 2' },
|
||||
{ title: 'Step 3' },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Dot Style and Small Size
|
||||
|
||||
```tsx live
|
||||
function DotAndSmall() {
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
|
||||
<div>
|
||||
<h4>Progress Dots</h4>
|
||||
<Steps
|
||||
progressDot
|
||||
current={1}
|
||||
items={[
|
||||
{ title: 'Create', description: 'Define the resource' },
|
||||
{ title: 'Configure', description: 'Set parameters' },
|
||||
{ title: 'Deploy', description: 'Go live' },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Small Size</h4>
|
||||
<Steps
|
||||
size="small"
|
||||
current={2}
|
||||
items={[
|
||||
{ title: 'Login' },
|
||||
{ title: 'Verify' },
|
||||
{ title: 'Done' },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `direction` | `string` | `"horizontal"` | Layout direction of the steps. |
|
||||
| `current` | `number` | `1` | Index of the current step (zero-based). |
|
||||
| `labelPlacement` | `string` | `"horizontal"` | Position of step labels relative to the step icon. |
|
||||
| `progressDot` | `boolean` | `false` | Whether to use a dot style instead of numbered icons. |
|
||||
| `size` | `string` | `"default"` | Size of the step icons and text. |
|
||||
| `status` | `string` | `"process"` | Status of the current step. |
|
||||
| `type` | `string` | `"default"` | Visual style: default numbered, navigation breadcrumb, or inline compact. |
|
||||
| `title` | `string` | `"Step 3"` | - |
|
||||
| `description` | `string` | `"Description 3"` | - |
|
||||
| `items` | `any` | `[{"title":"Connect Database","description":"Configure the connection"},{"title":"Create Dataset","description":"Select tables and columns"},{"title":"Build Chart","description":"Choose visualization type"}]` | - |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { Steps } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Steps/Steps.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,193 @@
|
||||
---
|
||||
title: Switch
|
||||
sidebar_label: Switch
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# Switch
|
||||
|
||||
A toggle switch for boolean on/off states. Supports loading indicators, sizing, and an HTML title attribute for accessibility tooltips.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="Switch"
|
||||
props={{
|
||||
disabled: false,
|
||||
loading: false,
|
||||
title: "Toggle feature"
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "disabled",
|
||||
label: "Disabled",
|
||||
type: "boolean",
|
||||
description: "Whether the switch is disabled."
|
||||
},
|
||||
{
|
||||
name: "loading",
|
||||
label: "Loading",
|
||||
type: "boolean",
|
||||
description: "Whether to show a loading spinner inside the switch."
|
||||
},
|
||||
{
|
||||
name: "title",
|
||||
label: "Title",
|
||||
type: "text",
|
||||
description: "HTML title attribute shown as a browser tooltip on hover. Useful for accessibility."
|
||||
},
|
||||
{
|
||||
name: "checked",
|
||||
label: "Checked",
|
||||
type: "boolean",
|
||||
description: "Whether the switch is on."
|
||||
},
|
||||
{
|
||||
name: "size",
|
||||
label: "Size",
|
||||
type: "radio",
|
||||
options: [
|
||||
"small",
|
||||
"default"
|
||||
],
|
||||
description: "Size of the switch."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
const [checked, setChecked] = React.useState(true);
|
||||
return (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<Switch
|
||||
checked={checked}
|
||||
onChange={setChecked}
|
||||
title="Toggle feature"
|
||||
/>
|
||||
<span>{checked ? 'On' : 'Off'}</span>
|
||||
<span style={{ color: '#999', fontSize: 12 }}>(hover the switch to see the title tooltip)</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Switch States
|
||||
|
||||
```tsx live
|
||||
function SwitchStates() {
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<Switch defaultChecked title="Enabled switch" />
|
||||
<span>Checked</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<Switch title="Unchecked switch" />
|
||||
<span>Unchecked</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<Switch disabled defaultChecked title="Disabled on" />
|
||||
<span>Disabled (on)</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<Switch disabled title="Disabled off" />
|
||||
<span>Disabled (off)</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<Switch loading defaultChecked title="Loading switch" />
|
||||
<span>Loading</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Sizes
|
||||
|
||||
```tsx live
|
||||
function SizesDemo() {
|
||||
return (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<Switch size="small" defaultChecked title="Small switch" />
|
||||
<span>Small</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<Switch size="default" defaultChecked title="Default switch" />
|
||||
<span>Default</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Settings Panel
|
||||
|
||||
```tsx live
|
||||
function SettingsPanel() {
|
||||
const [notifications, setNotifications] = React.useState(true);
|
||||
const [darkMode, setDarkMode] = React.useState(false);
|
||||
const [autoRefresh, setAutoRefresh] = React.useState(true);
|
||||
return (
|
||||
<div style={{ maxWidth: 320, border: '1px solid #e8e8e8', borderRadius: 8, padding: 16 }}>
|
||||
<h4 style={{ marginTop: 0 }}>Dashboard Settings</h4>
|
||||
{[
|
||||
{ label: 'Email notifications', checked: notifications, onChange: setNotifications, title: 'Toggle email notifications' },
|
||||
{ label: 'Dark mode', checked: darkMode, onChange: setDarkMode, title: 'Toggle dark mode' },
|
||||
{ label: 'Auto-refresh data', checked: autoRefresh, onChange: setAutoRefresh, title: 'Toggle auto-refresh' },
|
||||
].map(({ label, checked, onChange, title }) => (
|
||||
<div key={label} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 0', borderBottom: '1px solid #f0f0f0' }}>
|
||||
<span>{label}</span>
|
||||
<Switch checked={checked} onChange={onChange} title={title} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `disabled` | `boolean` | `false` | Whether the switch is disabled. |
|
||||
| `loading` | `boolean` | `false` | Whether to show a loading spinner inside the switch. |
|
||||
| `title` | `string` | `"Toggle feature"` | HTML title attribute shown as a browser tooltip on hover. Useful for accessibility. |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { Switch } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Switch/Switch.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,60 @@
|
||||
---
|
||||
title: TableCollection
|
||||
sidebar_label: TableCollection
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# TableCollection
|
||||
|
||||
The TableCollection component from Superset's UI library.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="TableCollection"
|
||||
props={{}}
|
||||
controls={[]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<TableCollection
|
||||
// Add props here
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/TableCollection/TableCollection.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,294 @@
|
||||
---
|
||||
title: TableView
|
||||
sidebar_label: TableView
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# TableView
|
||||
|
||||
A data table component with sorting, pagination, text wrapping, and empty state support. Built on react-table.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="TableView"
|
||||
props={{
|
||||
accessor: "summary",
|
||||
Header: "Summary",
|
||||
sortable: true,
|
||||
id: 456,
|
||||
age: 10,
|
||||
name: "John Smith",
|
||||
summary: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id porta neque, a vehicula orci. Maecenas rhoncus elit sit amet purus convallis placerat in at nunc. Nulla nec viverra augue.",
|
||||
noDataText: "No data here",
|
||||
pageSize: 2,
|
||||
showRowCount: true,
|
||||
withPagination: true,
|
||||
scrollTopOnPagination: false,
|
||||
columns: [
|
||||
{
|
||||
accessor: "id",
|
||||
Header: "ID",
|
||||
sortable: true,
|
||||
id: "id"
|
||||
},
|
||||
{
|
||||
accessor: "age",
|
||||
Header: "Age",
|
||||
id: "age"
|
||||
},
|
||||
{
|
||||
accessor: "name",
|
||||
Header: "Name",
|
||||
id: "name"
|
||||
},
|
||||
{
|
||||
accessor: "summary",
|
||||
Header: "Summary",
|
||||
id: "summary"
|
||||
}
|
||||
],
|
||||
data: [
|
||||
{
|
||||
id: 123,
|
||||
age: 27,
|
||||
name: "Emily",
|
||||
summary: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
|
||||
},
|
||||
{
|
||||
id: 321,
|
||||
age: 10,
|
||||
name: "Kate",
|
||||
summary: "Nam id porta neque, a vehicula orci."
|
||||
},
|
||||
{
|
||||
id: 456,
|
||||
age: 10,
|
||||
name: "John Smith",
|
||||
summary: "Maecenas rhoncus elit sit amet purus convallis placerat."
|
||||
}
|
||||
]
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "accessor",
|
||||
label: "Accessor",
|
||||
type: "text"
|
||||
},
|
||||
{
|
||||
name: "Header",
|
||||
label: "Header",
|
||||
type: "text"
|
||||
},
|
||||
{
|
||||
name: "sortable",
|
||||
label: "Sortable",
|
||||
type: "boolean"
|
||||
},
|
||||
{
|
||||
name: "id",
|
||||
label: "ID",
|
||||
type: "number"
|
||||
},
|
||||
{
|
||||
name: "age",
|
||||
label: "Age",
|
||||
type: "number"
|
||||
},
|
||||
{
|
||||
name: "name",
|
||||
label: "Name",
|
||||
type: "text"
|
||||
},
|
||||
{
|
||||
name: "summary",
|
||||
label: "Summary",
|
||||
type: "text"
|
||||
},
|
||||
{
|
||||
name: "noDataText",
|
||||
label: "No Data Text",
|
||||
type: "text",
|
||||
description: "Text displayed when the table has no data."
|
||||
},
|
||||
{
|
||||
name: "pageSize",
|
||||
label: "Page Size",
|
||||
type: "number",
|
||||
description: "Number of rows displayed per page."
|
||||
},
|
||||
{
|
||||
name: "showRowCount",
|
||||
label: "Show Row Count",
|
||||
type: "boolean",
|
||||
description: "Whether to display the total row count alongside pagination."
|
||||
},
|
||||
{
|
||||
name: "withPagination",
|
||||
label: "With Pagination",
|
||||
type: "boolean",
|
||||
description: "Whether to show pagination controls below the table."
|
||||
},
|
||||
{
|
||||
name: "scrollTopOnPagination",
|
||||
label: "Scroll Top On Pagination",
|
||||
type: "boolean",
|
||||
description: "Whether to scroll to the top of the table when changing pages."
|
||||
},
|
||||
{
|
||||
name: "emptyWrapperType",
|
||||
label: "Empty Wrapper Type",
|
||||
type: "select",
|
||||
description: "Style of the empty state wrapper."
|
||||
},
|
||||
{
|
||||
name: "initialPageIndex",
|
||||
label: "Initial Page Index",
|
||||
type: "number",
|
||||
description: "Initial page to display (zero-based)."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<TableView
|
||||
columns={[
|
||||
{ accessor: 'id', Header: 'ID', sortable: true, id: 'id' },
|
||||
{ accessor: 'age', Header: 'Age', id: 'age' },
|
||||
{ accessor: 'name', Header: 'Name', id: 'name' },
|
||||
{ accessor: 'summary', Header: 'Summary', id: 'summary' },
|
||||
]}
|
||||
data={[
|
||||
{ id: 123, age: 27, name: 'Emily', summary: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
|
||||
{ id: 321, age: 10, name: 'Kate', summary: 'Nam id porta neque, a vehicula orci.' },
|
||||
{ id: 456, age: 10, name: 'John Smith', summary: 'Maecenas rhoncus elit sit amet purus convallis placerat.' },
|
||||
]}
|
||||
initialSortBy={[{ id: 'name', desc: true }]}
|
||||
pageSize={2}
|
||||
withPagination
|
||||
showRowCount
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Without Pagination
|
||||
|
||||
```tsx live
|
||||
function NoPaginationDemo() {
|
||||
return (
|
||||
<TableView
|
||||
columns={[
|
||||
{ accessor: 'name', Header: 'Name', id: 'name' },
|
||||
{ accessor: 'email', Header: 'Email', id: 'email' },
|
||||
{ accessor: 'status', Header: 'Status', id: 'status' },
|
||||
]}
|
||||
data={[
|
||||
{ name: 'Alice', email: 'alice@example.com', status: 'Active' },
|
||||
{ name: 'Bob', email: 'bob@example.com', status: 'Inactive' },
|
||||
{ name: 'Charlie', email: 'charlie@example.com', status: 'Active' },
|
||||
]}
|
||||
withPagination={false}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Empty State
|
||||
|
||||
```tsx live
|
||||
function EmptyDemo() {
|
||||
return (
|
||||
<TableView
|
||||
columns={[
|
||||
{ accessor: 'name', Header: 'Name', id: 'name' },
|
||||
{ accessor: 'value', Header: 'Value', id: 'value' },
|
||||
]}
|
||||
data={[]}
|
||||
noDataText="No results found"
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## With Sorting
|
||||
|
||||
```tsx live
|
||||
function SortingDemo() {
|
||||
return (
|
||||
<TableView
|
||||
columns={[
|
||||
{ accessor: 'id', Header: 'ID', id: 'id', sortable: true },
|
||||
{ accessor: 'name', Header: 'Name', id: 'name', sortable: true },
|
||||
{ accessor: 'score', Header: 'Score', id: 'score', sortable: true },
|
||||
]}
|
||||
data={[
|
||||
{ id: 1, name: 'Dashboard A', score: 95 },
|
||||
{ id: 2, name: 'Dashboard B', score: 72 },
|
||||
{ id: 3, name: 'Dashboard C', score: 88 },
|
||||
{ id: 4, name: 'Dashboard D', score: 64 },
|
||||
]}
|
||||
initialSortBy={[{ id: 'score', desc: true }]}
|
||||
withPagination={false}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `accessor` | `string` | `"summary"` | - |
|
||||
| `Header` | `string` | `"Summary"` | - |
|
||||
| `sortable` | `boolean` | `true` | - |
|
||||
| `id` | `number` | `456` | - |
|
||||
| `age` | `number` | `10` | - |
|
||||
| `name` | `string` | `"John Smith"` | - |
|
||||
| `summary` | `string` | `"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id porta neque, a vehicula orci. Maecenas rhoncus elit sit amet purus convallis placerat in at nunc. Nulla nec viverra augue."` | - |
|
||||
| `noDataText` | `string` | `"No data here"` | Text displayed when the table has no data. |
|
||||
| `pageSize` | `number` | `2` | Number of rows displayed per page. |
|
||||
| `showRowCount` | `boolean` | `true` | Whether to display the total row count alongside pagination. |
|
||||
| `withPagination` | `boolean` | `true` | Whether to show pagination controls below the table. |
|
||||
| `scrollTopOnPagination` | `boolean` | `false` | Whether to scroll to the top of the table when changing pages. |
|
||||
| `columns` | `any` | `[{"accessor":"id","Header":"ID","sortable":true,"id":"id"},{"accessor":"age","Header":"Age","id":"age"},{"accessor":"name","Header":"Name","id":"name"},{"accessor":"summary","Header":"Summary","id":"summary"}]` | - |
|
||||
| `data` | `any` | `[{"id":123,"age":27,"name":"Emily","summary":"Lorem ipsum dolor sit amet, consectetur adipiscing elit."},{"id":321,"age":10,"name":"Kate","summary":"Nam id porta neque, a vehicula orci."},{"id":456,"age":10,"name":"John Smith","summary":"Maecenas rhoncus elit sit amet purus convallis placerat."}]` | - |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { TableView } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/TableView/TableView.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,223 @@
|
||||
---
|
||||
title: Tabs
|
||||
sidebar_label: Tabs
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# Tabs
|
||||
|
||||
A tabs component for switching between different views or content sections. Supports multiple tab styles, positions, and sizes.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="Tabs"
|
||||
props={{
|
||||
defaultActiveKey: "1",
|
||||
type: "line",
|
||||
tabPosition: "top",
|
||||
size: "middle",
|
||||
animated: true,
|
||||
centered: false,
|
||||
tabBarGutter: 8,
|
||||
items: [
|
||||
{
|
||||
key: "1",
|
||||
label: "Tab 1",
|
||||
children: "Content of Tab Pane 1"
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
label: "Tab 2",
|
||||
children: "Content of Tab Pane 2"
|
||||
},
|
||||
{
|
||||
key: "3",
|
||||
label: "Tab 3",
|
||||
children: "Content of Tab Pane 3"
|
||||
}
|
||||
]
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "defaultActiveKey",
|
||||
label: "Default Active Key",
|
||||
type: "text"
|
||||
},
|
||||
{
|
||||
name: "type",
|
||||
label: "Type",
|
||||
type: "inline-radio",
|
||||
options: [
|
||||
"line",
|
||||
"card",
|
||||
"editable-card"
|
||||
],
|
||||
description: "The style of tabs. Options: line, card, editable-card."
|
||||
},
|
||||
{
|
||||
name: "tabPosition",
|
||||
label: "Tab Position",
|
||||
type: "inline-radio",
|
||||
options: [
|
||||
"top",
|
||||
"bottom",
|
||||
"left",
|
||||
"right"
|
||||
],
|
||||
description: "Position of tabs. Options: top, bottom, left, right."
|
||||
},
|
||||
{
|
||||
name: "size",
|
||||
label: "Size",
|
||||
type: "inline-radio",
|
||||
options: [
|
||||
"small",
|
||||
"middle",
|
||||
"large"
|
||||
],
|
||||
description: "Size of the tabs."
|
||||
},
|
||||
{
|
||||
name: "animated",
|
||||
label: "Animated",
|
||||
type: "boolean",
|
||||
description: "Whether to animate tab transitions."
|
||||
},
|
||||
{
|
||||
name: "centered",
|
||||
label: "Centered",
|
||||
type: "boolean",
|
||||
description: "Whether to center the tabs."
|
||||
},
|
||||
{
|
||||
name: "tabBarGutter",
|
||||
label: "Tab Bar Gutter",
|
||||
type: "number",
|
||||
description: "The gap between tabs."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<Tabs
|
||||
defaultActiveKey="1"
|
||||
items={[
|
||||
{ key: '1', label: 'Tab 1', children: 'Content of Tab Pane 1' },
|
||||
{ key: '2', label: 'Tab 2', children: 'Content of Tab Pane 2' },
|
||||
{ key: '3', label: 'Tab 3', children: 'Content of Tab Pane 3' },
|
||||
]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Card Style
|
||||
|
||||
```tsx live
|
||||
function CardTabs() {
|
||||
return (
|
||||
<Tabs
|
||||
type="card"
|
||||
defaultActiveKey="1"
|
||||
items={[
|
||||
{ key: '1', label: 'Dashboards', children: 'View and manage your dashboards.' },
|
||||
{ key: '2', label: 'Charts', children: 'Browse all saved charts.' },
|
||||
{ key: '3', label: 'Datasets', children: 'Explore available datasets.' },
|
||||
]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Tab Positions
|
||||
|
||||
```tsx live
|
||||
function TabPositions() {
|
||||
const items = [
|
||||
{ key: '1', label: 'Tab 1', children: 'Content 1' },
|
||||
{ key: '2', label: 'Tab 2', children: 'Content 2' },
|
||||
{ key: '3', label: 'Tab 3', children: 'Content 3' },
|
||||
];
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
|
||||
{['top', 'bottom', 'left', 'right'].map(pos => (
|
||||
<div key={pos}>
|
||||
<h4>{pos}</h4>
|
||||
<Tabs tabPosition={pos} defaultActiveKey="1" items={items} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## With Icons
|
||||
|
||||
```tsx live
|
||||
function IconTabs() {
|
||||
return (
|
||||
<Tabs
|
||||
defaultActiveKey="1"
|
||||
items={[
|
||||
{ key: '1', label: <><Icons.DashboardOutlined /> Dashboards</>, children: 'Dashboard content here.' },
|
||||
{ key: '2', label: <><Icons.LineChartOutlined /> Charts</>, children: 'Chart content here.' },
|
||||
{ key: '3', label: <><Icons.DatabaseOutlined /> Datasets</>, children: 'Dataset content here.' },
|
||||
{ key: '4', label: <><Icons.ConsoleSqlOutlined /> SQL Lab</>, children: 'SQL Lab content here.' },
|
||||
]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `defaultActiveKey` | `string` | `"1"` | - |
|
||||
| `type` | `string` | `"line"` | The style of tabs. Options: line, card, editable-card. |
|
||||
| `tabPosition` | `string` | `"top"` | Position of tabs. Options: top, bottom, left, right. |
|
||||
| `size` | `string` | `"middle"` | Size of the tabs. |
|
||||
| `animated` | `boolean` | `true` | Whether to animate tab transitions. |
|
||||
| `centered` | `boolean` | `false` | Whether to center the tabs. |
|
||||
| `tabBarGutter` | `number` | `8` | The gap between tabs. |
|
||||
| `items` | `any` | `[{"key":"1","label":"Tab 1","children":"Content of Tab Pane 1"},{"key":"2","label":"Tab 2","children":"Content of Tab Pane 2"},{"key":"3","label":"Tab 3","children":"Content of Tab Pane 3"}]` | - |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { Tabs } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Tabs/Tabs.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,172 @@
|
||||
---
|
||||
title: Timer
|
||||
sidebar_label: Timer
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# Timer
|
||||
|
||||
A live elapsed-time display that counts up from a given start time. Used to show query and dashboard load durations. Requires a startTime timestamp to function.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="Timer"
|
||||
props={{
|
||||
isRunning: true,
|
||||
status: "success",
|
||||
startTime: 1737936000000
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "isRunning",
|
||||
label: "Is Running",
|
||||
type: "boolean",
|
||||
description: "Whether the timer is actively counting. Toggle to start/stop."
|
||||
},
|
||||
{
|
||||
name: "status",
|
||||
label: "Status",
|
||||
type: "select",
|
||||
options: [
|
||||
"success",
|
||||
"warning",
|
||||
"danger",
|
||||
"info",
|
||||
"default",
|
||||
"primary",
|
||||
"secondary"
|
||||
],
|
||||
description: "Visual status of the timer badge."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
const [isRunning, setIsRunning] = React.useState(true);
|
||||
const [startTime] = React.useState(Date.now());
|
||||
return (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
|
||||
<Timer
|
||||
startTime={startTime}
|
||||
isRunning={isRunning}
|
||||
status="success"
|
||||
/>
|
||||
<Button onClick={() => setIsRunning(r => !r)}>
|
||||
{isRunning ? 'Stop' : 'Start'}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Status Variants
|
||||
|
||||
```tsx live
|
||||
function StatusVariants() {
|
||||
const [startTime] = React.useState(Date.now());
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||||
{['success', 'warning', 'danger', 'info', 'default', 'primary', 'secondary'].map(status => (
|
||||
<div key={status} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
<span style={{ width: 80 }}>{status}</span>
|
||||
<Timer startTime={startTime} isRunning status={status} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Completed Timer
|
||||
|
||||
```tsx live
|
||||
function CompletedTimer() {
|
||||
const start = Date.now() - 5230;
|
||||
const end = Date.now();
|
||||
return (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
<Timer
|
||||
startTime={start}
|
||||
endTime={end}
|
||||
isRunning={false}
|
||||
status="success"
|
||||
/>
|
||||
<span style={{ color: '#999' }}>Query completed in ~5.2 seconds</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Start and Stop
|
||||
|
||||
```tsx live
|
||||
function StartStop() {
|
||||
const [isRunning, setIsRunning] = React.useState(false);
|
||||
const [startTime, setStartTime] = React.useState(null);
|
||||
const handleToggle = () => {
|
||||
if (!isRunning && !startTime) {
|
||||
setStartTime(Date.now());
|
||||
}
|
||||
setIsRunning(r => !r);
|
||||
};
|
||||
return (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
|
||||
<Timer
|
||||
startTime={startTime}
|
||||
isRunning={isRunning}
|
||||
status={isRunning ? 'warning' : 'success'}
|
||||
/>
|
||||
<Button onClick={handleToggle}>
|
||||
{isRunning ? 'Pause' : startTime ? 'Resume' : 'Start'}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `isRunning` | `boolean` | `true` | Whether the timer is actively counting. Toggle to start/stop. |
|
||||
| `status` | `string` | `"success"` | Visual status of the timer badge. |
|
||||
| `startTime` | `number` | `1737936000000` | - |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { Timer } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Timer/Timer.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,171 @@
|
||||
---
|
||||
title: Tooltip
|
||||
sidebar_label: Tooltip
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# Tooltip
|
||||
|
||||
The Tooltip component from Superset's UI library.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="Tooltip"
|
||||
props={{
|
||||
title: "Simple tooltip text",
|
||||
mouseEnterDelay: 0.1,
|
||||
mouseLeaveDelay: 0.1
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "title",
|
||||
label: "Title",
|
||||
type: "text",
|
||||
description: "Text or content shown in the tooltip."
|
||||
},
|
||||
{
|
||||
name: "mouseEnterDelay",
|
||||
label: "Mouse Enter Delay",
|
||||
type: "number",
|
||||
description: "Delay in seconds before showing the tooltip on hover."
|
||||
},
|
||||
{
|
||||
name: "mouseLeaveDelay",
|
||||
label: "Mouse Leave Delay",
|
||||
type: "number",
|
||||
description: "Delay in seconds before hiding the tooltip after mouse leave."
|
||||
},
|
||||
{
|
||||
name: "placement",
|
||||
label: "Placement",
|
||||
type: "select",
|
||||
options: [
|
||||
"bottom",
|
||||
"bottomLeft",
|
||||
"bottomRight",
|
||||
"left",
|
||||
"leftBottom",
|
||||
"leftTop",
|
||||
"right",
|
||||
"rightBottom",
|
||||
"rightTop",
|
||||
"top",
|
||||
"topLeft",
|
||||
"topRight"
|
||||
],
|
||||
description: "Position of the tooltip relative to the trigger element."
|
||||
},
|
||||
{
|
||||
name: "trigger",
|
||||
label: "Trigger",
|
||||
type: "select",
|
||||
options: [
|
||||
"hover",
|
||||
"focus",
|
||||
"click",
|
||||
"contextMenu"
|
||||
],
|
||||
description: "How the tooltip is triggered."
|
||||
},
|
||||
{
|
||||
name: "color",
|
||||
label: "Color",
|
||||
type: "color",
|
||||
description: "Custom background color for the tooltip."
|
||||
}
|
||||
]}
|
||||
sampleChildren={[{"component":"Button","props":{"children":"Hover me"}}]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<Tooltip title="This is a helpful tooltip">
|
||||
<Button>Hover me</Button>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Placements
|
||||
|
||||
```tsx live
|
||||
function Placements() {
|
||||
const placements = ['top', 'bottom', 'left', 'right', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'];
|
||||
return (
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
|
||||
{placements.map(placement => (
|
||||
<Tooltip key={placement} title={placement} placement={placement}>
|
||||
<Button>{placement}</Button>
|
||||
</Tooltip>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Trigger Types
|
||||
|
||||
```tsx live
|
||||
function Triggers() {
|
||||
return (
|
||||
<div style={{ display: 'flex', gap: 12 }}>
|
||||
<Tooltip title="Hover trigger" trigger="hover">
|
||||
<Button>Hover</Button>
|
||||
</Tooltip>
|
||||
<Tooltip title="Click trigger" trigger="click">
|
||||
<Button>Click</Button>
|
||||
</Tooltip>
|
||||
<Tooltip title="Focus trigger" trigger="focus">
|
||||
<Button>Focus</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `title` | `string` | `"Simple tooltip text"` | Text or content shown in the tooltip. |
|
||||
| `mouseEnterDelay` | `number` | `0.1` | Delay in seconds before showing the tooltip on hover. |
|
||||
| `mouseLeaveDelay` | `number` | `0.1` | Delay in seconds before hiding the tooltip after mouse leave. |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { Tooltip } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Tooltip/Tooltip.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,268 @@
|
||||
---
|
||||
title: Tree
|
||||
sidebar_label: Tree
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# Tree
|
||||
|
||||
The Tree component is used to display hierarchical data in a tree structure. It allows for features such as selection, expansion, and drag-and-drop functionality.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="Tree"
|
||||
props={{
|
||||
checkable: false,
|
||||
defaultExpandAll: false,
|
||||
disabled: false,
|
||||
draggable: false,
|
||||
multiple: false,
|
||||
selectable: true,
|
||||
showIcon: false,
|
||||
showLine: false,
|
||||
treeData: [
|
||||
{
|
||||
title: "parent 1",
|
||||
key: "0-0",
|
||||
children: [
|
||||
{
|
||||
title: "parent 1-0",
|
||||
key: "0-0-0",
|
||||
children: [
|
||||
{
|
||||
title: "leaf",
|
||||
key: "0-0-0-0"
|
||||
},
|
||||
{
|
||||
title: "leaf",
|
||||
key: "0-0-0-1"
|
||||
},
|
||||
{
|
||||
title: "leaf",
|
||||
key: "0-0-0-2"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "parent 1-1",
|
||||
key: "0-0-1",
|
||||
children: [
|
||||
{
|
||||
title: "leaf",
|
||||
key: "0-0-1-0"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "parent 1-2",
|
||||
key: "0-0-2",
|
||||
children: [
|
||||
{
|
||||
title: "leaf",
|
||||
key: "0-0-2-0"
|
||||
},
|
||||
{
|
||||
title: "leaf",
|
||||
key: "0-0-2-1"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
defaultExpandedKeys: [
|
||||
"0-0",
|
||||
"0-0-0"
|
||||
]
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "checkable",
|
||||
label: "Checkable",
|
||||
type: "boolean",
|
||||
description: "Add a Checkbox before the treeNodes"
|
||||
},
|
||||
{
|
||||
name: "defaultExpandAll",
|
||||
label: "Default Expand All",
|
||||
type: "boolean",
|
||||
description: "Whether to expand all treeNodes by default"
|
||||
},
|
||||
{
|
||||
name: "disabled",
|
||||
label: "Disabled",
|
||||
type: "boolean",
|
||||
description: "Whether disabled the tree"
|
||||
},
|
||||
{
|
||||
name: "draggable",
|
||||
label: "Draggable",
|
||||
type: "boolean",
|
||||
description: "Specifies whether this Tree or the node is draggable"
|
||||
},
|
||||
{
|
||||
name: "multiple",
|
||||
label: "Multiple",
|
||||
type: "boolean",
|
||||
description: "Allows selecting multiple treeNodes"
|
||||
},
|
||||
{
|
||||
name: "selectable",
|
||||
label: "Selectable",
|
||||
type: "boolean",
|
||||
description: "Whether can be selected"
|
||||
},
|
||||
{
|
||||
name: "showIcon",
|
||||
label: "Show Icon",
|
||||
type: "boolean",
|
||||
description: "Controls whether to display the icon node"
|
||||
},
|
||||
{
|
||||
name: "showLine",
|
||||
label: "Show Line",
|
||||
type: "boolean",
|
||||
description: "Shows a connecting line"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
const treeData = [
|
||||
{
|
||||
title: 'Databases',
|
||||
key: 'databases',
|
||||
children: [
|
||||
{ title: 'PostgreSQL', key: 'postgres' },
|
||||
{ title: 'MySQL', key: 'mysql' },
|
||||
{ title: 'SQLite', key: 'sqlite' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Charts',
|
||||
key: 'charts',
|
||||
children: [
|
||||
{ title: 'Bar Chart', key: 'bar' },
|
||||
{ title: 'Line Chart', key: 'line' },
|
||||
{ title: 'Pie Chart', key: 'pie' },
|
||||
],
|
||||
},
|
||||
];
|
||||
return <Tree treeData={treeData} defaultExpandAll />;
|
||||
}
|
||||
```
|
||||
|
||||
## Checkable Tree
|
||||
|
||||
```tsx live
|
||||
function CheckableTree() {
|
||||
const [checkedKeys, setCheckedKeys] = React.useState(['postgres']);
|
||||
const treeData = [
|
||||
{
|
||||
title: 'Databases',
|
||||
key: 'databases',
|
||||
children: [
|
||||
{ title: 'PostgreSQL', key: 'postgres' },
|
||||
{ title: 'MySQL', key: 'mysql' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Charts',
|
||||
key: 'charts',
|
||||
children: [
|
||||
{ title: 'Bar Chart', key: 'bar' },
|
||||
{ title: 'Line Chart', key: 'line' },
|
||||
],
|
||||
},
|
||||
];
|
||||
return (
|
||||
<Tree
|
||||
treeData={treeData}
|
||||
checkable
|
||||
defaultExpandAll
|
||||
checkedKeys={checkedKeys}
|
||||
onCheck={setCheckedKeys}
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## With Lines and Icons
|
||||
|
||||
```tsx live
|
||||
function LinesAndIcons() {
|
||||
const treeData = [
|
||||
{
|
||||
title: 'Dashboards',
|
||||
key: 'dashboards',
|
||||
children: [
|
||||
{ title: 'Sales Dashboard', key: 'sales' },
|
||||
{ title: 'Marketing Dashboard', key: 'marketing' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Reports',
|
||||
key: 'reports',
|
||||
children: [
|
||||
{ title: 'Weekly Report', key: 'weekly' },
|
||||
{ title: 'Monthly Report', key: 'monthly' },
|
||||
],
|
||||
},
|
||||
];
|
||||
return <Tree treeData={treeData} showLine showIcon defaultExpandAll />;
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `checkable` | `boolean` | `false` | Add a Checkbox before the treeNodes |
|
||||
| `defaultExpandAll` | `boolean` | `false` | Whether to expand all treeNodes by default |
|
||||
| `disabled` | `boolean` | `false` | Whether disabled the tree |
|
||||
| `draggable` | `boolean` | `false` | Specifies whether this Tree or the node is draggable |
|
||||
| `multiple` | `boolean` | `false` | Allows selecting multiple treeNodes |
|
||||
| `selectable` | `boolean` | `true` | Whether can be selected |
|
||||
| `showIcon` | `boolean` | `false` | Controls whether to display the icon node |
|
||||
| `showLine` | `boolean` | `false` | Shows a connecting line |
|
||||
| `treeData` | `any` | `[{"title":"parent 1","key":"0-0","children":[{"title":"parent 1-0","key":"0-0-0","children":[{"title":"leaf","key":"0-0-0-0"},{"title":"leaf","key":"0-0-0-1"},{"title":"leaf","key":"0-0-0-2"}]},{"title":"parent 1-1","key":"0-0-1","children":[{"title":"leaf","key":"0-0-1-0"}]},{"title":"parent 1-2","key":"0-0-2","children":[{"title":"leaf","key":"0-0-2-0"},{"title":"leaf","key":"0-0-2-1"}]}]}]` | - |
|
||||
| `defaultExpandedKeys` | `any` | `["0-0","0-0-0"]` | - |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { Tree } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Tree/Tree.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,286 @@
|
||||
---
|
||||
title: TreeSelect
|
||||
sidebar_label: TreeSelect
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# TreeSelect
|
||||
|
||||
TreeSelect is a select component that allows users to select from a tree structure.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="TreeSelect"
|
||||
props={{
|
||||
allowClear: true,
|
||||
disabled: false,
|
||||
multiple: false,
|
||||
placeholder: "Please select",
|
||||
showSearch: true,
|
||||
size: "middle",
|
||||
treeCheckable: false,
|
||||
treeDefaultExpandAll: true,
|
||||
treeLine: false,
|
||||
variant: "outlined",
|
||||
treeData: [
|
||||
{
|
||||
title: "Node1",
|
||||
value: "0-0",
|
||||
children: [
|
||||
{
|
||||
title: "Child Node1",
|
||||
value: "0-0-0"
|
||||
},
|
||||
{
|
||||
title: "Child Node2",
|
||||
value: "0-0-1"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Node2",
|
||||
value: "0-1",
|
||||
children: [
|
||||
{
|
||||
title: "Child Node3",
|
||||
value: "0-1-0"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "allowClear",
|
||||
label: "Allow Clear",
|
||||
type: "boolean",
|
||||
description: "Whether to allow clearing the selected value."
|
||||
},
|
||||
{
|
||||
name: "disabled",
|
||||
label: "Disabled",
|
||||
type: "boolean",
|
||||
description: "Whether the component is disabled."
|
||||
},
|
||||
{
|
||||
name: "multiple",
|
||||
label: "Multiple",
|
||||
type: "boolean",
|
||||
description: "Whether to allow multiple selections."
|
||||
},
|
||||
{
|
||||
name: "placeholder",
|
||||
label: "Placeholder",
|
||||
type: "text",
|
||||
description: "Placeholder text for the input field."
|
||||
},
|
||||
{
|
||||
name: "showSearch",
|
||||
label: "Show Search",
|
||||
type: "boolean",
|
||||
description: "Whether to show the search input."
|
||||
},
|
||||
{
|
||||
name: "size",
|
||||
label: "Size",
|
||||
type: "select",
|
||||
options: [
|
||||
"large",
|
||||
"middle",
|
||||
"small"
|
||||
],
|
||||
description: "Size of the component."
|
||||
},
|
||||
{
|
||||
name: "treeCheckable",
|
||||
label: "Tree Checkable",
|
||||
type: "boolean",
|
||||
description: "Whether to show checkable tree nodes."
|
||||
},
|
||||
{
|
||||
name: "treeDefaultExpandAll",
|
||||
label: "Tree Default Expand All",
|
||||
type: "boolean",
|
||||
description: "Whether to expand all tree nodes by default."
|
||||
},
|
||||
{
|
||||
name: "treeLine",
|
||||
label: "Tree Line",
|
||||
type: "boolean",
|
||||
description: "Whether to show tree lines."
|
||||
},
|
||||
{
|
||||
name: "variant",
|
||||
label: "Variant",
|
||||
type: "select",
|
||||
options: [
|
||||
"outlined",
|
||||
"borderless",
|
||||
"filled"
|
||||
],
|
||||
description: "Variant of the component."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
const [value, setValue] = React.useState(undefined);
|
||||
const treeData = [
|
||||
{
|
||||
title: 'Databases',
|
||||
value: 'databases',
|
||||
children: [
|
||||
{ title: 'PostgreSQL', value: 'postgres' },
|
||||
{ title: 'MySQL', value: 'mysql' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Charts',
|
||||
value: 'charts',
|
||||
children: [
|
||||
{ title: 'Bar Chart', value: 'bar' },
|
||||
{ title: 'Line Chart', value: 'line' },
|
||||
],
|
||||
},
|
||||
];
|
||||
return (
|
||||
<TreeSelect
|
||||
style={{ width: 300 }}
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
treeData={treeData}
|
||||
placeholder="Select an item"
|
||||
allowClear
|
||||
treeDefaultExpandAll
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Multiple Selection with Checkboxes
|
||||
|
||||
```tsx live
|
||||
function MultiSelectTree() {
|
||||
const [value, setValue] = React.useState([]);
|
||||
const treeData = [
|
||||
{
|
||||
title: 'Databases',
|
||||
value: 'databases',
|
||||
children: [
|
||||
{ title: 'PostgreSQL', value: 'postgres' },
|
||||
{ title: 'MySQL', value: 'mysql' },
|
||||
{ title: 'SQLite', value: 'sqlite' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'File Formats',
|
||||
value: 'formats',
|
||||
children: [
|
||||
{ title: 'CSV', value: 'csv' },
|
||||
{ title: 'Excel', value: 'excel' },
|
||||
],
|
||||
},
|
||||
];
|
||||
return (
|
||||
<TreeSelect
|
||||
style={{ width: 300 }}
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
treeData={treeData}
|
||||
treeCheckable
|
||||
placeholder="Select data sources"
|
||||
treeDefaultExpandAll
|
||||
allowClear
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## With Tree Lines
|
||||
|
||||
```tsx live
|
||||
function TreeLinesDemo() {
|
||||
const treeData = [
|
||||
{
|
||||
title: 'Dashboards',
|
||||
value: 'dashboards',
|
||||
children: [
|
||||
{ title: 'Sales Dashboard', value: 'sales' },
|
||||
{ title: 'Marketing Dashboard', value: 'marketing' },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'Charts',
|
||||
value: 'charts',
|
||||
children: [
|
||||
{ title: 'Revenue Chart', value: 'revenue' },
|
||||
{ title: 'User Growth', value: 'growth' },
|
||||
],
|
||||
},
|
||||
];
|
||||
return (
|
||||
<TreeSelect
|
||||
style={{ width: 300 }}
|
||||
treeData={treeData}
|
||||
treeLine
|
||||
treeDefaultExpandAll
|
||||
placeholder="Browse items"
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `allowClear` | `boolean` | `true` | Whether to allow clearing the selected value. |
|
||||
| `disabled` | `boolean` | `false` | Whether the component is disabled. |
|
||||
| `multiple` | `boolean` | `false` | Whether to allow multiple selections. |
|
||||
| `placeholder` | `string` | `"Please select"` | Placeholder text for the input field. |
|
||||
| `showSearch` | `boolean` | `true` | Whether to show the search input. |
|
||||
| `size` | `string` | `"middle"` | Size of the component. |
|
||||
| `treeCheckable` | `boolean` | `false` | Whether to show checkable tree nodes. |
|
||||
| `treeDefaultExpandAll` | `boolean` | `true` | Whether to expand all tree nodes by default. |
|
||||
| `treeLine` | `boolean` | `false` | Whether to show tree lines. |
|
||||
| `variant` | `string` | `"outlined"` | Variant of the component. |
|
||||
| `treeData` | `any` | `[{"title":"Node1","value":"0-0","children":[{"title":"Child Node1","value":"0-0-0"},{"title":"Child Node2","value":"0-0-1"}]},{"title":"Node2","value":"0-1","children":[{"title":"Child Node3","value":"0-1-0"}]}]` | - |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { TreeSelect } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/TreeSelect/TreeSelect.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,236 @@
|
||||
---
|
||||
title: Typography
|
||||
sidebar_label: Typography
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# Typography
|
||||
|
||||
Typography is a component for displaying text with various styles and formats. It includes subcomponents like Title, Paragraph, and Link.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="Typography"
|
||||
renderComponent="Typography.Text"
|
||||
props={{
|
||||
children: "Sample Text",
|
||||
code: false,
|
||||
copyable: false,
|
||||
delete: false,
|
||||
disabled: false,
|
||||
ellipsis: false,
|
||||
keyboard: false,
|
||||
mark: false,
|
||||
italic: false,
|
||||
underline: false,
|
||||
strong: false
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "children",
|
||||
label: "Children",
|
||||
type: "text",
|
||||
description: "The text content."
|
||||
},
|
||||
{
|
||||
name: "code",
|
||||
label: "Code",
|
||||
type: "boolean",
|
||||
description: "Code style."
|
||||
},
|
||||
{
|
||||
name: "copyable",
|
||||
label: "Copyable",
|
||||
type: "boolean",
|
||||
description: "Whether the text is copyable."
|
||||
},
|
||||
{
|
||||
name: "delete",
|
||||
label: "Delete",
|
||||
type: "boolean",
|
||||
description: "Deleted line style."
|
||||
},
|
||||
{
|
||||
name: "disabled",
|
||||
label: "Disabled",
|
||||
type: "boolean",
|
||||
description: "Disabled content."
|
||||
},
|
||||
{
|
||||
name: "ellipsis",
|
||||
label: "Ellipsis",
|
||||
type: "boolean",
|
||||
description: "Display ellipsis when text overflows."
|
||||
},
|
||||
{
|
||||
name: "keyboard",
|
||||
label: "Keyboard",
|
||||
type: "boolean",
|
||||
description: "Keyboard style."
|
||||
},
|
||||
{
|
||||
name: "mark",
|
||||
label: "Mark",
|
||||
type: "boolean",
|
||||
description: "Marked/highlighted style."
|
||||
},
|
||||
{
|
||||
name: "italic",
|
||||
label: "Italic",
|
||||
type: "boolean",
|
||||
description: "Italic style."
|
||||
},
|
||||
{
|
||||
name: "underline",
|
||||
label: "Underline",
|
||||
type: "boolean",
|
||||
description: "Underlined style."
|
||||
},
|
||||
{
|
||||
name: "strong",
|
||||
label: "Strong",
|
||||
type: "boolean",
|
||||
description: "Bold style."
|
||||
},
|
||||
{
|
||||
name: "type",
|
||||
label: "Type",
|
||||
type: "select",
|
||||
options: [
|
||||
"secondary",
|
||||
"success",
|
||||
"warning",
|
||||
"danger"
|
||||
],
|
||||
description: "Text type for semantic coloring."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<div>
|
||||
<Typography.Text>Default Text</Typography.Text>
|
||||
<br />
|
||||
<Typography.Text type="secondary">Secondary</Typography.Text>
|
||||
<br />
|
||||
<Typography.Text type="success">Success</Typography.Text>
|
||||
<br />
|
||||
<Typography.Text type="warning">Warning</Typography.Text>
|
||||
<br />
|
||||
<Typography.Text type="danger">Danger</Typography.Text>
|
||||
<br />
|
||||
<Typography.Text code>Code</Typography.Text>
|
||||
<br />
|
||||
<Typography.Text keyboard>Keyboard</Typography.Text>
|
||||
<br />
|
||||
<Typography.Text mark>Marked</Typography.Text>
|
||||
<br />
|
||||
<Typography.Text underline>Underline</Typography.Text>
|
||||
<br />
|
||||
<Typography.Text delete>Deleted</Typography.Text>
|
||||
<br />
|
||||
<Typography.Text strong>Strong</Typography.Text>
|
||||
<br />
|
||||
<Typography.Text italic>Italic</Typography.Text>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## All Subcomponents
|
||||
|
||||
```tsx live
|
||||
function AllSubcomponents() {
|
||||
return (
|
||||
<div>
|
||||
<Typography.Title level={2}>Typography Components</Typography.Title>
|
||||
<Typography.Paragraph>
|
||||
The Typography component includes several subcomponents for different text needs.
|
||||
Use <Typography.Text strong>Title</Typography.Text> for headings,
|
||||
<Typography.Text code>Text</Typography.Text> for inline text styling,
|
||||
and <Typography.Text mark>Paragraph</Typography.Text> for block content.
|
||||
</Typography.Paragraph>
|
||||
<Typography.Link href="https://superset.apache.org" target="_blank">
|
||||
Learn more about Apache Superset
|
||||
</Typography.Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Text Styling Options
|
||||
|
||||
```tsx live
|
||||
function TextStyles() {
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
<Typography.Text code>Code style</Typography.Text>
|
||||
<Typography.Text keyboard>Keyboard style</Typography.Text>
|
||||
<Typography.Text mark>Highlighted text</Typography.Text>
|
||||
<Typography.Text underline>Underlined text</Typography.Text>
|
||||
<Typography.Text delete>Deleted text</Typography.Text>
|
||||
<Typography.Text strong>Bold text</Typography.Text>
|
||||
<Typography.Text italic>Italic text</Typography.Text>
|
||||
<Typography.Text type="success">Success type</Typography.Text>
|
||||
<Typography.Text type="warning">Warning type</Typography.Text>
|
||||
<Typography.Text type="danger">Danger type</Typography.Text>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `children` | `string` | `"Sample Text"` | The text content. |
|
||||
| `code` | `boolean` | `false` | Code style. |
|
||||
| `copyable` | `boolean` | `false` | Whether the text is copyable. |
|
||||
| `delete` | `boolean` | `false` | Deleted line style. |
|
||||
| `disabled` | `boolean` | `false` | Disabled content. |
|
||||
| `ellipsis` | `boolean` | `false` | Display ellipsis when text overflows. |
|
||||
| `keyboard` | `boolean` | `false` | Keyboard style. |
|
||||
| `mark` | `boolean` | `false` | Marked/highlighted style. |
|
||||
| `italic` | `boolean` | `false` | Italic style. |
|
||||
| `underline` | `boolean` | `false` | Underlined style. |
|
||||
| `strong` | `boolean` | `false` | Bold style. |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { Typography } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Typography/Typography.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,126 @@
|
||||
---
|
||||
title: UnsavedChangesModal
|
||||
sidebar_label: UnsavedChangesModal
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# UnsavedChangesModal
|
||||
|
||||
The UnsavedChangesModal component from Superset's UI library.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="UnsavedChangesModal"
|
||||
props={{
|
||||
showModal: false,
|
||||
title: "Unsaved Changes"
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "showModal",
|
||||
label: "Show Modal",
|
||||
type: "boolean",
|
||||
description: "Whether the modal is visible."
|
||||
},
|
||||
{
|
||||
name: "title",
|
||||
label: "Title",
|
||||
type: "text",
|
||||
description: "Title text displayed in the modal header."
|
||||
}
|
||||
]}
|
||||
triggerProp="showModal"
|
||||
onHideProp="onHide,handleSave,onConfirmNavigation"
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
const [show, setShow] = React.useState(false);
|
||||
return (
|
||||
<div>
|
||||
<Button onClick={() => setShow(true)}>
|
||||
Navigate Away (Unsaved Changes)
|
||||
</Button>
|
||||
<UnsavedChangesModal
|
||||
showModal={show}
|
||||
onHide={() => setShow(false)}
|
||||
handleSave={() => { alert('Saved!'); setShow(false); }}
|
||||
onConfirmNavigation={() => { alert('Discarded changes'); setShow(false); }}
|
||||
title="Unsaved Changes"
|
||||
>
|
||||
If you don't save, changes will be lost.
|
||||
</UnsavedChangesModal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Custom Title
|
||||
|
||||
```tsx live
|
||||
function CustomTitle() {
|
||||
const [show, setShow] = React.useState(false);
|
||||
return (
|
||||
<div>
|
||||
<Button onClick={() => setShow(true)}>
|
||||
Close Without Saving
|
||||
</Button>
|
||||
<UnsavedChangesModal
|
||||
showModal={show}
|
||||
onHide={() => setShow(false)}
|
||||
handleSave={() => setShow(false)}
|
||||
onConfirmNavigation={() => setShow(false)}
|
||||
title="You have unsaved dashboard changes"
|
||||
>
|
||||
Your dashboard layout and filter changes have not been saved.
|
||||
Do you want to save before leaving?
|
||||
</UnsavedChangesModal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `showModal` | `boolean` | `false` | Whether the modal is visible. |
|
||||
| `title` | `string` | `"Unsaved Changes"` | Title text displayed in the modal header. |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { UnsavedChangesModal } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/UnsavedChangesModal/UnsavedChangesModal.stories.tsx).
|
||||
:::
|
||||
@@ -0,0 +1,136 @@
|
||||
---
|
||||
title: Upload
|
||||
sidebar_label: Upload
|
||||
---
|
||||
|
||||
<!--
|
||||
Licensed to the Apache Software Foundation (ASF) under one
|
||||
or more contributor license agreements. See the NOTICE file
|
||||
distributed with this work for additional information
|
||||
regarding copyright ownership. The ASF licenses this file
|
||||
to you under the Apache License, Version 2.0 (the
|
||||
"License"); you may not use this file except in compliance
|
||||
with the License. You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing,
|
||||
software distributed under the License is distributed on an
|
||||
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
KIND, either express or implied. See the License for the
|
||||
specific language governing permissions and limitations
|
||||
under the License.
|
||||
-->
|
||||
|
||||
import { StoryWithControls } from '../../../../src/components/StorybookWrapper';
|
||||
|
||||
# Upload
|
||||
|
||||
Upload component for file selection and uploading. Supports drag-and-drop, multiple files, and different list display styles.
|
||||
|
||||
## Live Example
|
||||
|
||||
<StoryWithControls
|
||||
component="Upload"
|
||||
props={{
|
||||
multiple: false,
|
||||
disabled: false,
|
||||
listType: "text",
|
||||
showUploadList: true
|
||||
}}
|
||||
controls={[
|
||||
{
|
||||
name: "multiple",
|
||||
label: "Multiple",
|
||||
type: "boolean",
|
||||
description: "Support multiple file selection."
|
||||
},
|
||||
{
|
||||
name: "disabled",
|
||||
label: "Disabled",
|
||||
type: "boolean",
|
||||
description: "Disable the upload button."
|
||||
},
|
||||
{
|
||||
name: "listType",
|
||||
label: "List Type",
|
||||
type: "select",
|
||||
options: [
|
||||
"text",
|
||||
"picture",
|
||||
"picture-card",
|
||||
"picture-circle"
|
||||
],
|
||||
description: "Built-in style for the file list display."
|
||||
},
|
||||
{
|
||||
name: "showUploadList",
|
||||
label: "Show Upload List",
|
||||
type: "boolean",
|
||||
description: "Whether to show the upload file list."
|
||||
}
|
||||
]}
|
||||
sampleChildren={[{"component":"Button","props":{"children":"Click to Upload"}}]}
|
||||
/>
|
||||
|
||||
## Try It
|
||||
|
||||
Edit the code below to experiment with the component:
|
||||
|
||||
```tsx live
|
||||
function Demo() {
|
||||
return (
|
||||
<Upload>
|
||||
<Button>Click to Upload</Button>
|
||||
</Upload>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Picture Card Style
|
||||
|
||||
```tsx live
|
||||
function PictureCard() {
|
||||
return (
|
||||
<Upload listType="picture-card">
|
||||
+ Upload
|
||||
</Upload>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Drag and Drop
|
||||
|
||||
```tsx live
|
||||
function DragDrop() {
|
||||
return (
|
||||
<Upload.Dragger>
|
||||
<p style={{ fontSize: 48, color: '#999', margin: 0 }}>+</p>
|
||||
<p>Click or drag file to this area to upload</p>
|
||||
<p style={{ color: '#999' }}>Support for single or bulk upload.</p>
|
||||
</Upload.Dragger>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
| Prop | Type | Default | Description |
|
||||
|------|------|---------|-------------|
|
||||
| `multiple` | `boolean` | `false` | Support multiple file selection. |
|
||||
| `disabled` | `boolean` | `false` | Disable the upload button. |
|
||||
| `listType` | `string` | `"text"` | Built-in style for the file list display. |
|
||||
| `showUploadList` | `boolean` | `true` | Whether to show the upload file list. |
|
||||
|
||||
## Import
|
||||
|
||||
```tsx
|
||||
import { Upload } from '@superset-ui/core/components';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:::tip[Improve this page]
|
||||
This documentation is auto-generated from the component's Storybook story.
|
||||
Help improve it by [editing the story file](https://github.com/apache/superset/edit/master/superset-frontend/packages/superset-ui-core/src/components/Upload/Upload.stories.tsx).
|
||||
:::
|
||||
Reference in New Issue
Block a user