gradio/js/tabs/Tabs.stories.svelte
Hannah 61cd768490
Ensures tabs with visible set to false are not visible. (#9653)
* * fix tab visibility
* add story

* add changeset

* stuff

* fix

* more fix

* fix undefined tab labels

* fix tabs again

* add changeset

* format

* format

* fix type

* add changeset

* fix all things

* format

* add changeset

* notebooks

* visible tabs

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
Co-authored-by: pngwn <hello@pngwn.io>
Co-authored-by: freddyaboulton <alfonsoboulton@gmail.com>
2024-10-21 16:46:01 -07:00

49 lines
944 B
Svelte

<script>
import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
import Tabs from "./Index.svelte";
import TabItem from "../tabitem/Index.svelte";
</script>
<Meta title="Components/Tabs" component={Tabs} />
<Template let:args>
<Tabs {...args}>
<TabItem
id="tab-1"
label="Image Tab"
gradio={undefined}
visible
interactive
elem_classes={["editor-tabitem"]}
>
<img
style="width: 200px;"
alt="Cheetah"
src="https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg"
/>
</TabItem>
<TabItem
id="tab-2"
label="Hidden Tab"
gradio={undefined}
visible={false}
interactive
elem_classes={["editor-tabitem"]}
>
Secret Tab
</TabItem>
<TabItem
id="tab-3"
label="Visible Tab"
gradio={undefined}
visible
interactive
elem_classes={["editor-tabitem"]}
>
Visible Tab
</TabItem>
</Tabs>
</Template>
<Story name="Tabs" args={{}} />