Sha256: 04b0c5178749069c920bd1902b6263d2574ee4d2ee845029c2dc5cb5923255f3
Contents?: true
Size: 1.75 KB
Versions: 60
Compression:
Stored size: 1.75 KB
Contents
# Dropdown
## UI
https://tailwindcomponents.com/component/select-with-custom-list
## Usage
### Simple, without custom HTML
```slim
= f.input :account_id, collection: policy_scope(Account).with(@user.account_id), as: :dropdown
```
### Simple, with custom HTML
```slim
= f.input :account_id, collection: policy_scope(Account).with(@user.account_id), as: :dropdown do |account|
.cursor-pointer.w-full.border-gray-100.border-b.hover:bg-primary-200
.flex.w-full.items-center.p-2.pl-2.border-transparent.border-l-2.hover:border-teal-100
.w-full.items-center.flex
.mx-2.-mt-1
span = account.name
.text-xs.truncate.w-full.normal-case.font-normal.-mt-1.text-gray-500 = account.name
```
### Remote select, which always needs custom HTML
```
= f.input :location_id, url: select_locations_url(format: :html), url_params: { account_id: "[order][account_id]" }, as: :dropdown
= f.association :location, url: select_locations_url(format: :html), url_params: { account_id: "[order][account_id]" }
```
The url will be called with format :html, and either a params[:term] or a params[:id], both searches need to be supported.
This `select.html.slim` should look like this, note the extra div with id/name information:
```
- @locations.each do |location|
div data-satis-dropdown-item-value=location.id data-satis-dropdown-item-text=location.name
.cursor-pointer.w-full.border-gray-100.rounded-t.border-b.hover:bg-primary-200
.flex.w-full.items-center.p-2.pl-2.border-transparent.border-l-2.hover:border-teal-100
.w-full.items-center.flex
.mx-2.-mt-1
span = location.name
```
Any attributes on above item div (other than the data-satis attributes) will be copied to the hidden input upon select.
Version data entries
60 entries across 60 versions & 1 rubygems