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.2)ĭefine reusable function components with HEEx templates.Ī function component is any function that receives an assigns
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |