Skip to content

Latest commit

 

History

History
513 lines (494 loc) · 18.8 KB

dropdown.svelte.md

File metadata and controls

513 lines (494 loc) · 18.8 KB
Raw
title desc published
Dropdown
Dropdown can open a menu or any other element when the button is clicked.
true
<script> import Component from "@components/Component.svelte" import ClassTable from "@components/ClassTable.svelte" import { prefix } from '$lib/stores'; import { replace } from '$lib/actions'; </script>

We use a <label tabindex="0"> instead of a <button> because Safari has a bug that prevents the button from being focused.
Using tabindex="0" is required so the dropdown can be focused.
Click
  • Item 1
  • Item 2
{
`
  Click
  
    Item 1
    Item 2
  
`
}
{
`
  Click
  
    Item 1
    Item 2
  
`
}
Click
  • Item 1
  • Item 2
{
`
  Click
  
    Item 1
    Item 2
  
`
}
{
`
  Click
  
    Item 1
    Item 2
  
`
}
Click
  • Item 1
  • Item 2
{
`
  Click
  
    Item 1
    Item 2
  
`
}
{
`
  Click
  
    Item 1
    Item 2
  
`
}
Click
  • Item 1
  • Item 2
{
`
  Click
  
    Item 1
    Item 2
  
`
}
{
`
  Click
  
    Item 1
    Item 2
  
`
}
Click
  • Item 1
  • Item 2
{
`
  Click
  
    Item 1
    Item 2
  
`
}
{
`
  Click
  
    Item 1
    Item 2
  
`
}
Click
  • Item 1
  • Item 2
{
`
  Click
  
    Item 1
    Item 2
  
`
}
{
`
  Click
  
    Item 1
    Item 2
  
`
}
Click
  • Item 1
  • Item 2
{
`
  Click
  
    Item 1
    Item 2
  
`
}
{
`
  Click
  
    Item 1
    Item 2
  
`
}
Click
  • Item 1
  • Item 2
{
`
  Click
  
    Item 1
    Item 2
  
`
}
{
`
  Click
  
    Item 1
    Item 2
  
`
}
Click
  • Item 1
  • Item 2
{
`
  Click
  
    Item 1
    Item 2
  
`
}
{
`
  Click
  
    Item 1
    Item 2
  
`
}
Click
  • Item 1
  • Item 2
{
`
  Click
  
    Item 1
    Item 2
  
`
}
{
`
  Click
  
    Item 1
    Item 2
  
`
}
Hover
  • Item 1
  • Item 2
{
`
  Hover
  
    Item 1
    Item 2
  
`
}
{
`
  Hover
  
    Item 1
    Item 2
  
`
}
Button
  • Item 1
  • Item 2
{
`
  Button
  
    Item 1
    Item 2
  
`
}
{
`
  Button
  
    Item 1
    Item 2
  
`
}
Click

Card title!

you can use any element as a dropdown.

{
`
  Click
  
    
      Card title!
      you can use any element as a dropdown.
    
  
`
}
{
`
  Click
  
    
      Card title!
      you can use any element as a dropdown.
    
  
`
}
daisyUI
Button
Dropdown
  • Item 1
  • Item 2
{
`
  
    daisyUI
   
  
    
      Button
      
        Dropdown
        
          Item 1 
          Item 2
        
      
    
  
`
}
{
`
  
    daisyUI
   
  
    
      Button
      
        Dropdown
        
          Item 1 
          Item 2
        
      
    
  
`
}
A normal text and a helper dropdown

You needed more info?

Here is a description!

{
`A normal text and a helper dropdown

  
    
  
  
    
      You needed more info? 
      Here is a description!
    
  
`
}
{
`A normal text and a helper dropdown

  
    
  
  
    
      You needed more info? 
      Here is a description!
    
  
`
}