View Source API Reference surface v0.11.4

Modules

Surface is a component based library for Phoenix LiveView.

An AST node representing an attribute or property

An AST node representing an attribute expression (i.e. a dynamic value for an attribute, directive, or property)

An AST node representing a generic block.

An AST node representing a component

An AST node representing a container of other nodes. This does not have content itself, just contains children which have content, and directives that operate on the entirety of the children (i.e. for, if, debug)

An AST node representing a directive

An AST node representing a dynamic attribute (or attributes).

An AST node representing an error. This will be rendered as an html element.

An AST node representing an expression which does not resolve to a value printed out to the final DOM.

An AST node representing a for comprehension.

An AST node representing a function component

An AST node representing an if/else expression

An AST node representing interpolation within a node

An AST node representing a literal value

An AST node representing a macro component

A container for metadata about compilation.

An AST node representing a <#slot /> tag

An AST node representing a <:slot> entry. This is used to provide content for slots

An AST node representing a standard HTML tag

An AST node representing a generic sub-block.

An AST node representing a standard HTML tag

An AST node representing a void (empty) HTML tag

A behaviour to provide additional information about the catalogue.

Experimental module that provides conveniences for manipulating data in Examples and Playgrounds.

A generic LiveView to create a single example for catalogue tools.

A generic LiveView to create multiple examples for catalogue tools.

A generic LiveView to create a component's playground for the Surface Catalogue.

Defines a behaviour that must be implemented by all HTML/Surface node translators.

This module glues together surface's AST and Phoenix.LiveView.Engine to actually render an AST.

Defines a stateless component.

Soft deprecation warning

Using this module as a component with <Context> has been deprecated. Support for scope-aware context will be removed in v0.13 due to the lack of built-in support for the feature in Liveview itself, which leads to inefficient diff-tracking when using it.

A built-in component that allows users to inject dynamic components into a Surface template.

A built-in component that allows users to inject dynamic live components into a Surface template.

Defines a form that lets the user submit information.

Defines a checkbox.

An input field that let the user specify a color, either with a text field or a color picker interface.

An input field that let the user enter a date, either with a text field or a date picker interface.

Generates select tags for date.

An input field that let the user enter both date and time, using a text field and a date picker interface.

Generates select tags for datetime.

An input field that let the user enter one or multiple e-mails.

A component inspired by error_tag/3 that ships with mix phx.new in MyAppWeb.ErrorHelpers.

Defines a form field.

Defines a context for a form field but without the <div> wrapper in Field.

Generates a file input.

A hidden input field.

A wrapper for Phoenix.HTML.Form.html.hidden_inputs_for/1.

Properties

  • assigns :map - The assigns of the host component

Slots

  • default, arg: %{form: :form, field: :any} - The code containing the input control

A wrapper for Phoenix.HTML.Form.html.inputs_for/3.

An input field that let the user to enter a number.

Defines options to be used inside a select.

An input field that let the user securely specify a password.

Defines a radio button.

An input field that let the user specify a numeric value in a given range, usually using a slider.

Defines a reset button.

An input field that let the user enter search queries.

Defines a select.

Defines a submit button to send the form.

An input field that let the user enter a telephone number.

An input field that let the user enter a multi-line text.

An input field that let the user enter a single-line text.

An input field that let the user enter a time (hours, minutes and optionally seconds).

Generates select tags for time.

An input field that let the user enter a URL.

Soft deprecation warning

This component has been deprecated in favor of liveview's built-in <.link> and will be removed in v0.13. See https://hexdocs.pm/phoenix_live_view/live-navigation.html for more info usage.

Generates a button that uses a regular HTML form to submit to the given URL.

Wrapper around Phoenix LiveView's built-in live_file_input/2 function.

Soft deprecation warning

This component has been deprecated in favor of liveview's built-in <.link> and will be removed in v0.13. See https://hexdocs.pm/phoenix_live_view/live-navigation.html for more info usage.

Soft deprecation warning

This component has been deprecated in favor of liveview's built-in <.link> and will be removed in v0.13. See https://hexdocs.pm/phoenix_live_view/live-navigation.html for more info usage.

A macro component that does not translate any of its contents.

A live stateful component. A wrapper around Phoenix.LiveComponent.

A wrapper component around Phoenix.LiveView.

Conveniences for testing Surface components.

A low-level component which is responsible for translating its own content at compile time.

Use this module on regular Phoenix views to enable .sface templates

Mix Tasks

Generate CSS and JS/TS assets for components.

Converts .sface files and ~F sigils from v0.7 to v0.8 syntax.

Formatter Plugin Preferred

To format Surface code using Elixir 1.13 or later, use Surface.Formatter.Plugin.

Configures Surface on an phoenix project.