2
0
mirror of https://github.com/gradio-app/gradio.git synced 2024-12-21 02:19:59 +08:00

Add a .click() event and padding parameter to the HTML component ()

* add click event to html

* format

* add changeset

* add padding parameter

* fix test

* format

* add changeset

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
This commit is contained in:
Abubakar Abid 2024-12-11 09:00:53 -08:00 committed by GitHub
parent 7d70596d0b
commit 23a2958f5e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 26 additions and 4 deletions
.changeset
gradio/components
js/html
test/components

View File

@ -0,0 +1,6 @@
---
"@gradio/html": minor
"gradio": minor
---
feat:Add a `.click()` event and `padding` parameter to the `HTML` component

View File

@ -23,7 +23,7 @@ class HTML(Component):
Guides: key-features
"""
EVENTS = [Events.change]
EVENTS = [Events.change, Events.click]
def __init__(
self,
@ -41,6 +41,7 @@ class HTML(Component):
min_height: int | None = None,
max_height: int | None = None,
container: bool = False,
padding: bool = True,
):
"""
Parameters:
@ -57,9 +58,11 @@ class HTML(Component):
min_height: The minimum height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If HTML content exceeds the height, the component will expand to fit the content.
max_height: The maximum height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If content exceeds the height, the component will scroll.
container: If True, the HTML component will be displayed in a container. Default is False.
padding: If True, the HTML component will have a certain padding (set by the `--block-padding` CSS variable) in all directions. Default is True.
"""
self.min_height = min_height
self.max_height = max_height
self.padding = padding
super().__init__(
label=label,
every=every,

View File

@ -15,12 +15,14 @@
export let loading_status: LoadingStatus;
export let gradio: Gradio<{
change: never;
click: never;
clear_status: LoadingStatus;
}>;
export let show_label = false;
export let min_height: number | undefined = undefined;
export let max_height: number | undefined = undefined;
export let container = false;
export let padding = true;
$: label, gradio.dispatch("change");
</script>
@ -39,6 +41,7 @@
/>
<div
class="html-container"
class:padding
class:pending={loading_status?.status === "pending"}
style:min-height={min_height && loading_status?.status !== "pending"
? css_units(min_height)
@ -50,12 +53,13 @@
{elem_classes}
{visible}
on:change={() => gradio.dispatch("change")}
on:click={() => gradio.dispatch("click")}
/>
</div>
</Block>
<style>
.html-container {
.padding {
padding: var(--block-padding);
}

View File

@ -5,12 +5,20 @@
export let value: string;
export let visible = true;
const dispatch = createEventDispatcher<{ change: undefined }>();
const dispatch = createEventDispatcher<{
change: undefined;
click: undefined;
}>();
$: value, dispatch("change");
</script>
<div class="prose {elem_classes.join(' ')}" class:hide={!visible}>
<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
<div
class="prose {elem_classes.join(' ')}"
class:hide={!visible}
on:click={() => dispatch("click")}
>
{@html value}
</div>

View File

@ -21,6 +21,7 @@ class TestHTML:
"min_height": None,
"max_height": None,
"container": False,
"padding": True,
}
def test_in_interface(self):