Skip to content
Bulma Widgets using Phoenix LiveView Components
Elixir
Branch: master
Clone or download

Latest commit

Latest commit e13d375 Mar 23, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib modifying items api Mar 23, 2020
test initial repo Mar 21, 2020
.formatter.exs
.gitignore initial repo Mar 21, 2020
README.md Update README.md Mar 21, 2020
mix.exs fix bug with dropdown Mar 21, 2020
mix.lock updating deps Mar 21, 2020

README.md

BulmaWidgets

Simple LiveComponent wrappers around Bulma "widgets" for Phoenix LiveView. This library is intended to wrap the basic Bulma elements into largely self-contained components making developing interactive UI's in LiveView much simpler. There are a few additional components for use on touch screen and embedded devices for basic's like number inputs. In the future I'd like to have a simialr library for Bootstrap as well.

Usage

Example usage in a Phoenix LiveView component:

defmodule WidgetExampleLive do
  use BulmaWidgets
  alias BulmaWidgets.DropdownComponent
  alias BulmaWidgets.TabsComponent
  use Phoenix.LiveView
  require Logger

  def mount(_params, _session, socket) do
    socket = socket |> assign(test_var: "some example value")
    {:ok, socket}
  end

  def render(assigns) do
    ~L"""
    <div phx-click="bulma-widgets-close-all" >
      <h1>LiveView is awesome!</h1>
      <section class="section">
        <h1 class="title"> Bulma Widget </h1>

        <%= live_component @socket, DropdownComponent,
              id: :dm_test1,
              items: ["Menu 1", "Menu 2"] %>

        <div class="box">
          <%= live_component @socket, TabsComponent,
                  id: :bw_tabs2,
                  items: ["Info 1", "Info 2"],
                  icons: %{"Info 1" => "fa fa-car"},
                  classes: 'is-centered is-toggle is-toggle-rounded' do %>
            <%= case @item do %>
              <%= "Info 1" -> %>
                <h1 class="title">First Tab</h1>

              <%= "Info 2" -> %>

                <h1 class="title">Second Tab</h1>
                <h2 class="subtitle"><%= @test_var %></h2>

                <%= live_component(@socket, DropdownComponent,
                      id: :dm_test2,
                      items: ["Menu 1", "Menu 2"]) %>

              <%= other -> %>

                <h1><%= other %></h1>

            <% end %>
          <% end %>
      </section>

      <style>
        .widgets-dropdown-width {
          width: 12em;
        }
      </style>
    </div>
    """
  end

  def handle_widget(socket, {:update, BulmaWidgets.DropdownComponent}, id, updates) do
    Logger.warn("updating widget: DropdownComponent: #{inspect({id, updates})}")
    socket
  end

end

Related

Checkout Surface for a more full featured "component library".

Installation

If available in Hex, the package can be installed by adding bulma_widgets to your list of dependencies in mix.exs:

def deps do
  [
    {:bulma_widgets, "~> 0.1.0"}
  ]
end

Documentation can be generated with ExDoc and published on HexDocs. Once published, the docs can be found at https://hexdocs.pm/bulma_widgets.

You can’t perform that action at this time.