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.
The header title
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 of hoverable
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.
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
- 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.
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
Renders a icon text
The text that goes in a TextIcon component
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.
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.
Slots
- default - Can contain
SurfaceBulma.Item
or a SurfaceBulma.Link.
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.
<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