Drawer Bottom
<section class="bg-white p-4">
<div class="relative w-full">
<input id="my-drawer-bottom" type="checkbox" class="sr-only peer">
<!-- 主要内容 -->
<div class="w-full transition-all duration-300">
<div class="max-w-md mx-auto">
<div class="mb-8">
<h1 class="text-2xl font-bold text-gray-900 mb-2">Bottom Drawer</h1>
<p class="text-gray-600">
This component demonstrates a drawer that slides up from the bottom of the screen.
It's commonly used for mobile interfaces, action sheets, or contextual controls.
</p>
</div>
<div class="space-y-6">
<div class="bg-blue-50 border border-blue-100 p-4 rounded-lg">
<h3 class="font-medium text-blue-800 mb-2">Common Use Cases</h3>
<ul class="text-sm text-blue-700 space-y-1 pl-5 list-disc">
<li>Mobile navigation menus</li>
<li>Selection/filter interfaces</li>
<li>Action sheets and quick options</li>
<li>Media players or playback controls</li>
<li>Additional context for the current view</li>
</ul>
</div>
<label for="my-drawer-bottom" class="btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md inline-flex items-center justify-center cursor-pointer">
Open Bottom Drawer
</label>
<div class="mt-8">
<h3 class="text-lg font-medium text-gray-800 mb-4">Example Demo</h3>
<p class="text-gray-600 mb-3">
Click the button above to see the bottom drawer in action. This pattern is particularly useful
on mobile devices where screen space is limited and ergonomics favor interactions near
the bottom of the screen.
</p>
<p class="text-gray-600">
Bottom drawers can have different heights based on their content and can sometimes
be draggable to allow users to adjust how much content is visible.
</p>
</div>
</div>
</div>
</div>
<!-- 背景遮罩 -->
<label for="my-drawer-bottom" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden peer-checked:block cursor-pointer"></label>
<!-- 底部抽屉 -->
<div class="fixed inset-x-0 bottom-0 h-auto max-h-[85vh] bg-white rounded-t-xl shadow-xl z-50 transform translate-y-full transition-transform duration-300 peer-checked:translate-y-0 overflow-auto">
<div class="p-5">
<!-- 把手/拉环 -->
<div class="flex justify-center mb-5">
<div class="w-10 h-1 bg-gray-300 rounded-full"></div>
</div>
<!-- 抽屉标题 -->
<div class="flex items-center justify-between mb-6">
<h2 class="text-lg font-semibold text-gray-900">Select an Option</h2>
<label for="my-drawer-bottom" class="p-1 rounded-full hover:bg-gray-100 cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</label>
</div>
<!-- 抽屉内容 -->
<div class="space-y-3 mb-6">
<button class="w-full flex items-center p-3 hover:bg-gray-50 rounded-lg text-gray-700">
<div class="bg-blue-100 text-blue-600 h-10 w-10 rounded-full flex items-center justify-center mr-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
</div>
<div class="text-left">
<p class="font-medium">Upload Photo</p>
<p class="text-xs text-gray-500">Share a new photo with your followers</p>
</div>
</button>
<button class="w-full flex items-center p-3 hover:bg-gray-50 rounded-lg text-gray-700">
<div class="bg-purple-100 text-purple-600 h-10 w-10 rounded-full flex items-center justify-center mr-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
</svg>
</div>
<div class="text-left">
<p class="font-medium">Record Video</p>
<p class="text-xs text-gray-500">Capture and share a video moment</p>
</div>
</button>
<button class="w-full flex items-center p-3 hover:bg-gray-50 rounded-lg text-gray-700">
<div class="bg-green-100 text-green-600 h-10 w-10 rounded-full flex items-center justify-center mr-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
</div>
<div class="text-left">
<p class="font-medium">Create Document</p>
<p class="text-xs text-gray-500">Start a new document or note</p>
</div>
</button>
<button class="w-full flex items-center p-3 hover:bg-gray-50 rounded-lg text-gray-700">
<div class="bg-yellow-100 text-yellow-600 h-10 w-10 rounded-full flex items-center justify-center mr-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
</div>
<div class="text-left">
<p class="font-medium">Schedule Event</p>
<p class="text-xs text-gray-500">Add a new event to your calendar</p>
</div>
</button>
</div>
<label for="my-drawer-bottom" class="block w-full px-4 py-2.5 bg-gray-100 hover:bg-gray-200 text-gray-800 text-center font-medium rounded-md cursor-pointer">
Cancel
</label>
</div>
</div>
</div>
</section>
Copied to clipboard