Built-in Components

Copy Markdown View Source

Breeze ships with a number of built in components called Breeze Blocks.

Button

Component: Breeze.Blocks.button/1

      <.button id="preview-button">Deploy update</.button>

Default

Focused

Component: Breeze.Blocks.dropdown/1

      <.dropdown id="preview-dropdown" selected="medium" width={20}>
        <:item :for={{value, label} <- @items} value={value}>{label}</:item>
      </.dropdown>

Closed

Open

Flash Group

Component: Breeze.Blocks.flash_group/1

      <.flash_group id="preview-flash" flash={@flash} width={34} offset={0}/>

Default

Square

Rounded

Input

Component: Breeze.Blocks.input/1

      <.input id="preview-input" input-value={@value} style="width-34">{@value}</.input>

Default

Focused

Keybinding Bar

Component: Breeze.Blocks.keybinding_bar/1

      <.keybinding_bar keybindings={@keybindings}/>

Default

List

Component: Breeze.Blocks.list/1

      <.list id="preview-list" style="width-28 height-10" item_style="width-28">
        <:item :for={{value, label} <- @items} value={value}>{label}</:item>
      </.list>

Initial

Selected

Markdown

Component: Breeze.Blocks.markdown/1

      <.markdown id="preview-markdown" content={@content} width={36} style="width-40 height-8"/>

Default

Component: Breeze.Blocks.modal/1

      <.modal id="preview-modal" width={24} height={6}>
        <:title>{@title}</:title>
        <box style="padding-1">{@body}</box>
      </.modal>

Confirm

Danger

Panel

Component: Breeze.Blocks.panel/1

      <.panel width={30} height={7} id="preview-panel">
        <:title>{@title}</:title>
        <box style="padding-1">{@body}</box>
      </.panel>

Unfocused

Focused

Scroll

Component: Breeze.Blocks.scroll/1

      <.scroll id="preview-scroll" style="width-26 height-8 border">
        <box :for={row <- @rows}>{row}</box>
      </.scroll>

Top

Lower

Table

Component: Breeze.Blocks.table/1

      <.table id="preview-table" rows={@rows}>
        <:col :let={city} label="#" width={4} align="right">{city.rank}</:col>
        <:col :let={city} label="City" width={12}>{city.city}</:col>
        <:col :let={city} label="Country" width={12}>{city.country}</:col>
        <:col :let={city} label="Pop." width={10} align="right">{city.population}</:col>
      </.table>

Initial

Selected

Tabs

Component: Breeze.Blocks.tabs/1

      <.tabs id="preview-tabs" selected="logs" style="width-42 height-8">
        <:tab :for={{value, label, body} <- @tabs} value={value} label={label}>
          <box id={"preview-tabs-panel-#{value}"} style="padding-1">{body}</box>
        </:tab>
      </.tabs>

Default

Underline

Textarea

Component: Breeze.Blocks.textarea/1

      <.textarea id="preview-textarea" textarea-value={@value} style="width-40 height-6"/>

Default

Focused

Tree

Component: Breeze.Blocks.tree/1

      <.tree
        id="preview-tree"
        nodes={@nodes}
        selected="blocks"
        expanded={["lib"]}
        style="width-30 height-9"
      />

Expanded