Examples
Floating Elements
Examples of how to use Folium Sheet as floating elements
Floating Elements
Folium Sheet can also be used as floating elements that can be placed around the screen and not only on the edges of the screen
Card Example
We can create a floating card that appears frmo the bottom of the screen using the same components,
we can use isDetached prop to make this card float, and separation from the screeen edges using screenSeparation prop.
"use client";
import { Drawer } from "folium"; "use client";
import {
DrawerContent,
DrawerRoot,
DrawerTrigger,
DrawerDescription,
DrawerClose,
DrawerTitle,
} from "folium/wrapper";
import { useState } from "react";
import Image from "next/image";
import { useMediaQuery } from "folium/hooks";
import { IoCloseCircle as Close } from "react-icons/io5";
export function Card() {
const isMobile = useMediaQuery("(max-width: 768px)");
return (
<div className="w-full flex items-center justify-center p-4">
<DrawerRoot
borderRadius={16}
isDetached
screenSeparation={isMobile ? 16 : "50%"}
>
<DrawerTrigger>
<button
className="button"
>
Open Card
</button>
</DrawerTrigger>
<DrawerContent
backdropProps={{
className: "z-50"
}}
className="bg-content1 h-fit min-h-120 bottom-2 left-2 right-2 md:fixed
md:inset-0 md:m-auto max-w-xl mx-auto flex justify-center p-4 fixed
rounded-3xl outline-none z-60"
>
<div
className="flex flex-col h-full items-center gap-2 max-w-md"
>
<div className="bg-content3 rounded-full w-25 h-2 mb-6" />
<Image
src="/placeholders/food.jpg"
alt="Food"
width={300}
height={300}
draggable={false}
className="rounded-2xl"
/>
<DrawerTitle>
<span className="font-extrabold text-3xl">
Your food is on the way
</span>
</DrawerTitle>
<DrawerDescription asChild>
<p className="font-semibold text-neutral-400 text-center">
Your order has been placed successfully. You can track the
delivery in real-time from the orders section.
</p>
</DrawerDescription>
<DrawerClose>
<button
className="button rounded-full p-0 bg-transparent absolute top-4
right-4"
aria-label="Close card"
>
<Close className="text-2xl text-neutral-400" />
</button>
</DrawerClose>
</div>
</DrawerContent>
</DrawerRoot>
</div>
);
}Card Example from top
We can also support the inital opening from the top of the screen changing the direction prop to top.
"use client";
import { Drawer } from "folium"; "use client";
import {
DrawerContent,
DrawerRoot,
DrawerTrigger,
DrawerDescription,
DrawerClose,
DrawerTitle,
} from "folium/wrapper";
import { useState } from "react";
import Image from "next/image";
import { useMediaQuery } from "folium/hooks";
import { IoCloseCircle as Close } from "react-icons/io5";
export function Card() {
const isMobile = useMediaQuery("(max-width: 768px)");
return (
<div className="w-full flex items-center justify-center p-4">
<DrawerRoot
borderRadius={16}
isDetached
direction="top"
screenSeparation={isMobile ? 16 : "50%"}
>
<DrawerTrigger>
<button
className="button"
>
Open Card
</button>
</DrawerTrigger>
<DrawerContent
backdropProps={{
className: "z-50"
}}
className="bg-content1 h-fit min-h-120 bottom-2 left-2 right-2 md:fixed
md:inset-0 md:m-auto max-w-xl mx-auto flex justify-center p-4 fixed
rounded-3xl outline-none z-60"
>
<div
className="flex flex-col h-full items-center gap-2 max-w-md"
>
<div className="bg-content3 rounded-full w-25 h-2 mb-6" />
<Image
src="/placeholders/food.jpg"
alt="Food"
width={300}
height={300}
draggable={false}
className="rounded-2xl"
/>
<DrawerTitle>
<span className="font-extrabold text-3xl">
Your food is on the way
</span>
</DrawerTitle>
<DrawerDescription asChild>
<p className="font-semibold text-neutral-400 text-center">
Your order has been placed successfully. You can track the
delivery in real-time from the orders section.
</p>
</DrawerDescription>
<DrawerClose>
<button
className="button rounded-full p-0 bg-transparent absolute top-4
right-4"
aria-label="Close card"
>
<Close className="text-2xl text-neutral-400" />
</button>
</DrawerClose>
</div>
</DrawerContent>
</DrawerRoot>
</div>
);
}Note
The default behavior of the Sheet makes and ::after elements that allows to pull the Sheet upwards.
But in this examples, this would make a bad UI, so in order to hide you can use the isDetached prop.
Check the examples below how the component looks with and without this element.