Project update:
- The dropdown now can utilise
Phoenix.Liveview.JS if you don’t want to use Alpine. However, this only works in live views or live components (dead views will need Alpine).
- Function components are imported so you don’t need the module anymore - eg
<.button> instead of <Button.button>
New components
Form fields
You can write form fields like this:
<.form_label form={f} field={:name} />
<.text_input form={f} field={:name} placeholder="eg. John" />
<.form_field_error form={f} field={:name} class="mt-1" />
Or as one component that includes a label and error automatically:
<.form_field
type="text_input"
form={f}
field={:name}
placeholder="eg. John"
/>
Alerts
<.alert state="success" label="This is a success state" />
Dropdowns
<.dropdown label="Dropdown" js_lib="alpine_js | live_view_js">
<.dropdown_menu_item type="button">
<Heroicons.Outline.home class="w-5 h-5 text-gray-500" />
Button item with icon
</.dropdown_menu_item>
<.dropdown_menu_item type="a" href="/" label="a item" />
<.dropdown_menu_item type="live_patch" href="/" label="Live Patch item" />
<.dropdown_menu_item type="live_redirect" href="/" label="Live Redirect item" />
</.dropdown>
Breadcrumbs
<.breadcrumbs separator="chevron" links={[
%{ label: "Link 1", to: "#" },
%{ label: "Link 2", to: "#", link_type: "live_patch" },
%{ label: "Link 3", to: "#", link_type: "live_redirect" },
]}/>
