gradio

1
<script lang="ts">
2
	export let label: string | null = null;
3
	export let Icon: any;
4
	export let show_label = true;
5
	export let disable = false;
6
	export let float = true;
7
</script>
8

9
<label
10
	for=""
11
	class:hide={!show_label}
12
	class:sr-only={!show_label}
13
	class:float
14
	class:hide-label={disable}
15
	data-testid="block-label"
16
>
17
	<span>
18
		<Icon />
19
	</span>
20
	{label}
21
</label>
22

23
<style>
24
	label {
25
		display: inline-flex;
26
		align-items: center;
27
		z-index: var(--layer-2);
28
		box-shadow: var(--block-label-shadow);
29
		border: var(--block-label-border-width) solid var(--border-color-primary);
30
		border-top: none;
31
		border-left: none;
32
		border-radius: var(--block-label-radius);
33
		background: var(--block-label-background-fill);
34
		padding: var(--block-label-padding);
35
		pointer-events: none;
36
		color: var(--block-label-text-color);
37
		font-weight: var(--block-label-text-weight);
38
		font-size: var(--block-label-text-size);
39
		line-height: var(--line-sm);
40
	}
41
	:global(.gr-group) label {
42
		border-top-left-radius: 0;
43
	}
44

45
	label.float {
46
		position: absolute;
47
		top: var(--block-label-margin);
48
		left: var(--block-label-margin);
49
	}
50
	label:not(.float) {
51
		position: static;
52
		margin-top: var(--block-label-margin);
53
		margin-left: var(--block-label-margin);
54
	}
55

56
	.hide {
57
		height: 0;
58
	}
59

60
	span {
61
		opacity: 0.8;
62
		margin-right: var(--size-2);
63
		width: calc(var(--block-label-text-size) - 1px);
64
		height: calc(var(--block-label-text-size) - 1px);
65
	}
66
	.hide-label {
67
		box-shadow: none;
68
		border-width: 0;
69
		background: transparent;
70
		overflow: visible;
71
	}
72
</style>
73