API Reference surface_bulma v0.5.0
modules
Modules
properties
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-1
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-2
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.
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
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.
The header title
A fullwidth container for a responsive image
Catalogue implementation for SurfaceBulma.
properties-3
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-4
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-5
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-6
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-7
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 of hoverable
Example using all of the available sub-components.
Example using left/right alignment.
Example using "up" orientation.
properties-8
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-9
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-10
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-11
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-12
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-13
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-14
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-15
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-16
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-17
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 panel to play with
properties-18
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-19
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-1
Slots
- default, required: true
- header
- header_icon
- footer
events
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.
The email field component as defined here: https://bulma.io/documentation/form/input/
Used to double-wrap fields in some usage patterns for fields in horizontal forms.
A file input that can be used in forms
A thin wrapper around Surface.Components.Form.HiddenInput
properties-20
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-21
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-22
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
The radio button component as defined in https://bulma.io/documentation/form/radio/
Range input is currently not implemented in Bulma. Needs custom css to display properly. This is a TODO item.
A thin wrapper around Surface.Components.Form.Reset
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/
The text area component as defined here: https://bulma.io/documentation/form/textarea/
The text field component as defined here: https://bulma.io/documentation/form/input/
A time selector with configurable separators between the parts of the time.
The text field component as defined here: https://bulma.io/documentation/form/input/
A component that displays an icon compatible with the FontAwesome icons
properties-23
Properties
size :string, values: ["xs", "sm", "lg", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x"] - The size of the icon
properties-24
Properties
size :string, values: ["xs", "sm", "lg", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x"] - The size of the icon
Renders a icon text
The text that goes in a TextIcon component
properties-25
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-26
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-27
Properties
id :string, required: true - The id of the live component (required by LiveView for stateful components).
slots-2
Slots
- default - Can contain
SurfaceBulma.Item
or a SurfaceBulma.Link.
properties-28
Properties
- arrowless? :boolean, default: false - Whether to display the arrow next to the dropdown
slots-3
Slots
- label
- default
The panel for compact controls and tabs
slots-4
Slots
- default
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