You may also specify which attributes are included in addition to the known globals Global attributes can define defaults which are merged with attributes provided by the caller.įor example, you may declare a default class if the caller does not provide one: attr :rest, :global, default : % /> Included globals Note that the function component did not have to explicitly declare a class or phx-click Rendering the following HTML: You've got mail! The caller can pass multiple global attributes (such as phx-* bindings or the class attribute): The caller without having to modify the function component itself.īelow is an example of a function component that accepts a dynamic number of global attributes: attr :message, :string, required : true attr :rest, :global def notification ( assigns ) do ~H''' Once a global attribute is declared, any number of attributes in the set can be passed by By default, the set of attributes accepted are thoseĪttributes common to all standard HTML tags.

Global attributes are a set of attributes that a function component can accept when itĭeclares an attribute of type :global. With the attr/3 macro you have the core ingredients to create reusable function components.īut what if you need your function components to support dynamic attributes, such as common HTMLĪttributes to mix into a component's container? Global attributes ''' end attr :name, :string, required : true def greet ( assigns ) do ~H''' defmodule Components do # In Phoenix apps, the line is typically: use MyAppWeb, :html use Phoenix.Component attr :title, :string, required : true def heading ( assigns ) do ~H''' requires a title, but does not require a name. In theįollowing example, requires a name, but does not require a title, and Multiple function components can be defined in the same module, with different attributes. Multiple attributes can be declared for the same function component: attr :name, :string, required : true attr :age, :integer, required : true def celebrate ( assigns ) do ~H'''Īllowing the caller to pass multiple values: You must explicitly declare default: nil or assign a value programmatically with the Rendering the following HTML: Hello, Bob! Īccessing an attribute which is required and does not have a default value will fail. Now you can invoke the function component without providing a value for name: Failing to do so will result in a compilationĪttributes can provide default values that are automatically merged into the assigns map: attr :name, :string, default : 'Bob'

Present in its assigns map to properly render. Phoenix.Component provides the attr/3 macro to declare what attributes the proceeding functionĬomponent expects to receive when invoked: attr :name, :string, required : true def greet ( assigns ) do ~H'''īy calling attr/3, it is now clear that greet/1 requires a string attribute called name In this module we will learn how to build rich and composable components to Then the caller can invoke the function directly without specifying the module: įor dynamic values, you can interpolate Elixir expressions into a function component: įunction components can also accept blocks of HEEx content (more on this later): This is the body of my card! If the function component is defined locally, or its module is imported, The following HTML is rendered: Hello, Jane! When invoked within a ~H sigil or HEEx template file: We can write ElixirĬode inside HEEx using tags and we use toĪccess the key name defined inside assigns. Writing HTML mixed with Elixir interpolation. This function uses the ~H sigil to return a rendered template.

The ~H sigil: defmodule M圜omponent do # In Phoenix apps, the line is typically: use MyAppWeb, :html use Phoenix.Component def greet ( assigns ) do ~H''' Map as an argument and returns a rendered struct built with Settings View Source Phoenix.Component (Phoenix LiveView v0.20.1)ĭefine reusable function components with HEEx templates.Ī function component is any function that receives an assigns

Phoenix liveview mount