We can do this by giving it as an argument to render_slot/2. The component has to pass that value into the slot to be rendered. Sometimes we'll want to use data from an assign passed to the function component, within content that's provided by a slot. Our slot-specific classes have been applied, giving the buttons different colors! Passing Assign Values to the Caller's Slot Since there's only one slot entry for each name, we'll only get one button from each! Our function component will choke on any undefined assigns, so we start our definition by making sure or exist: Some modals might not need all the slots we've told modal to render. Note that everything in the body of our function component that is not inside a named slot is inside the default slot The title, the body, and the button text have all been customized! Optional Slots Your settings have been successfully saved modal inside a sigil_H to render it, providing the and assigns in the opening tag: The "modal-footer" div contains two buttons, "Ok" and "Cancel," that for the moment don't do anything. In the div with class "modal-body", will give us the value of The component will expect us to supply it with a map of assigns that include these, when we call it. Within the "header" div, will substitute the value of the assign on render (we could equally well write it it's just longer). This defines a function, called modal/1, that renders an HTML div element with class "modal-container", enclosing more divs for the three distinct parts of our modal: header, body, and footer. Component def modal ( assigns ) do ~H"" " Then we can go ahead and define our function component.ĭefmodule MyAppWeb. We call use Phoenix.Component at the top of our module to import the functions defined in Phoenix.LiveView and. passing a value from the component's assigns map into one of its slots. passing values into the component through a named slot's attributes.dealing gracefully with slots that are not always defined.placing multiple blocks of custom HTML through named slots.displaying custom HTML we insert in its default slot.displaying strings from an assigns map we pass to it.We'll lay some groundwork with a basic function component we'll call modal, and morph it to demonstrate the following powers: When we call the function component, we pass our unique content to it, either through its assigns parameter, or, if we need to pass whole blocks of HTML, using the slots mechanism. It's used not only in defining a template for a component, but also in rendering it. The ~H sigil lets us inject HEEx templating code into our source, to be interpreted and rendered into our LiveView. This is a job for LiveView's function components ( Phoenix.Component).Ī function component is basically a wrapper for a ~H sigil that provides a template for customized content. We'd prefer not to repeat this markup for all possible variations! The Solution For a consistent experience, they might all have HTML elements for header, body, and footer regions. Imagine we're writing a Phoenix LiveView app that frequently uses modals to display or save information. We'd like a way to reuse code for UI components that are very similar in structure, but carry different content. 6 min Share this post on Twitter Share this post on Hacker News Share this post on Reddit Reuse Markup With Function Components and Slots Author Name Berenice Medel Social Media View Twitter Profile Author Name Chris Nicoll Social Media View Twitter Profile Image by Annie Ruygt The Problem.I have written all my apps client-side with javascript so far, so I may not know the full capabilities of Phoenix (+Liveview) and I may still have a client-side-centric approach in my mind. But I'll definetly want to learn it as soon as I'm more confident with my knowledge. I know for example laravel folks have alpinejs, what is the popular choice for us Elixir programmers? Are bootstrap components a good choice? What can be linked with Phoenix well with as little js/css as possible?Įdit: So many helpful responses! I love this cummunity! I admit I'm still learning Phoenix and have heard about LiveView, but haven't managed to dive deep into it so far, so I don't know its full capabilities. (think vuetify), but I don't want to use a full framework like Vue - I want as much logic on the backend as possible - is there a framework that goes together well with Phoenix? I'm currently learning Elixir and Phoenix and I was wondering, if I want to build a webapp with more advanced UI controls and features like validation etc.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |