Packages
surface
0.8.2
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/default/card.ex
defmodule <%= inspect(web_module) %>.Components.Card do
@moduledoc """
A sample component generated by the `mix surface.init` task.
"""
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.
"""
prop max_width, :string, values: ["sm", "md", "lg"]
def render(assigns) do
~F"""
<style>
.card {
overflow: hidden;
border: 1px solid #ddd;
}
.content {
padding: 24px 16px;
color: #666;
font-size: 16px;
line-height: 24px;
}
.header {
width: 100%;
background-color: #ddd;
padding: 24px;
font-size: 1.5em;
font-weight: 400;
color: #0d9488;
}
.footer { padding: 1rem 1.5rem }
.rounded-lg { border-radius: 1rem }
.sm { max-width: 34rem }
.md { max-width: 44rem }
.lg { max-width: 54rem }
</style>
<div class={"card", @max_width, "rounded-lg": @rounded}>
<div class="header">
<#slot {@header} />
</div>
<div class="content">
<#slot />
</div>
<div class="footer">
<#slot {@footer} />
</div>
</div>
"""
end
end