Bottom Sheets

Bottom sheets are surfaces containing supplementary content, anchored to the bottom of the screen.

insert content

insert content

Bottom Sheets

The following example is the default bottom sheets component. You have to add .show classes to show components. Use javascript or your favorite framework to add classes.

              
<!-- trigger bottom sheets -->
<button data-type="sheets" data-target="#sheets_sa">Show Sheets</button>

<!-- bottom sheets -->
<div id="sheets_sa" class="[&.show_.sheet]:translate-y-0">
  <!-- bottom sheets content -->
  <div class="sheet bottom-0 fixed left-0 right-0 z-[60] transition-transform translate-y-full duration-[400ms] flex flex-col items-center w-full sm:w-5/6 lg:w-2/3 gap-4 sm:mx-auto rounded-t-[28px] min-h-[40%] max-h-[60%] bg-surface-100 dark:bg-surfacedark-100 shadow-xl">
    <!-- close sheets -->
    <button data-close="#sheets_sa" class="absolute right-6 top-6">
      <span class="material-symbols-outlined ml-auto icon-active">close</span>
    </button>
    <div class="flex justify-center p-4 w-full h-9">
      <div class="w-8 h-1 opacity-40 bg-gray-500 rounded-full"></div>
    </div>
    
    <!-- content -->
    <div class="relative px-4 text-center">
       <p>insert content</p>
    </div>
  </div>
</div>

Bottom Sheets Dialogs

The following example is dialogs bottom sheets component. You have to add .show classes to show components. Use javascript or your favorite framework to add classes.

              
<!-- trigger bottom sheets dialogs -->
<button data-type="dialogs" data-target="#sheets_sb">Show Sheets</button>

<!-- bottom sheets dialogs -->
<div id="sheets_sb" class="[&.show_.bg-sheets]:opacity-60 [&.show_.bg-sheets]:inset-0 [&.show_.content-sheets]:translate-y-0">
  <!-- background sheets dialogs -->
  <div data-close="#sheets_sb" class="bg-sheets fixed z-[60] opacity-0 -top-full bg-black"></div>

  <!-- bottom sheets dialogs content -->
  <div class="content-sheets fixed left-0 right-0 bottom-0 z-[70] transition-transform translate-y-full duration-[400ms] flex flex-col items-center w-full md:w-5/6 lg:w-1/2 gap-3 sm:mx-auto rounded-t-[28px] min-h-[40%] max-h-[70%] bg-surface-100 dark:bg-surfacedark-100 shadow-xl">
    <div class="flex justify-center p-4 w-full h-9">
      <div class="w-8 h-1 opacity-40 bg-gray-500 rounded-full"></div>
    </div>

    <div class="relative px-4 text-center">
       <p>insert content</p>
    </div>
  </div>
</div>