svelte icon Svelte 5 UI lib
  • Coverage
  • About
  • Repo

Popover

Setup

<script lang="ts">
	import { Popover, Button } from 'svelte-5-ui-lib';
</script>

Interactive Popover Builder

<Button id="demo">Popover</Button>
<Popover titleSlot="Popover title" triggeredBy="#demo" >
  My Popover content
</Popover>

Title slot

<script lang="ts">
	import { Button, Popover } from 'svelte-5-ui-lib';
</script>

<div class="flex h-40 items-end justify-center">
	<Button id="titleSlot">Default popover</Button>
	<Popover class="w-64 text-sm font-light" triggeredBy="#titleSlot">
		{#snippet titleSlot()}
			<div class="rounded-t-md bg-sky-200 p-2 text-lg font-bold text-sky-600">
				titleSlot snippet
			</div>
		{/snippet}
		<p class="px-3 py-2">And here's some amazing content. It's very engaging. Right?</p>
	</Popover>
</div>

User profile

<script lang="ts">
	import { Button, Popover, Avatar } from 'svelte-5-ui-lib';
</script>

<div class="flex h-64 items-end justify-center">
	<Button id="user_profile" class="-mb-2">User profile</Button>
	<Popover
		triggeredBy="#user_profile"
		class="w-64 bg-white text-sm font-light text-gray-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400"
	>
		<div class="p-6">
			<div class="mb-2 flex items-center justify-between">
				<Avatar href="/" src="/images/profile-picture-1.webp" alt="Jese Leos" />
				<Button size="xs">Follow</Button>
			</div>
			<div class="text-base leading-none font-semibold text-gray-900 dark:text-white">
				<a href="/">Jese Leos</a>
			</div>
			<div class="mb-3 text-sm font-normal">
				<a href="/" class="hover:underline">@jeseleos</a>
			</div>
			<div class="mb-4 text-sm font-light">
				Open-source contributor. Building <a
					href="/"
					class="text-primary-600 dark:text-primary-500 hover:underline">flowbite.com</a
				>
				.
			</div>
			<ul class="flex text-sm font-light">
				<li class="me-2">
					<a href="/" class="hover:underline">
						<span class="font-semibold text-gray-900 dark:text-white">799</span>
						<span>Following</span>
					</a>
				</li>
				<li>
					<a href="/" class="hover:underline">
						<span class="font-semibold text-gray-900 dark:text-white">3,758</span>
						<span>Followers</span>
					</a>
				</li>
			</ul>
		</div>
	</Popover>
</div>

Company profile

<script>
	import { Popover, Button, Avatar } from 'svelte-5-ui-lib';
	import {
		GlobeOutline,
		HeartSolid,
		ThumbsUpSolid,
		DotsHorizontalOutline
	} from 'flowbite-svelte-icons';
</script>

<div class="flex h-80 items-end justify-center">
	<Button id="demo" class="-mb-4">Company profile</Button>
	<Popover triggeredBy="#demo" class="w-80 text-sm">
		<div class="flex p-3">
			<div class="me-3 shrink-0">
				<a
					href="/"
					aria-label="popover-example"
					class="block rounded-lg bg-gray-100 p-2 dark:bg-gray-700"
				>
					<img
						class="h-8 w-8 rounded-full"
						src="/images/flowbite-svelte-icons-logo.svg"
						alt="Flowbite logo"
					/>
				</a>
			</div>
			<div>
				<p class="mb-1 text-base leading-none font-semibold text-gray-900 dark:text-white">
					<a href="/" class="hover:underline">Flowbite</a>
				</p>
				<p class="mb-3 text-sm font-normal">Tech company</p>
				<p class="mb-4 text-sm font-light">
					Open-source library of Tailwind CSS components and Figma design system.
				</p>
				<ul class="text-sm font-light">
					<li class="mb-2 flex items-center">
						<GlobeOutline class="me-2 h-3.5 w-3.5" />
						<a href="/" class="text-primary-600 dark:text-primary-500 hover:underline"
							>https://flowbite.com/</a
						>
					</li>
					<li class="mb-2 flex items-start">
						<HeartSolid class="me-2 h-5 w-5" />
						<span>4,567,346 people like this including 5 of your friends</span>
					</li>
				</ul>
				<div class="ms-4 mb-3 flex">
					<Avatar src="/images/profile-picture-1.webp" stacked />
					<Avatar src="/images/profile-picture-2.webp" stacked />
					<Avatar src="/images/profile-picture-3.webp" stacked />
					<Avatar stacked href="/" class="bg-gray-700 text-white hover:bg-gray-600 dark:bg-gray-700"
						>+3</Avatar
					>
				</div>
				<div class="flex">
					<Button color="alternative" class="me-2 w-full">
						<ThumbsUpSolid class="me-2" />
						Like page
					</Button>
					<Button color="alternative">
						<DotsHorizontalOutline class="h-3.5 w-3.5" />
					</Button>
				</div>
			</div>
		</div>
	</Popover>
</div>

Image

Due to its central geographic location in Southern Europe, Italy has historically been home to myriad peoples and cultures. In addition to the various ancient peoples dispersed throughout what is now modern-day Italy, the most predominant being the Indo-European Italic peoples who gave the peninsula its name, beginning from the classical era, Phoenicians and Carthaginians founded colonies mostly in insular Italy

<script>
	import { Popover } from 'svelte-5-ui-lib';
	import { ChevronRightOutline } from 'flowbite-svelte-icons';
</script>

<div class="flex h-80 items-end">
	<p class="font-light text-gray-500 dark:text-gray-400">
		Due to its central geographic location in Southern Europe, <a
			href="/"
			class="text-primary-600 dark:text-primary-500 underline hover:no-underline"
			id="popover-image">Italy</a
		>
		has historically been home to myriad peoples and cultures. In addition to the various ancient peoples
		dispersed throughout what is now modern-day Italy, the most predominant being the Indo-European Italic
		peoples who gave the peninsula its name, beginning from the classical era, Phoenicians and Carthaginians
		founded colonies mostly in insular Italy
	</p>
	<Popover triggeredBy="#popover-image" class="w-96 text-sm font-light">
		<div class="grid grid-cols-5">
			<div class="col-span-3 p-3">
				<div class="space-y-2">
					<h3 class="font-semibold text-gray-900 dark:text-white">
						About Italy
						<p class="text-gray-500 dark:text-gray-500">
							Italy is located in the middle of the Mediterranean Sea, in Southern Europe it is also
							considered part of Western Europe. A unitary parliamentary republic with Rome as its
							capital and largest city.
						</p>
						<a
							href="/"
							class="text-primary-600 hover:text-primary-700 dark:text-primary-500 dark:hover:text-primary-600 flex items-center font-medium"
						>
							Read more <ChevronRightOutline
								class="text-primary-600 dark:text-primary-500 ms-1.5 h-2 w-2"
							/>
						</a>
					</h3>
				</div>
			</div>
			<img src="/images/italy.png" class="col-span-2 h-full rounded-e-lg" alt="Italy map" />
		</div>
	</Popover>
</div>

Description

This is just some informational text 
<script>
	import { Popover } from 'svelte-5-ui-lib';
	import { QuestionCircleSolid, ChevronRightOutline } from 'flowbite-svelte-icons';
</script>

<div class="h-80">
	<div class="flex items-center text-sm font-light text-gray-500 dark:text-gray-400">
		This is just some informational text
		<button id="b3">
			<QuestionCircleSolid class="ms-1.5 h-5 w-5" />
			<span class="sr-only">Show information</span>
		</button>
	</div>
	<Popover
		arrow={false}
		triggeredBy="#b3"
		class="w-72 bg-white p-3 text-sm font-light text-gray-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400"
		position="bottom-start"
	>
		<div class="space-y-2 p-3">
			<h3 class="font-semibold text-gray-900 dark:text-white">Activity growth - Incremental</h3>
			Report helps navigate cumulative growth of community activities. Ideally, the chart should have
			a growing trend.
			<h3 class="font-semibold text-gray-900 dark:text-white">Calculation</h3>
			For each date bucket, the all-time volume of activities is calculated. This means that activities
			in period n contain all activities up to period n.
			<a
				href="/"
				class="text-primary-600 hover:text-primary-700 dark:text-primary-500 dark:hover:text-primary-600 flex items-center font-medium"
			>
				Read more <ChevronRightOutline
					class="text-primary-600 dark:text-primary-500 ms-1.5 h-4 w-4"
				/>
			</a>
		</div>
	</Popover>
</div>

Progress

<script>
	import { Popover, Button } from 'svelte-5-ui-lib';
	import { DatabaseSolid, ChevronRightOutline } from 'flowbite-svelte-icons';
</script>

<div class="flex h-40 items-end justify-center">
	<Button id="progress">
		<DatabaseSolid class="me-2 h-5 w-5 text-white dark:text-white" /> Storage status
	</Button>
	<Popover triggeredBy="#progress" class="w-64 p-3 text-sm font-light">
		<div class="space-y-2">
			<h3 class="font-semibold text-gray-900 dark:text-white">Available storage</h3>
			<p class="text-gray-500 dark:text-gray-400">
				This server has <span class="font-semibold text-gray-900 dark:text-white">30</span>
				of
				<span class="font-semibold text-gray-900 dark:text-white">150 GB</span>
				of block storage remaining.
			</p>
			<div class="mb-4 h-2.5 w-full rounded-full bg-gray-200 dark:bg-gray-700">
				<div class="h-2.5 rounded-full bg-red-600" style="width: 85%"></div>
			</div>
			<a
				href="/"
				class="text-primary-600 hover:text-primary-700 dark:text-primary-500 dark:hover:text-primary-600 flex items-center font-medium"
			>
				Upgrade now <ChevronRightOutline
					class="text-primary-600 dark:text-primary-500 ms-1.5 h-4 w-4"
				/>
			</a>
		</div>
	</Popover>
</div>

Password

<script lang="ts">
	import { Popover, Label, Input, Checkbox, Button } from 'svelte-5-ui-lib';
	import { CheckOutline, CloseOutline } from 'flowbite-svelte-icons';
</script>

<form class="mb-8">
	<div class="mb-6">
		<Label for="email" class="mb-2">Your email</Label>
		<Input type="email" id="email" placeholder="name@flowbite.com" required />
	</div>
	<div class="mb-6">
		<Label for="password" class="mb-2">Your password</Label>
		<Input type="password" id="password" required />
	</div>
	<Checkbox class="mb-6">Remember me</Checkbox>
	<Button type="submit">Submit</Button>
</form>
<Popover arrow={false} class="p-4 text-sm" triggeredBy="#password" position="bottom">
	<h3 class="font-semibold text-gray-900 dark:text-white">Must have at least 6 characters</h3>
	<div class="grid grid-cols-4 gap-2">
		<div class="h-1 bg-orange-300 dark:bg-orange-400"></div>
		<div class="h-1 bg-orange-300 dark:bg-orange-400"></div>
		<div class="h-1 bg-gray-200 dark:bg-gray-600"></div>
		<div class="h-1 bg-gray-200 dark:bg-gray-600"></div>
	</div>
	<p class="py-2">It’s better to have:</p>
	<ul>
		<li class="mb-1 flex items-center">
			<CheckOutline class="me-2 h-4 w-4 text-green-400 dark:text-green-500" />
			Upper &amp; lower case letters
		</li>
		<li class="mb-1 flex items-center">
			<CheckOutline class="me-2 h-4 w-4 text-green-400 dark:text-green-500" />
			A symbol (#$&amp;)
		</li>
		<li class="flex items-center">
			<CloseOutline class="me-2 h-4 w-4 text-gray-300 dark:text-gray-400" />A longer password (min.
			12 chars.)
		</li>
	</ul>
</Popover>

External reference

External reference
<script lang="ts">
	import { Button, Popover } from 'svelte-5-ui-lib';
</script>

<div class="m-4 flex justify-center">
	<div id="ext-ref" class=" m-8 w-40 rounded-lg border border-gray-200 p-2 dark:border-gray-600">
		External reference
	</div>
</div>
<div class="space-x-4 rtl:space-x-reverse">
	<Button id="ref-left">Left</Button>
	<Button id="ref-top">Top</Button>
	<Button id="ref-right">Right</Button>
</div>
<Popover
	reference="#ext-ref"
	color="emerald"
	triggeredBy="#ref-left"
	position="left"
	class="w-40 p-4 text-sm font-light">Popover content.</Popover
>
<Popover
	reference="#ext-ref"
	color="cyan"
	triggeredBy="#ref-top"
	position="top"
	class="w-40 p-4 text-sm font-light">Popover content.</Popover
>
<Popover
	reference="#ext-ref"
	color="pink"
	triggeredBy="#ref-right"
	position="right"
	class="w-40 p-4 text-sm font-light">Popover content.</Popover
>

Component data

codewithshin.com
  • Repo
  • About