mirror of
https://github.com/gradio-app/gradio.git
synced 2025-01-12 10:34:32 +08:00
d6fbc32ed1
* add theme + theme atoms * audio * buttons * chatbot * forms * start file * complete file * fixup workbench * gallery * highlighted text * label * json * upload * 3d model * atoms * chart * md + html * image * plot + build * table * tabs * tooltip * upload * tweaks * tweaks + more tooling * tweaks to padding/ lineheight * app components _ start api docs * format, more api docs * finish api docs * interpretation * todos * tweaks + cleanup * tweaks + cleanup * revert range tweaks * fix notebooks * fix test * remove tw * cleanup + login * fix gitignore * fix types * run css script * fix progress + tweaks * update demos * add css build to static check workflow * tweak ci * fix tests * tweak markdown * tweak chatbot + file * fix tabs * tweak tabs * cleanup * fix api docs * fix example gallery * add gradient to toast * fix min height for interfaces * revert tab changes * update notebooks * fix generating status animation * fix weird table scrollbar that only appears on freddy's computer * format * fix dataset in gallery mode * cleanup * fix notebooks * tweaks * fix notebooks * change Co-authored-by: Ali Abid <aabid94@gmail.com>
56 lines
1.0 KiB
Svelte
56 lines
1.0 KiB
Svelte
<script lang="ts">
|
|
import { create_classes } from "@gradio/utils";
|
|
import type { Styles } from "@gradio/utils";
|
|
|
|
export let scale: number = 1;
|
|
export let min_width: number = 0;
|
|
export let elem_id: string = "";
|
|
export let visible: boolean = true;
|
|
export let variant: "default" | "panel" | "compact" = "default";
|
|
export let style: Styles = {};
|
|
</script>
|
|
|
|
<div
|
|
id={elem_id}
|
|
class:gap={style.gap !== false}
|
|
class:compact={variant === "compact"}
|
|
class:panel={variant === "panel"}
|
|
class:hide={!visible}
|
|
style={`min-width: min(${min_width}px, 100%); flex-grow: ${scale}`}
|
|
>
|
|
<slot />
|
|
</div>
|
|
|
|
<style>
|
|
div {
|
|
display: flex;
|
|
position: relative;
|
|
flex-direction: column;
|
|
}
|
|
|
|
div > :global(*),
|
|
div > :global(.form > *) {
|
|
width: var(--size-full);
|
|
}
|
|
|
|
.gap {
|
|
gap: var(--size-4);
|
|
}
|
|
|
|
.hide {
|
|
display: none;
|
|
}
|
|
|
|
.compact > :global(*),
|
|
.compact :global(.box) {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.compact,
|
|
.panel {
|
|
border-radius: var(--radius-lg);
|
|
background: var(--color-background-secondary);
|
|
padding: var(--size-2);
|
|
}
|
|
</style>
|