Fluxon UI

https://docs.fluxonui.com/
Admin
Fluxon UI is a component library for Phoenix LiveView that provides accessible, consistent, and...
Tokens:4,821
Snippets:46
Trust Score:5.5
Update:11 months ago
Show doc for...
Tokens:
Raw
### Basic Textarea Component Usage (Fluxon)

Source: https://docs.fluxonui.com/Fluxon.Components

A simple example of rendering the Fluxon Textarea component with a label and help text. This demonstrates the basic setup for capturing user input with additional contextual information.

```elixir
<.textarea
  name="bio"
  label="Biography"
  help_text="Tell us about yourself"
  rows={5}
/>
```

--------------------------------

### Rich Textarea Component Form Example (Fluxon)

Source: https://docs.fluxonui.com/Fluxon.Components

An advanced example of using the Fluxon Textarea component within a Phoenix form. This includes label, sublabel, description, and help text attributes for comprehensive user guidance, along with row configuration.

```elixir
<.form :let={f} for={@form} phx-change="validate">
  <.textarea
    field={f[:description]}
    label="Project Description"
    sublabel="Optional"
    description="Provide details about your project's goals and scope"
    help_text="Be specific and concise"
    rows={6}
  />
</.form>
```

--------------------------------

### Local Deployment with Fly.io using Environment Variable

Source: https://docs.fluxonui.com/fly

This example demonstrates how to set your Fluxon license key as an environment variable for local deployments. It then shows the command to deploy using `flyctl`, passing the license key as a build secret.

```bash
# Set license key
export FLUXON_LICENSE_KEY="your-license-key"

# Deploy with the license key as a build secret
fly deploy --build-secret FLUXON_LICENSE_KEY=$FLUXON_LICENSE_KEY
```

--------------------------------

### Configure Dockerfile for Fluxon Repository Access

Source: https://docs.fluxonui.com/fly

This snippet shows how to modify your Dockerfile to add the Fluxon repository. It uses a secret mount for the license key and fetches the public key for secure authentication before installing dependencies.

```dockerfile
RUN --mount=type=secret,id=FLUXON_LICENSE_KEY \
    mix hex.repo add fluxon https://repo.fluxonui.com \
    --fetch-public-key "SHA256:zF8zWamOWgokeJdiIYgRl91ZBmQYnyXlxIOp3ralbos" \
    --auth-key "$(cat /run/secrets/FLUXON_LICENSE_KEY)"

# Your existing deps installation
RUN mix deps.get --only $MIX_ENV
```

--------------------------------

### Textarea Component Custom Styling (Fluxon)

Source: https://docs.fluxonui.com/Fluxon.Components

Demonstrates how to apply custom styling to the Fluxon Textarea component using the `class` attribute. This example adds a monospace font class for specific text input needs, alongside size and row configurations.

```elixir
<.textarea
  name="notes"
  label="Meeting Notes"
  size="lg"
  class="font-mono"
  rows={10}
/>
```

--------------------------------

### GitHub Actions Workflow for Fly.io Deployment

Source: https://docs.fluxonui.com/fly

This snippet provides a GitHub Actions workflow configuration for deploying to Fly.io. It checks out the code, sets up `flyctl`, and executes the deployment command, securely passing the Fluxon license key and Fly API token from repository secrets.

```yaml
name: Fly Deploy
on:
  push:
    branches:
      - main
jobs:
  deploy:
    name: Deploy app
    runs-on: ubuntu-latest
    concurrency: deploy-group
    steps:
      - uses: actions/checkout@v4
      - uses: superfly/flyctl-actions/setup-flyctl@master
      - run: |
          flyctl deploy --remote-only \
            --build-secret FLUXON_LICENSE_KEY="${{ secrets.FLUXON_LICENSE_KEY }}"
        env:
          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}
```

--------------------------------

### Import Fluxon Components in Elixir

Source: https://docs.fluxonui.com/Fluxon

Demonstrates how to import all Fluxon components or selectively import specific components using `:only` or `:except` options in Elixir modules.

```elixir
use Fluxon
```

```elixir
use Fluxon, only: [:button, :input, :modal]
```

```elixir
use Fluxon, except: [:table, :tabs]
```

--------------------------------

### Import Fluxon v2.0 Theme Stylesheet

Source: https://docs.fluxonui.com/v2-0

Import the Fluxon v2.0 theme stylesheet to enable the new token-based theming system. This file contains color definitions, design tokens for spacing, borders, shadows, and light/dark mode support, which are crucial for component functionality and TailwindCSS integration.

```css
@import "../../deps/fluxon/priv/static/theme";
```

--------------------------------

### Textarea Component Size Variants (Fluxon)

Source: https://docs.fluxonui.com/Fluxon.Components

Demonstrates how to render the Fluxon Textarea component in different size variants: sm, md (default), lg, and xl. This allows for flexible UI design based on space constraints and emphasis.

```elixir
<.textarea
  name="description"
  label="Small"
  size="sm"
  placeholder="A compact textarea"
/>

<.textarea
  name="description"
  label="Base (Default)"
  placeholder="Standard size textarea"
/>

<.textarea
  name="description"
  label="Large"
  size="lg"
  placeholder="Larger textarea for more emphasis"
/>

<.textarea
  name="description"
  label="Extra Large"
  size="xl"
  placeholder="Maximum emphasis textarea"
/>
```

--------------------------------

### Open Dialogs with Fluxon in Elixir

Source: https://docs.fluxonui.com/Fluxon

Demonstrates how to open dialog components (modals, sheets) in Elixir using Fluxon. This can be done by directly invoking the function with an ID or by triggering a push event.

```elixir
<.button phx-click={Fluxon.open_dialog("my-modal")}>Open modal</.button>
<.modal id="my-modal"></.modal>
```

```elixir
def handle_event("open_dialog", _, socket) do
  {:noreply, Fluxon.open_dialog(socket, "my-dialog")}
end
```

--------------------------------

### Textarea Component Error Handling (Fluxon)

Source: https://docs.fluxonui.com/Fluxon.Components

Shows how the Fluxon Textarea component handles and displays validation errors. Errors can be automatically managed when used with Phoenix forms, or manually provided as a list of strings.

```elixir
<.textarea
  name="description"
  label="Description"
  errors={["Description must be at least 10 characters"]}
/>
```

--------------------------------

### Textarea Component Form Integration (Fluxon)

Source: https://docs.fluxonui.com/Fluxon.Components

Illustrates the integration of the Fluxon Textarea component with Phoenix forms. It shows how to bind the textarea to a form field, enabling automatic value tracking, error handling, and submission. The `phx-change` and `phx-submit` are used for form interaction.

```elixir
<.form :let={f} for={@form} phx-change="validate" phx-submit="save">
  <.textarea
    field={f[:description]}
    label="Description"
    help_text="Provide a detailed description of your project"
  />
</.form>
```

--------------------------------

### Fluxon UI Theme Customization using CSS Custom Properties

Source: https://docs.fluxonui.com/changelog

Shows how to customize Fluxon UI's theming system by overriding CSS custom properties. This allows for changing semantic colors, background colors, and borders across all components to create a custom theme, supporting light and dark modes with `light-dark()` function.

```CSS
:root {
  /* Custom primary color - purple theme */
  --primary: light-dark(#7c3aed, #a855f7);

  /* Custom background colors */
  --background-base: light-dark(#fafafa, #0a0a0a);

  /* Custom semantic colors */
  --success: #10b981;
  --warning: #f59e0b;
}
```

--------------------------------

### Open Popovers with Fluxon in Elixir

Source: https://docs.fluxonui.com/Fluxon

Shows how to open popover components using Fluxon in Elixir. This function is typically called via a click event, referencing the popover's ID.

```elixir
<.button phx-click={Fluxon.open_popover("my-popover")}>Open popover</.button>
<.popover id="my-popover"></.popover>
```

--------------------------------

### Simplify Input Component Padding with Inner Slots

Source: https://docs.fluxonui.com/v2-0

Remove manual padding adjustments for `inner_prefix` and `inner_suffix` in the Input component. The component now automatically handles the necessary padding, simplifying the markup.

```html
- <.input field={f[:username]} class="pl-8">
+ <.input field={f[:username]}>
    <:inner_prefix>
      <.icon name="u-at-sign" />
    </:inner_prefix>
  </.input>
```

--------------------------------

### Update Button Component Rendering and Color Attributes

Source: https://docs.fluxonui.com/v2-0

Adjust Button component usage: remove `as="link"` as it's now automatic when `href`, `navigate`, or `patch` attributes are present. Update the `color` attribute to use the semantic color palette (`success`, `info`, `warning`, `danger`).

```html
- <.button as="link" navigate={~p"/account"}>
+ <.button navigate={~p"/account"}>
```

```html
- <.button color="green">
+ <.button color="success">
```

--------------------------------

### Update Form Component Size Naming Convention

Source: https://docs.fluxonui.com/v2-0

Standardize form component sizing by renaming the default size `base` to `md`. This applies to `Select`, `Switch`, `Autocomplete`, `Input`, and `DatePicker` components to ensure consistent sizing options.

--------------------------------

### Update Badge Component Variant and Color Attributes

Source: https://docs.fluxonui.com/v2-0

Refactor Badge component usage by changing `variant="flat"` to `variant="soft"`, removing the `pill` variant in favor of `class="rounded-full"`, and updating colors to use the semantic palette (`success`, `info`, `warning`, `danger`). For custom colors, apply styles directly using the `class` attribute.

```html
- <.badge color="violet">
+ <.badge class="bg-violet-100/50 text-violet-700 border-violet-200/90">
```

```html
- <.badge variant="pill">
+ <.badge class="rounded-full">
```

--------------------------------

### Configure Fluxon UI Translation Function (Elixir)

Source: https://docs.fluxonui.com/gettext

This snippet shows how to configure Fluxon UI to use a custom translation function for error messages. It requires the `:fluxon` application and a module with a translation function. The function takes an error message and options as input.

```elixir
# config/config.exs
config :fluxon, :translate_function, &MyAppWeb.CoreComponents.translate_error/1
```

--------------------------------

### Close Dialogs with Fluxon in Elixir

Source: https://docs.fluxonui.com/Fluxon

Shows how to close dialog components (modals, sheets) in Elixir using Fluxon. This includes closing by ID directly or by triggering a push event with the socket.

```elixir
<.button phx-click={Fluxon.close_dialog("my-modal")}>Close modal</.button>
<.modal id="my-modal"></.modal>
```

```elixir
def handle_event("close_dialog", _, socket) do
  {:noreply, Fluxon.close_dialog(socket, "my-dialog")}
end
```

--------------------------------

### Implement Gettext Error Translation Function (Elixir)

Source: https://docs.fluxonui.com/gettext

This Elixir code implements a translation function for Phoenix validation errors using Gettext. It handles both singular and plural translations by checking for the `count` option. This function is typically placed in a `CoreComponents` module.

```elixir
defmodule MyAppWeb.CoreComponents do
  def translate_error({msg, opts}) do
    if count = opts[:count] do
      Gettext.dngettext(MyAppWeb.Gettext, "errors", msg, msg, count, opts)
    else
      Gettext.dgettext(MyAppWeb.Gettext, "errors", msg, opts)
    end
  end
end
```

--------------------------------

### Update Alert Component Color Attribute

Source: https://docs.fluxonui.com/v2-0

Modify the Alert component's attribute from `variant` to `color`. The `color` attribute now accepts semantic color names like `primary`, `danger`, `warning`, `success`, and `info` for defining the alert's appearance.

```html
- <.alert variant="error">
+ <.alert color="danger">
```

--------------------------------

### Close Popovers with Fluxon in Elixir

Source: https://docs.fluxonui.com/Fluxon

Illustrates how to close popover components using Fluxon in Elixir. This function can be triggered via a click event, referencing the popover's ID.

```elixir
<.button phx-click={Fluxon.close_popover("my-popover")}>Close popover</.button>
<.popover id="my-popover"></.popover>
```

--------------------------------

### Update Switch Component Color Attribute

Source: https://docs.fluxonui.com/v2-0

Modify the Switch component's `color` attribute to accept only semantic colors: `primary`, `danger`, `success`, `warning`, and `info`. Update any existing color values (e.g., `green` to `success`) accordingly.

```html
- <.switch color="green">
+ <.switch color="success">
```

--------------------------------

### DatePicker: Disable Specific Dates in Elixir

Source: https://docs.fluxonui.com/changelog

Demonstrates how to use the `disabled_dates` attribute in the DatePicker component to disable specific dates. This attribute supports disabling weekends, weekdays, specific days of the month, holidays, months, and weeks based on various patterns.

```Elixir
<.date_picker
  name="availability"
  disabled_dates={[
    :weekends,              # No weekends
    {:weekday, 3},          # No Wednesdays
    {:day, 15},             # No 15th of any month
    {:month_day, 12, 25},   # No Christmas
    {:month, 4},            # No April dates
    {:week, 33}             # No ISO week 33
  ]}
/>
```
Tokens:
Raw