File size: 1,365 Bytes
a03b3ba |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<script lang="ts">
import { getContext, onMount, createEventDispatcher, tick } from "svelte";
import { TABS } from "@gradio/tabs";
import Column from "@gradio/column";
import type { SelectData } from "@gradio/utils";
export let elem_id = "";
export let elem_classes: string[] = [];
export let name: string;
export let id: string | number | object = {};
export let visible: boolean;
export let interactive: boolean;
const dispatch = createEventDispatcher<{ select: SelectData }>();
const { register_tab, unregister_tab, selected_tab, selected_tab_index } =
getContext(TABS) as any;
let tab_index: number;
$: tab_index = register_tab({ name, id, elem_id, visible, interactive });
onMount(() => {
return (): void => unregister_tab({ name, id, elem_id });
});
$: $selected_tab_index === tab_index &&
tick().then(() => dispatch("select", { value: name, index: tab_index }));
</script>
<div
id={elem_id}
class="tabitem {elem_classes.join(' ')}"
style:display={$selected_tab === id ? "block" : "none"}
role="tabpanel"
>
<Column>
<slot />
</Column>
</div>
<style>
div {
display: flex;
position: relative;
border: 1px solid var(--border-color-primary);
border-top: none;
border-bottom-right-radius: var(--container-radius);
border-bottom-left-radius: var(--container-radius);
padding: var(--block-padding);
}
</style>
|