API Reference surface_bulma v0.3.3

Modules

This component library is a work in progress that aims to implement the Bulma framework is Surface.

The classic button, in different colors, sizes, and states

Group of buttons.

An all-around flexible and composable component.

The Card.Footer component acts as a list of for several Card.FooterItem elements

Single to be displayed as a list in Card.Footer

A horizontal bar with a shadow

The header icon container. All actions defined by child contents.

A fullwidth container for a responsive image

Catalogue implementation for SurfaceBulma.

Properties

  • id :string, required: true - The id of the live view
  • session :map - The request info necessary for the view, such as params, cookie session info, etc. The session is signed and stored on the client, then provided back to the server when the client connects, or reconnects to the stateful view.

Properties

  • id :string, required: true - The id of the live view
  • session :map - The request info necessary for the view, such as params, cookie session info, etc. The session is signed and stored on the client, then provided back to the server when the client connects, or reconnects to the stateful view.

Properties

  • id :string, required: true - The id of the live view
  • session :map - The request info necessary for the view, such as params, cookie session info, etc. The session is signed and stored on the client, then provided back to the server when the client connects, or reconnects to the stateful view.

Properties

  • id :string, required: true - The id of the live view
  • session :map - The request info necessary for the view, such as params, cookie session info, etc. The session is signed and stored on the client, then provided back to the server when the client connects, or reconnects to the stateful view.

Properties

  • id :string, required: true - The id of the live view
  • session :map - The request info necessary for the view, such as params, cookie session info, etc. The session is signed and stored on the client, then provided back to the server when the client connects, or reconnects to the stateful view.

Example using all of the available sub-components (Header, Image, Footer).

Example using all of the available sub-components.

Example using all of the available sub-components.

Example using left/right alignment.

Example using "up" orientation.

Properties

  • id :string, required: true - The id of the live view
  • session :map - The request info necessary for the view, such as params, cookie session info, etc. The session is signed and stored on the client, then provided back to the server when the client connects, or reconnects to the stateful view.

Properties

  • id :string, required: true - The id of the live view
  • session :map - The request info necessary for the view, such as params, cookie session info, etc. The session is signed and stored on the client, then provided back to the server when the client connects, or reconnects to the stateful view.

Properties

  • id :string, required: true - The id of the live view
  • session :map - The request info necessary for the view, such as params, cookie session info, etc. The session is signed and stored on the client, then provided back to the server when the client connects, or reconnects to the stateful view.

Properties

  • id :string, required: true - The id of the live view
  • session :map - The request info necessary for the view, such as params, cookie session info, etc. The session is signed and stored on the client, then provided back to the server when the client connects, or reconnects to the stateful view.

Properties

  • id :string, required: true - The id of the live view
  • session :map - The request info necessary for the view, such as params, cookie session info, etc. The session is signed and stored on the client, then provided back to the server when the client connects, or reconnects to the stateful view.

Properties

  • id :string, required: true - The id of the live view
  • session :map - The request info necessary for the view, such as params, cookie session info, etc. The session is signed and stored on the client, then provided back to the server when the client connects, or reconnects to the stateful view.

A non-closable message component

A closable message component

A closable message component

Properties

  • id :string, required: true - The id of the live view
  • session :map - The request info necessary for the view, such as params, cookie session info, etc. The session is signed and stored on the client, then provided back to the server when the client connects, or reconnects to the stateful view.

Properties

  • id :string, required: true - The id of the live view
  • session :map - The request info necessary for the view, such as params, cookie session info, etc. The session is signed and stored on the client, then provided back to the server when the client connects, or reconnects to the stateful view.

Properties

  • id :string, required: true - The id of the live view
  • session :map - The request info necessary for the view, such as params, cookie session info, etc. The session is signed and stored on the client, then provided back to the server when the client connects, or reconnects to the stateful view.

Properties

  • id :string, required: true - The id of the live view
  • session :map - The request info necessary for the view, such as params, cookie session info, etc. The session is signed and stored on the client, then provided back to the server when the client connects, or reconnects to the stateful view.

Properties

  • id :string, required: true - The id of the live view
  • session :map - The request info necessary for the view, such as params, cookie session info, etc. The session is signed and stored on the client, then provided back to the server when the client connects, or reconnects to the stateful view.

The delete component is a stand-alone element that can be used in different contexts. On its own, it's a simple circle with a cross.

A divider that can be used in a Dropdown or a Navbar. It will adapt based on the context.

An interactive dropdown menu for discoverable content.

Contents to be displayed in the trigger

The form component that wraps the inputs.

The checkbox component

A text input of type "color", shares a lot of props with regular text input.

The date input element as defined here

A date selector with configurable separators between the parts of the date.

The datetime standardized input

A datetime selector with configurable separators between the parts of the datetime.

Used to double-wrap fields in some usage patterns for fields in horizontal forms.

A file input that can be used in forms

Properties

  • for :form - The form.

It should either be a Phoenix.HTML.Form emitted by form_for, inputs_for or an atom.

Structural component that creates horizontal control groups. As defined here: https://bulma.io/documentation/form/general/#form-group

This component provides a wrapper for form inputs.

Properties

  • form :form - The parent form.

It should either be a Phoenix.HTML.Form emitted by form_for or an atom.

Properties

  • values :keyword, default: [] - List values that will be sent as part of the payload triggered by an event

The number input element as defined here

The password field component as defined here

Range input is currently not implemented in Bulma. Needs custom css to display properly. This is a TODO item.

A search input component with a Submit as a RightAddon.

The select component as defined here

A submit button to use in a Form.

The telephone field component as defined here: https://bulma.io/documentation/form/input/

A time selector with configurable separators between the parts of the time.

A component that displays an icon compatible with the FontAwesome icons

Properties

  • size :string, values: ["xs", "sm", "lg", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x"] - The size of the icon

Properties

  • size :string, values: ["xs", "sm", "lg", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x"] - The size of the icon

The text that goes in a TextIcon component

Properties

  • size :string, values: ["xs", "sm", "lg", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x"] - The size of the icon

A general purpose component that can be re-used in other components such as the Navbar and Dropdown.

A multi-purpose horizontal level that can contain most elements.

Properties

  • replace :boolean, default: false - The flag to replace the current history or push a new state

Colored message blocks, to emphasize part of your page.

Message header with optional close button

The non-card modal, with various configuration options. The modal is a stateless component and as such requires outside handling of whether or not the modal should be shown.

The card modal, with various configuration options. The modal is a stateless component and as such requires outside handling of whether or not the modal should be shown.

Properties

  • id :string, required: true - The id of the live component (required by LiveView for stateful components).

Slots

Slots

  • label
  • default

The panel for compact controls and tabs

Properties

  • is_active :boolean
  • icon :string
  • type :string

The tabs to display for a panel. N.B. the elements used in this slot will be wrapped with a <a> tag. Use the click prop to add custom events which handle when a user clicks a tab.

Properties

  • is_active :boolean
  • icon :string
  • type :string

Slots

  • default

<hX> elements of subtitle type

A Bulma HTML table.

Defines a column for the parent table component.

Tab selection is handled by an internal event when Phoenix LiveView version < 0.17.* is used. A custom event can be specified for a tab, but be aware that the event handler has to send an update to the component containing the tab.

Defines a tab item for the parent tabs component.

Tag is very useful as a way to attach information to a block or other component. Its size makes it also easy to display in numbers, making it appropriate for long lists of items.

<hX> elements of title type