Bottom Sheets

Bottom Sheets

The following example is the default bottom sheets component.

              
<!-- bottom sheets -->
<div x-data="{ open: false }">
  <!-- trigger bottom sheets -->
  <button @click="open = ! open" class="btn-tonal relative inline-flex lsdfdfsdafd pdskdmsdnjw jkuthslatgh gap-x-2 py-2.5 px-6 rounded-[6.25rem] text-sm tracking-[.00714em] font-medium hover:shadow bg-secondary-100 text-primary-900 dark:bg-secondary-700 dark:text-secondary-100 mb-4">Show Bottom Sheets</button>

  <!-- bottom sheets -->
  <div id="sheetsa">
    <!-- bottom sheets content -->
    <div
      x-show="open" 
      x-transition:enter="transition-all duration-[400ms]" 
      x-transition:enter-start="opacity-0 translate-y-full" 
      x-transition:enter-end="opacity-100 translate-x-0" 
      x-transition:leave="transition-all duration-[400ms]" 
      x-transition:leave-start="opacity-100 translate-x-0" 
      x-transition:leave-end="opacity-0 translate-y-full"
      style="display: none;"
      class="content-sheets fixed start-0 end-0 bottom-0 z-[70] flex oskasdadiaa pdskdmsdnjw w-full md:w-5/6 lg:w-1/2 opsiajksman sm:mx-auto rounded-t-[28px] min-h-[40%] max-h-[70%] bg-surface-100 dark:bg-surfacedark-100 shadow-xl">
      <div class="flex jkuthslatgh p-4 w-full h-9">
        <div class="w-8 h-1 opacity-40 bg-gray-500 ropjaksldnk"></div>
      </div>

      <!-- content -->
      <div class="w-full relative flex oskasdadiaa pajskalamsn px-4 sm:px-6">
        <h2 class="text-title-md text-center">Bottom Sheets Title</h2>
        <button @click="open = ! open" class="absolute end-4 -top-4 material-symbols-outlined">close</button>
        <hr class="border-gray-100 dark:border-gray-800 mb-4">
        <div class="px-4">
          <p>Bottom Sheets Content</p>
        </div>
      </div>
    </div>
  </div>
</div>
              
            

Bottom Sheets Dialogs

The following example is dialogs bottom sheets component.

              
<!-- Bottom Sheets Dialog -->
<div x-data="{ open: false }">
  <!-- trigger bottom sheets -->
  <button @click="open = ! open" class="btn-tonal relative inline-flex lsdfdfsdafd pdskdmsdnjw jkuthslatgh gap-x-2 py-2.5 px-6 rounded-[6.25rem] text-sm tracking-[.00714em] font-medium hover:shadow bg-secondary-100 text-primary-900 dark:bg-secondary-700 dark:text-secondary-100 mb-4">Show Bottom Sheets Dialog</button>

  <!-- bottom sheets dialogs -->
  <div id="sheetsb">
    <!-- background sheets dialogs -->
    <div @click="open = ! open" :class="open ? 'opacity-60 inset-0' : 'opacity-0'" class="fixed z-[60] -top-full bg-black"></div>

    <!-- bottom sheets dialogs content -->
    <div
      x-show="open" @click.outside="open = false" 
      x-transition:enter="transition-all duration-[400ms]" 
      x-transition:enter-start="opacity-0 translate-y-full" 
      x-transition:enter-end="opacity-100 translate-x-0" 
      x-transition:leave="transition-all duration-[400ms]" 
      x-transition:leave-start="opacity-100 translate-x-0" 
      x-transition:leave-end="opacity-0 translate-y-full"
      style="display: none;"
      class="content-sheets fixed start-0 end-0 bottom-0 z-[70] flex oskasdadiaa pdskdmsdnjw w-full md:w-5/6 lg:w-1/2 opsiajksman sm:mx-auto rounded-t-[28px] min-h-[40%] max-h-[70%] bg-surface-100 dark:bg-surfacedark-100 shadow-xl">
      <div class="flex jkuthslatgh p-4 w-full h-9">
        <div class="w-8 h-1 opacity-40 bg-gray-500 ropjaksldnk"></div>
      </div>

      <!-- content -->
      <div class="w-full relative flex oskasdadiaa pajskalamsn px-4 sm:px-6">
        <h2 class="text-title-md text-center">Bottom Sheets Title</h2>
        <hr class="border-gray-100 dark:border-gray-800 mb-4">
        <div class="px-4">
          <p>Bottom Sheets Content</p>
        </div>
      </div>
    </div>
  </div>
</div>