mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-04-06 12:30:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add interactive args to gr.ColorPicker (#5118)

Browse Source 
* add interactive args to colorpicker

* add changeset

* add changeset

* add colorpicker stories

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
This commit is contained in:
Hannah 2023-08-07 17:25:12 +02:00 committed by GitHub
parent 34f6b22efb
commit 1b017e68f6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 43 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.changeset/fluffy-ties-sink.md Normal file
View File

@ -0,0 +1,6 @@
---
"@gradio/colorpicker": patch
"gradio": patch
---
fix:Add `interactive` args to `gr.ColorPicker`

30
js/colorpicker/ColorPicker.stories.svelte Normal file
View File

@ -0,0 +1,30 @@
<script>
import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
import ColorPicker from "./static/StaticColorpicker.svelte";
</script>
<Meta title="Components/Color Picker" component={ColorPicker} argTypes={{}} />
<Template let:args>
<ColorPicker value="Color Picker" {...args} />
</Template>
<Story name="Default" />
<Story
name="Color Picker with a color value and hidden label"
args={{ value: "#FFC0CB", show_label: false }}
/>
<Story
name="Color Picker with a color value and label"
args={{ value: "#FFC0CB", label: "This is a neat color" }}
/>
<Story
name="Disabled color picker"
args={{ value: "#FFC0CB", interactive: false }}
/>
<Story
name="Color Picker with a color value and info"
args={{ value: "#FFC0CB", info: "This is a neat color" }}
/>

3
js/colorpicker/index.svelte
View File

@ -19,6 +19,7 @@
export let min_width: number | undefined = undefined;
export let loading_status: LoadingStatus;
export let mode: "static" | "dynamic";
export let interactive: boolean;
</script>
{#if mode === "static"}
@ -35,6 +36,7 @@
{scale}
{min_width}
{loading_status}
{interactive}
on:change
on:input
on:submit
@ -55,6 +57,7 @@
{scale}
{min_width}
{loading_status}
{interactive}
on:change
on:input
on:submit

3
js/colorpicker/interactive/InteractiveColorpicker.svelte
View File

@ -18,6 +18,7 @@
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
export let loading_status: LoadingStatus;
export let interactive = true;
</script>
<Block {visible} {elem_id} {elem_classes} {container} {scale} {min_width}>
@ -29,11 +30,11 @@
{label}
{info}
{show_label}
disabled={!interactive}
on:change
on:input
on:submit
on:blur
on:focus
disabled
/>
</Block>

3
js/colorpicker/static/StaticColorpicker.svelte
View File

@ -18,6 +18,7 @@
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
export let loading_status: LoadingStatus;
export let interactive = true;
</script>
<Block {visible} {elem_id} {elem_classes} {container} {scale} {min_width}>
@ -29,11 +30,11 @@
{label}
{info}
{show_label}
disabled={!interactive}
on:change
on:input
on:submit
on:blur
on:focus
disabled
/>
</Block>