SnapFramework.Component (SnapFramework v0.1.0-alpha.6) View Source
Overview
SnapFramework.Component is nearly identical to a Scene. The main different is the addition of the defcomponent macro, as well as the addition of the scenic opts key. defcomponent build out your scenic validate function and helper functions, automatically so you don't have to.
defmodule Example.Component.MyComponent do
use SnapFramework.Component,
template: "lib/scenes/my_component.eex",
controller: :none,
assigns: []
defcomponent :my_component, :tuple
end
The above example defines a component that takes in a tuple for data. and build your helper function defined as my_component/3
Templates
Component templates also have an additional feature that primitives or scene templates do not have. You can inject children into them. Lets write a basic icon button component that takes an icon child.
# template
<%= graph font_size: 20 %>
<%= primitive Scenic.Primitive.Circle,
15,
id: :bg,
translate: {23, 23}
%>
@children
# component module
defmodule Example.Component.IconButton do
use SnapFramework.Component,
name: :icon_button,
template: "lib/icons/icon_button/icon_button.eex",
controller: :none,
assigns: [],
opts: []
defcomponent :icon_button, :any
end
Now lets see how to use this component with children in a scene. This assumes we've already made an icon component.
<%= graph font_size: 20 %>
<%= component Example.Component.IconButton,
nil,
id: :icon_button
do %>
<%= component Example.Component.Icon,
@icon,
id: :icon
%>
<% end %>
That's all there is to putting children in components!