API Reference surface_bulma v0.6.0
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.
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.
A non-closable message component
A closable message component
A closable message component
A panel to play with
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.
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, 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.
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.
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