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

Attach elem_classes selectors to layout elements, and an id to the Tab button (for targeting via CSS/JS) ()

Browse Source 
* done

* layouts

* add changeset

* handle undefined case

* format

* add changeset

* add changeset

* simplify

* lint

* lint

* fix

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
This commit is contained in:
Abubakar Abid 2023-09-19 10:34:41 -07:00 committed by GitHub
parent 54d21d3f18
commit d1ad1f671c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 46 additions and 13 deletions

7
.changeset/real-items-cover.md Normal file

@ -0,0 +1,7 @@
---
"@gradio/tabitem": patch
"@gradio/tabs": patch
"gradio": patch
---
feat:Attach `elem_classes` selectors to layout elements, and an id to the Tab button (for targeting via CSS/JS)

38
gradio/layouts.py

@ -34,6 +34,7 @@ class Row(Updateable, BlockContext):
variant: Literal["default", "panel", "compact"] = "default",
visible: bool = True,
elem_id: str | None = None,
elem_classes: list[str] | str | None = None,
equal_height: bool = True,
**kwargs,
):
@ -42,13 +43,16 @@ class Row(Updateable, BlockContext):
variant: row type, 'default' (no background), 'panel' (gray background color and rounded corners), or 'compact' (rounded corners and no internal gap).
visible: If False, row will be hidden.
elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
elem_classes: An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.
equal_height: If True, makes every child element have equal height
"""
self.variant = variant
self.equal_height = equal_height
if variant == "compact":
self.allow_expected_parents = False
BlockContext.__init__(self, visible=visible, elem_id=elem_id, **kwargs)
BlockContext.__init__(
self, visible=visible, elem_id=elem_id, elem_classes=elem_classes, **kwargs
)
@staticmethod
def update(
@ -101,6 +105,7 @@ class Column(Updateable, BlockContext):
variant: Literal["default", "panel", "compact"] = "default",
visible: bool = True,
elem_id: str | None = None,
elem_classes: list[str] | str | None = None,
**kwargs,
):
"""
@ -110,6 +115,7 @@ class Column(Updateable, BlockContext):
variant: column type, 'default' (no background), 'panel' (gray background color and rounded corners), or 'compact' (rounded corners and no internal gap).
visible: If False, column will be hidden.
elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
elem_classes: An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.
"""
if scale != round(scale):
warn_deprecation(
@ -121,7 +127,9 @@ class Column(Updateable, BlockContext):
self.variant = variant
if variant == "compact":
self.allow_expected_parents = False
BlockContext.__init__(self, visible=visible, elem_id=elem_id, **kwargs)
BlockContext.__init__(
self, visible=visible, elem_id=elem_id, elem_classes=elem_classes, **kwargs
)
@staticmethod
def update(
@ -146,6 +154,7 @@ class Tabs(BlockContext, Changeable, Selectable):
selected: int | str | None = None,
visible: bool = True,
elem_id: str | None = None,
elem_classes: list[str] | str | None = None,
**kwargs,
):
"""
@ -153,8 +162,11 @@ class Tabs(BlockContext, Changeable, Selectable):
selected: The currently selected tab. Must correspond to an id passed to the one of the child TabItems. Defaults to the first TabItem.
visible: If False, Tabs will be hidden.
elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
elem_classes: An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.
"""
BlockContext.__init__(self, visible=visible, elem_id=elem_id, **kwargs)
BlockContext.__init__(
self, visible=visible, elem_id=elem_id, elem_classes=elem_classes, **kwargs
)
Changeable.__init__(self)
Selectable.__init__(self)
self.selected = selected
@ -190,15 +202,19 @@ class Tab(BlockContext, Selectable):
*,
id: int | str | None = None,
elem_id: str | None = None,
elem_classes: list[str] | str | None = None,
**kwargs,
):
"""
Parameters:
label: The visual label for the tab
id: An optional identifier for the tab, required if you wish to control the selected tab from a predict function.
elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
elem_id: An optional string that is assigned as the id of the <div> containing the contents of the Tab layout. The same string followed by "-button" is attached to the Tab button. Can be used for targeting CSS styles.
elem_classes: An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.
"""
BlockContext.__init__(self, elem_id=elem_id, **kwargs)
BlockContext.__init__(
self, elem_id=elem_id, elem_classes=elem_classes, **kwargs
)
Selectable.__init__(self)
self.label = label
self.id = id
@ -229,14 +245,18 @@ class Group(Updateable, BlockContext):
*,
visible: bool = True,
elem_id: str | None = None,
elem_classes: list[str] | str | None = None,
**kwargs,
):
"""
Parameters:
visible: If False, group will be hidden.
elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
elem_classes: An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.
"""
BlockContext.__init__(self, visible=visible, elem_id=elem_id, **kwargs)
BlockContext.__init__(
self, visible=visible, elem_id=elem_id, elem_classes=elem_classes, **kwargs
)
@staticmethod
def update(
@ -323,6 +343,7 @@ class Accordion(Updateable, BlockContext):
open: bool = True,
visible: bool = True,
elem_id: str | None = None,
elem_classes: list[str] | str | None = None,
**kwargs,
):
"""
@ -330,10 +351,13 @@ class Accordion(Updateable, BlockContext):
label: name of accordion section.
open: if True, accordion is open by default.
elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
elem_classes: An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.
"""
self.label = label
self.open = open
BlockContext.__init__(self, visible=visible, elem_id=elem_id, **kwargs)
BlockContext.__init__(
self, visible=visible, elem_id=elem_id, elem_classes=elem_classes, **kwargs
)
@staticmethod
def update(

4
js/tabitem/static/TabItem.svelte

@ -14,10 +14,10 @@
const { register_tab, unregister_tab, selected_tab, selected_tab_index } =
getContext(TABS) as any;
let tab_index = register_tab({ name, id });
let tab_index = register_tab({ name, id, elem_id });
onMount(() => {
return (): void => unregister_tab({ name, id });
return (): void => unregister_tab({ name, id, elem_id });
});
$: $selected_tab_index === tab_index &&

6
js/tabs/static/Tabs.svelte

@ -10,6 +10,7 @@
interface Tab {
name: string;
id: object;
elem_id: string | undefined;
}
export let visible = true;
@ -28,7 +29,7 @@
setContext(TABS, {
register_tab: (tab: Tab) => {
tabs.push({ name: tab.name, id: tab.id });
tabs.push({ name: tab.name, id: tab.id, elem_id: tab.elem_id });
selected_tab.update((current) => current ?? tab.id);
tabs = tabs;
return tabs.length - 1;
@ -58,11 +59,12 @@
<div class="tab-nav scroll-hide">
{#each tabs as t, i (t.id)}
{#if t.id === $selected_tab}
<button class="selected">
<button class="selected" id={t.elem_id ? t.elem_id + "-button" : null}>
{t.name}
</button>
{:else}
<button
id={t.elem_id ? t.elem_id + "-button" : null}
on:click={() => {
change_tab(t.id);
dispatch("select", { value: t.name, index: i });

4
pnpm-lock.yaml generated

@ -1,4 +1,4 @@
lockfileVersion: '6.0'
lockfileVersion: '6.1'
settings:
autoInstallPeers: true
@ -6401,7 +6401,7 @@ packages:
peerDependencies:
'@sveltejs/kit': ^1.0.0
dependencies:
'@sveltejs/kit': 1.16.3(svelte@3.57.0)(vite@4.3.5)
'@sveltejs/kit': 1.16.3(svelte@3.59.2)(vite@4.3.9)
import-meta-resolve: 3.0.0
dev: true