Packages
surface
0.11.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/card_examples.ex
defmodule <%= inspect(web_module) %>.Components.CardExamples do
@moduledoc """
Example using the `rounded` property and slots.
"""
use Surface.Catalogue.Examples,
subject: <%= inspect(web_module) %>.Components.Card
alias <%= inspect(web_module) %>.Components.Card
@example [
title: "rounded",
height: "315px",
assert: ["The header", "user-interfaces"]
]
@doc "An example of a rounded card."
def rounded_card_example(assigns) do
~F"""
<Card rounded>
<:header>
The header
</:header>
Start building rich interactive user-interfaces,
writing minimal custom Javascript. Built on top
of Phoenix LiveView, Surface leverages the amazing
Phoenix Framework to provide a fast and productive
solution to build modern web applications.
</Card>
"""
end
@example [
title: "footer",
height: "360px",
assert: ["The header", "user-interfaces", "#surface", "#phoenix", "#tailwindcss"]
]
@doc "An example of a card with footer."
def card_with_footer_example(assigns) do
~F"""
<style>
.tag {
@apply bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2;
}
</style>
<Card>
<:header>
The header
</:header>
Start building rich interactive user-interfaces,
writing minimal custom Javascript. Built on top
of Phoenix LiveView, Surface leverages the amazing
Phoenix Framework to provide a fast and productive
solution to build modern web applications.
<:footer>
<span class="tag">#surface</span>
<span class="tag">#phoenix</span>
<span class="tag">#tailwindcss</span>
</:footer>
</Card>
"""
end
end