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} class="w-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" class="w-28 h-10" item_class="w-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} class="w-40 h-8"/>

Default

Component: Breeze.Blocks.modal/1

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

Confirm

Danger

Panel

Component: Breeze.Blocks.panel/1

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

Unfocused

Focused

Scroll

Component: Breeze.Blocks.scroll/1

      <.scroll id="preview-scroll" class="w-26 h-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" class="w-42 h-8">
        <:tab :for={{value, label, body} <- @tabs} value={value} label={label}>
          <box id={"preview-tabs-panel-#{value}"} class="p-1">{body}</box>
        </:tab>
      </.tabs>

Default

Underline

Textarea

Component: Breeze.Blocks.textarea/1

      <.textarea id="preview-textarea" textarea-value={@value} class="w-40 h-6"/>

Default

Focused

Tree

Component: Breeze.Blocks.tree/1

      <.tree id="preview-tree" nodes={@nodes} selected="blocks" expanded={["lib"]} class="w-30 h-9"/>

Expanded