RapidRails UI Book
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<div class="space-y-8">
  <div class="p-4 rounded border">
    <h3 class="mb-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Dropdown Preview</h3>
    <div id="dropdown_a4b046df" class="relative inline-block w-fit"
     data-controller="rapidrailsui--dropdown"
     data-rapidrailsui--dropdown-trigger-value="click"
     data-rapidrailsui--dropdown-disabled-value="false"
     data-rapidrailsui--dropdown-selection-mode-value="false"
     data-rapidrailsui--dropdown-prompt-text-value="Select an option"
     data-rapidrailsui--dropdown-placement-value="bottom"
     data-action="click@document->rapidrailsui--dropdown#clickOutside">
      <button type="button"
          id="dropdown_a4b046df_trigger"
          class="inline-flex items-center justify-between gap-x-1.5 duration-200 border bg-zinc-500/30 hover:bg-zinc-500/50 border-zinc-500/20 text-zinc-700 hover:text-zinc-800
        focus:ring-2 focus:outline-none focus:ring-zinc-300 dark:focus:ring-zinc-800
        dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-700/80 dark:hover:text-zinc-300 text-sm px-3 py-2 rounded-md"
          data-rapidrailsui--dropdown-target="trigger"
          data-action="click->rapidrailsui--dropdown#toggle"
        aria-expanded="false"
        aria-haspopup="true"
        aria-controls="dropdown_a4b046df_menu"
        aria-labelledby=""
        aria-required="false"
        aria-invalid="false"
        >
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 shrink-0" role="img" focusable="false" aria-labelledby="icon-title-bookmark icon-desc-bookmark"><title id="icon-title-bookmark">Bookmark</title>
          <desc id="icon-desc-bookmark">Bookmark icon</desc>
          <path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"></path>
        </svg>
        <span class="whitespace-nowrap overflow-hidden overflow-ellipsis flex-grow text-current" data-rapidrailsui--dropdown-target="buttonText">Select an option</span>
        <svg class="ml-2 -mr-1 h-5 w-5 text-current" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
        </svg>
      </button>
      <div id="dropdown_a4b046df_menu"
       class="absolute z-10 p-1 focus:outline-none w-48 rounded-md shadow-sm bg-zinc-50  border border-zinc-200 hover:border-zinc-200 text-zinc-900 
        dark:bg-zinc-700 dark:border dark:border-zinc-600 hover:border-zinc-600 dark:text-zinc-100
         hidden"
       data-rapidrailsui--dropdown-target="menu"
       data-action="keydown.escape->rapidrailsui--dropdown#handleEscape keydown.arrow-down->rapidrailsui--dropdown#navigateDown keydown.arrow-up->rapidrailsui--dropdown#navigateUp"
        role="menu"
        aria-orientation="vertical"
        aria-labelledby="dropdown_a4b046df_trigger"
        tabindex="-1">
        <div class="w-full" role="none">
          <button class="block w-full p-2 hover:bg-zinc-100 dark:hover:bg-zinc-600 hover:text-zinc-900 dark:hover:text-zinc-100 rounded-md   w-full text-left text-sm px-3 py-2" role="menuitem" tabindex="-1" type="button" data-action="click->rapidrailsui--dropdown#selectItem" data-value="1" data-text="Dashboard">
            <div class="flex items-center w-full">
              <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 mr-2 shrink-0" role="img" focusable="false" aria-labelledby="icon-title-house icon-desc-house"><title id="icon-title-house">House</title>
                <desc id="icon-desc-house">House icon</desc>
                <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path>
                <path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
              </svg>
              Dashboard
            </div>
          </button>
          <button class="block w-full p-2 hover:bg-zinc-100 dark:hover:bg-zinc-600 hover:text-zinc-900 dark:hover:text-zinc-100 rounded-md   w-full text-left text-sm px-3 py-2" role="menuitem" tabindex="-1" type="button" data-action="click->rapidrailsui--dropdown#selectItem" data-value="2" data-text="Profile">
            <div class="flex items-center w-full">
              <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 mr-2 shrink-0" role="img" focusable="false" aria-labelledby="icon-title-user icon-desc-user"><title id="icon-title-user">User</title>
                <desc id="icon-desc-user">User icon</desc>
                <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
                <circle cx="12" cy="7" r="4"></circle>
              </svg>
              Profile
            </div>
          </button>
          <button class="block w-full p-2 hover:bg-zinc-100 dark:hover:bg-zinc-600 hover:text-zinc-900 dark:hover:text-zinc-100 rounded-md   w-full text-left text-sm px-3 py-2" role="menuitem" tabindex="-1" type="button" data-action="click->rapidrailsui--dropdown#selectItem" data-value="3" data-text="Settings">
            <div class="flex items-center w-full">
              <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 mr-2 shrink-0" role="img" focusable="false" aria-labelledby="icon-title-cog icon-desc-cog"><title id="icon-title-cog">Cog</title>
                <desc id="icon-desc-cog">Cog icon</desc>
                <path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"></path>
                <path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"></path>
                <path d="M12 2v2"></path>
                <path d="M12 22v-2"></path>
                <path d="m17 20.66-1-1.73"></path>
                <path d="M11 10.27 7 3.34"></path>
                <path d="m20.66 17-1.73-1"></path>
                <path d="m3.34 7 1.73 1"></path>
                <path d="M14 12h8"></path>
                <path d="M2 12h2"></path>
                <path d="m20.66 7-1.73 1"></path>
                <path d="m3.34 17 1.73-1"></path>
                <path d="m17 3.34-1 1.73"></path>
                <path d="m11 13.73-4 6.93"></path>
              </svg>
              Settings
            </div>
          </button>
          <button class="block w-full p-2 hover:bg-red-100 dark:hover:bg-red-600 hover:text-red-900 dark:hover:text-red-100 rounded-md text-red-700 dark:text-red-300  w-full text-left text-sm px-3 py-2" role="menuitem" tabindex="-1" type="button" data-action="click->rapidrailsui--dropdown#selectItem" data-value="4" data-text="Logout">
            <div class="flex items-center w-full">
              <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 mr-2 text-red-700 dark:text-red-300 shrink-0" role="img" focusable="false" aria-labelledby="icon-title-log-out icon-desc-log-out"><title id="icon-title-log-out">Log-out</title>
                <desc id="icon-desc-log-out">Log-out icon</desc>
                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
                <polyline points="16 17 21 12 16 7"></polyline>
                <line x1="21" x2="9" y1="12" y2="12"></line>
              </svg>
              Logout
            </div>
          </button>    </div>
      </div>
    </div>
  </div>
  <div class="p-4 mt-4 text-gray-800 bg-white rounded-lg shadow dark:bg-gray-800 dark:text-gray-200">
    <h3 class="mb-2 text-lg font-semibold">Component Parameters:</h3>
    <ul class="list-disc list-inside">
      <li>Text: Select an option</li>
      <li>Color: primary</li>
      <li>Variant: solid</li>
      <li>Size: md</li>
      <li>Shape: rounded</li>
      <li>Width: md</li>
      <li>Placement: bottom</li>
      <li>Trigger: click</li>
      <li>Disabled: false</li>
      <li>Icon: bookmark</li>
      <li>Avatar: None</li>
    </ul>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<div class="space-y-8">
  <div class="p-4 rounded border">
    <h3 class="mb-2 text-lg font-semibold text-gray-800 dark:text-gray-200">Dropdown Preview</h3>
    <%= rui_dropdown(
      text: text,
      color: color,
      variant: variant,
      size: size,
      shape: shape,
      width: width,
      placement: placement,
      trigger: trigger,
      disabled: disabled,
      icon: icon,
      avatar: avatar,
      items: [
        { text: "Dashboard", value: "1", icon: "house" },
        { text: "Profile", value: "2", icon: "user" },
        { text: "Settings", value: "3", icon: "cog" },
        { text: "Logout", value: "4", color: :danger, icon: "log-out" }
      ]
    ) %>
  </div>
  <div class="p-4 mt-4 text-gray-800 bg-white rounded-lg shadow dark:bg-gray-800 dark:text-gray-200">
    <h3 class="mb-2 text-lg font-semibold">Component Parameters:</h3>
    <ul class="list-disc list-inside">
      <li>Text: <%= text %></li>
      <li>Color: <%= color %></li>
      <li>Variant: <%= variant %></li>
      <li>Size: <%= size %></li>
      <li>Shape: <%= shape %></li>
      <li>Width: <%= width %></li>
      <li>Placement: <%= placement %></li>
      <li>Trigger: <%= trigger %></li>
      <li>Disabled: <%= disabled %></li>
      <li>Icon: <%= icon || 'None' %></li>
      <li>Avatar: <%= avatar || 'None' %></li>
    </ul>
  </div>
</div>

🎉 Dropdown Component Playground! 🎉

Welcome to the playground! Here you can experiment with different configurations to see how your dropdowns will look and behave.

How to Use:

  1. Use the controls in the 'Params' section to customize your dropdown.
  2. Watch the preview update in real-time as you make changes.
  3. Experiment with different combinations to find what works best for your app!
Param Description Input

Dropdown text

Dropdown color

Dropdown variant

Dropdown size

Dropdown shape

Dropdown width

Dropdown placement

Dropdown trigger

Disable dropdown?

Dropdown icon

Dropdown avatar URL