View Source LiveUI.Components.Core (LiveUI v0.1.0)

Core components.

Summary

Functions

Renders action button.

Renders component for an action.

A button that switches between light and dark modes.

Used for switching dark/light color schemes.

Taken from phoenix core.

Taken from phoenix core.

Taken from phoenix core.

Taken from phoenix core.

Renders link to parent record.

Taken from phoenix core.

Taken from phoenix core.

Functions

Renders action button.

Attributes

  • config (:list)
  • action (:atom)
  • url_path (:string)
  • disabled (:boolean) - Defaults to false.
  • color (:string) - Defaults to "white".

Slots

  • inner_block (required)

Renders component for an action.

Attributes

  • live_action (:atom) (required)
  • action (:atom) (required)
  • return_to (:string) (required)

Slots

  • inner_block (required)
  • header
  • subheader

See PetalComponents.Alert.alert/1.

See PetalComponents.Badge.badge/1.

See PetalComponents.Button.button/1.

See PetalComponents.Card.card/1.

See PetalComponents.Card.card_content/1.

Link to this function

color_scheme_switch(assigns)

View Source

A button that switches between light and dark modes.

Pairs with css-theme-switch.js

Taken from https://github.com/petalframework/petal_boilerplate/blob/21a70bec1060872d1ee88a23d31f8d2fcfd4cfc0/lib/petal_boilerplate_web/components/core_components.ex#L587

<.color_scheme_switch_js />
Link to this function

color_scheme_switch_js(assigns)

View Source

Used for switching dark/light color schemes.

This needs to be inlined in the <head> because it will set a class on the document, which affects all "dark" prefixed classed (eg. dark:text-white). If you do this in the body or a separate javascript file then when in dark mode, the page will flash in light mode first before switching to dark mode.

Utilized by color-scheme-hook.js.

Taken from https://github.com/petalframework/petal_boilerplate/blob/21a70bec1060872d1ee88a23d31f8d2fcfd4cfc0/lib/petal_boilerplate_web/components/core_components.ex#L630

<.color_scheme_switch_js />

See PetalComponents.Field.field/1.

See PetalComponents.Field.field_error/1.

See PetalComponents.Field.field_label/1.

See PetalComponents.Typography.h1/1.

See PetalComponents.Typography.h2/1.

See PetalComponents.Typography.h3/1.

See PetalComponents.Typography.h4/1.

See PetalComponents.Typography.h5/1.

Link to this function

hide(js \\ %JS{}, selector)

View Source

Taken from phoenix core.

Link to this function

hide_modal(js \\ %JS{}, id)

View Source

Taken from phoenix core.

Taken from phoenix core.

Attributes

  • name (:string) (required)
  • class (:string) - Defaults to nil.

See PetalComponents.Button.icon_button/1.

Taken from phoenix core.

Attributes

  • id (:string) (required)
  • show (:boolean) - Defaults to false.
  • on_cancel (Phoenix.LiveView.JS) - Defaults to %Phoenix.LiveView.JS{ops: []}.
  • class (:string) - Defaults to nil.

Slots

  • inner_block (required)

See PetalComponents.Typography.p/1.

See PetalComponents.Pagination.pagination/1.

See PetalComponents.Progress.progress/1.

Renders link to parent record.

Attributes

  • record (:map)
Link to this function

show(js \\ %JS{}, selector)

View Source

Taken from phoenix core.

Link to this function

show_modal(js \\ %JS{}, id)

View Source

Taken from phoenix core.

See PetalComponents.Typography.ul/1.