Flux ships with the entire Heroicons icon set by default. As with anything the Tailwind folks do, it's excellent.
However, at ~400 icons, it's more limited than other alternatives.
If there's an icon in your project that you need but isn't available in Heroicons, it's probably available in Lucide.
In version v1.0.20 of Flux, we've shipped a new command to easily import individual Lucide icons into your project:
Copy to clipboard
You will be prompted to enter the names of any icons you want, and it will import them locally into your project and format them as Blade components ready to use with Flux.
If Lucide doesn't have what you need still, you can just add your icons manually to the following directory in your project:
You know those big boxy toggle thingy's you use to configure your new laptop purchase? Yep, those are radio cards; simple, bordered boxes that behave like radio buttons—meaning only one can be selected at a time.
Welp, we've got em' in Flux now, and using them is as simple as adding
variant="cards"
to a radio group:
Copy to clipboard
By default, the cards will be laid out horizontally, but you can easily control this using simple flex box utilities like
.flex-col
. This makes it really easy to change the layout on mobile with a responsive utility like
.max-sm:flex-col
:
Copy to clipboard
Adding a cube icon to a card is as simple as passing an
icon="cube"
prop:
Copy to clipboard
If you want cleaner looking cards, you can remove the radio indicator by passing
:indicator="false"
into the radio group.
Copy to clipboard
For most cases, this level of customization is enough, but still, there might be times where you need full control over the contents of each card.
If that's the case, you can compose these radio cards your self with the full-form syntax:
Creating radio and checkbox variants like these is much more than just visuals. Each of these is fully controllable with a keyboard, uses a roving-tabindex to mimic the focus behavior of native checkboxes and radio buttons, and supports the proper attributes and roles so that screenreaders recognize these as standard form controls.
These are among the many details that differentiate Flux among other component libraries. We care deeply about providing world-class UI components that look amazing in the browser, feel amazing in your editor, and are accessible to as many people as possible.
Add radio cards variant
Add checkbox cards variant
Add segmented radio group variant
Change to solid icons for segmented tabs and radios
Add two pixel focus outline offset to radio, checkbox, and switch to match native outlines
Sortable column backgrounds were getting cut off on mobile
Translate "No results found" strings in combobox and listbox
:href
properties were being escaped, causing links with ampersands to be malformed
Flux's Toast component just got a heap of improvements based on a mixture of your feedback and our intuition.
Making them stand-out
First, we increased the drop-shadow to make Toasts appear as if they are in the foreground of the page.
We also increased the slide-up animation duration so that the motion of the Toast more easily catches the user's eye.
Adding variants
You can now add additional context to your Toast messages using one of three new variants: success, danger, and warning.
Variants can be used by passing the
variant
parameter to
Flux::toast()
like so:
Copy to clipboard
Positioning
You can now specify where on the page you want your toasts to appear by passing the
position
prop to
<flux:toast />
:
Copy to clipboard
If you have a header navbar at the top of your app, you may want to add extra padding using Tailwind:
Copy to clipboard
Flux automatically adjusts animations based on position. Toasts positioned at the top will slide-in from the side, while Toasts on the bottom will slide up from the bottom.
Persisting toasts between redirects
A common pattern in applications is to trigger a toast before redirecting your users elsewhere:
Copy to clipboard
If you wish to preserve your toasts between page visits, you can do so using the
@persist
Blade directive in your layout:
Copy to clipboard
Now, If you trigger a toast before a redirect, it will remain on the page after the redirect.
This behavior was previously broken because of the way Browsers handle popovers between pages, however we introduced a patch in Livewire version 3.5.10 to allow for this.