2022-03-24 07:36:07 +08:00
|
|
|
<script lang="ts">
|
2022-05-13 22:47:50 +08:00
|
|
|
import { create_classes } from "@gradio/utils";
|
2022-07-22 02:12:46 +08:00
|
|
|
import type { Styles } from "@gradio/utils";
|
2022-05-13 22:47:50 +08:00
|
|
|
|
2022-08-30 10:51:01 +08:00
|
|
|
export let scale: number = 1;
|
|
|
|
export let min_width: number = 0;
|
2022-05-12 12:40:41 +08:00
|
|
|
export let elem_id: string = "";
|
2022-06-17 07:49:54 +08:00
|
|
|
export let visible: boolean = true;
|
2022-10-04 07:01:41 +08:00
|
|
|
export let variant: "default" | "panel" | "compact" = "default";
|
2022-07-22 02:12:46 +08:00
|
|
|
export let style: Styles = {};
|
2022-03-25 14:03:47 +08:00
|
|
|
</script>
|
2022-03-24 07:36:07 +08:00
|
|
|
|
2022-04-22 17:19:59 +08:00
|
|
|
<div
|
2022-05-12 12:40:41 +08:00
|
|
|
id={elem_id}
|
2023-01-18 04:47:40 +08:00
|
|
|
class:gap={style.gap !== false}
|
|
|
|
class:compact={variant === "compact"}
|
|
|
|
class:panel={variant === "panel"}
|
|
|
|
class:hide={!visible}
|
2022-08-30 10:51:01 +08:00
|
|
|
style={`min-width: min(${min_width}px, 100%); flex-grow: ${scale}`}
|
2022-04-22 17:19:59 +08:00
|
|
|
>
|
2022-03-23 06:40:36 +08:00
|
|
|
<slot />
|
|
|
|
</div>
|
2023-01-18 04:47:40 +08:00
|
|
|
|
|
|
|
<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>
|