API Reference surface_bulma v0.6.1

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.

Slots

  • default

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 - Both the DOM ID and the ID to uniquely identify a LiveView. An :id is automatically generated when rendering root LiveViews but it is a required option when rendering a child LiveView.

Properties

  • id :string, required: true - Both the DOM ID and the ID to uniquely identify a LiveView. An :id is automatically generated when rendering root LiveViews but it is a required option when rendering a child LiveView.

Properties

  • id :string, required: true - Both the DOM ID and the ID to uniquely identify a LiveView. An :id is automatically generated when rendering root LiveViews but it is a required option when rendering a child LiveView.

Properties

  • id :string, required: true - Both the DOM ID and the ID to uniquely identify a LiveView. An :id is automatically generated when rendering root LiveViews but it is a required option when rendering a child LiveView.

Properties

  • id :string, required: true - Both the DOM ID and the ID to uniquely identify a LiveView. An :id is automatically generated when rendering root LiveViews but it is a required option when rendering a child LiveView.

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 - Both the DOM ID and the ID to uniquely identify a LiveView. An :id is automatically generated when rendering root LiveViews but it is a required option when rendering a child LiveView.

Properties

  • id :string, required: true - Both the DOM ID and the ID to uniquely identify a LiveView. An :id is automatically generated when rendering root LiveViews but it is a required option when rendering a child LiveView.

Properties

  • id :string, required: true - Both the DOM ID and the ID to uniquely identify a LiveView. An :id is automatically generated when rendering root LiveViews but it is a required option when rendering a child LiveView.

Properties

  • id :string, required: true - Both the DOM ID and the ID to uniquely identify a LiveView. An :id is automatically generated when rendering root LiveViews but it is a required option when rendering a child LiveView.

Properties

  • id :string, required: true - Both the DOM ID and the ID to uniquely identify a LiveView. An :id is automatically generated when rendering root LiveViews but it is a required option when rendering a child LiveView.

Properties

  • id :string, required: true - Both the DOM ID and the ID to uniquely identify a LiveView. An :id is automatically generated when rendering root LiveViews but it is a required option when rendering a child LiveView.

A non-closable message component

A closable message component

A closable message component

Properties

  • id :string, required: true - Both the DOM ID and the ID to uniquely identify a LiveView. An :id is automatically generated when rendering root LiveViews but it is a required option when rendering a child LiveView.

Properties

  • id :string, required: true - Both the DOM ID and the ID to uniquely identify a LiveView. An :id is automatically generated when rendering root LiveViews but it is a required option when rendering a child LiveView.

Properties

  • id :string, required: true - Both the DOM ID and the ID to uniquely identify a LiveView. An :id is automatically generated when rendering root LiveViews but it is a required option when rendering a child LiveView.

Properties

  • id :string, required: true - Both the DOM ID and the ID to uniquely identify a LiveView. An :id is automatically generated when rendering root LiveViews but it is a required option when rendering a child LiveView.

Properties

  • id :string, required: true - Both the DOM ID and the ID to uniquely identify a LiveView. An :id is automatically generated when rendering root LiveViews but it is a required option when rendering a child LiveView.

Example for Tabs component.

Properties

  • class :css_class, default: default - Additional CSS classes
  • id :string, required: true
  • header_class :css_class
  • collapsed :boolean, default: true
  • shadow :boolean, default: false
  • body_class :css_class, default: []
  • title :string
  • icon :string
  • toggle_icon :any
  • is_collapsed? :boolean
  • hook :string

Slots

  • default, required: true
  • header
  • header_icon
  • footer

Events

  • remove

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, from_context: {Surface.Components.Form, :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, from_context: {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

  • patch :string
  • navigate :string
  • href :string
  • props :map, default: %{} - Optional properties to pass to the Phoenix.Component.link component
  • opts :keyword, default: []
  • color :string, values: ~w(white black light dark primary link info success warning danger) - The color of the link.

Slots

  • default

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

Properties

  • arrowless? :boolean, default: false - Whether to display the arrow next to the dropdown

Slots

  • label
  • default

The panel for compact controls and tabs

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.

A static Bulma HTML table.

<hX> elements of subtitle type

Defines a tab item for the parent tabs component.

A Bulma HTML table.

Defines a column for the parent table component.

A simple horizontal navigation 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