Packages
surface
0.11.1
0.12.3
0.12.2
0.12.1
0.12.0
0.11.5
0.11.4
0.11.3
0.11.2
0.11.1
0.11.0
0.10.0
0.9.5
0.9.4
0.9.3
0.9.2
0.9.1
0.9.0
0.8.4
0.8.3
0.8.2
0.8.1
0.8.0
0.7.6
0.7.5
0.7.4
0.7.3
0.7.2
0.7.1
0.7.0
0.6.1
0.6.0
0.5.2
0.5.1
0.5.0
0.4.1
0.4.0
0.3.2
0.3.1
0.3.0
0.2.1
0.2.0
0.1.1
0.1.0
0.1.0-alpha.2
0.1.0-alpha.1
0.1.0-alpha.0
A component based library for Phoenix LiveView
Current section
Files
Jump to
Current section
Files
priv/templates/surface.init/demo/card.ex
defmodule <%= inspect(web_module) %>.Components.Card do
@moduledoc """
A sample component generated by `mix surface.init`.
"""
use Surface.Component
@doc "The header slot"
slot header
@doc "The footer slot"
slot footer
@doc "The main content slot"
slot default
@doc "The background color"
prop rounded, :boolean, default: false
@doc """
The max width.
sm: `max-w-sm`, md: `max-w-md`, lg: `max-w-lg`
"""
prop max_width, :string, values: ["sm", "md", "lg"]
def render(assigns) do
~F"""
<style>
.card {
@apply overflow-hidden shadow-md;
}
.content {
@apply px-6 py-4 text-gray-700 text-base;
}
.header {
@apply p-6 font-semibold text-2xl text-brand w-full bg-gray-200;
}
.footer {
@apply px-6 py-4;
}
</style>
<div class={"card", "max-w-#{@max_width}", "rounded-2xl": @rounded}>
<div class="header">
<#slot {@header}/>
</div>
<div class="content">
<#slot/>
</div>
<div class="footer">
<#slot {@footer}/>
</div>
</div>
"""
end
end