Packages
moon
2.77.0
2.90.5
retired
2.90.4
2.90.3
2.90.2
2.90.1
2.90.0
2.89.4
2.89.1
2.89.0
2.88.0
2.87.11
2.87.10
2.87.9
2.87.8
2.87.7
2.87.6
2.87.5
2.87.4
2.87.3
2.87.2
2.87.1
2.87.0
2.86.1
2.86.0
2.85.1
2.85.0
2.84.0
2.83.0
2.82.0
2.81.4
2.81.3
2.81.2
2.81.1
2.81.0
2.80.2
2.80.1
2.80.0
2.79.13
2.79.12
2.79.11
2.79.10
2.79.9
2.79.8
2.79.7
2.79.6
2.79.5
2.79.4
2.79.3
2.79.2
2.79.1
2.79.0
2.78.4
2.78.3
2.78.2
2.78.1
2.78.0
2.77.0
2.76.5
2.76.4
2.76.3
2.76.2
2.76.1
2.76.0
2.75.0
2.74.1
2.74.0
2.73.8
2.73.7
2.73.6
2.73.5
2.73.4
2.73.3
2.73.2
2.73.1
2.73.0
2.72.5
2.72.4
2.72.3
2.72.2
2.72.1
2.72.0
2.71.1
2.71.0
2.70.0
2.69.2
2.69.1
2.69.0
2.68.11
2.68.10
Components-based design system written in elixir
Current section
Files
Jump to
Current section
Files
lib/moon_web/examples/design/table_example/responsive.ex
defmodule MoonWeb.Examples.Design.TableExample.Responsive do
@moduledoc """
Responsive design for the table. To see what it's about - just
resize the window, or press <F12> to open the console and resize it
sizes can be ssen here - https://tailwindcss.com/docs/screens
"""
use Moon.StatelessComponent
use MoonWeb, :example
alias Moon.Design.Table
import MoonWeb.Helpers.Lorem
prop(models, :list,
default:
Enum.map(1..5, fn x ->
%{
id: x,
name: "Name #{x}",
created_at: DateTime.add(DateTime.utc_now(), -3600 + x),
user: "User ##{x}",
lorem: "lorem ipsum dolor sit almet",
long_text: lorem()
}
end)
)
def render(assigns) do
~F"""
<Table items={model <- @models} selected={nil}>
<Table.Column label="ID" width="hidden 2xl:table-cell">
{model.id}
</Table.Column>
<Table.Column label="Name" width="hidden sm:table-cell">
{model.name}
</Table.Column>
<Table.Column label="Created at" width="hidden sm:table-cell">
<p class="hidden xl:block">{Timex.format!(model.created_at, "%b %d, %Y, %H:%M:%S", :strftime)}</p>
<p class="block xl:hidden">{Timex.format!(model.created_at, "%b %d, %Y", :strftime)}</p>
</Table.Column>
<Table.Column label="User" width="hidden xl:table-cell">
{model.user}
</Table.Column>
<Table.Column label="Short text" width="hidden lg:table-cell">
{model.lorem}
</Table.Column>
<Table.Column label="Long text" width="hidden md:table-cell">
<p class="hidden xl:block">{model.long_text}</p>
<p class="block xl:hidden">{model.long_text |> String.slice(0, 70)}...</p>
</Table.Column>
<Table.Column class="table-cell sm:hidden">
#{model.id}: {model.name} by {model.user} at {Timex.format!(model.created_at, "%b %d, %Y", :strftime)}
<br>
{model.long_text |> String.slice(0, 30)}...
</Table.Column>
</Table>
"""
end
def code() do
"""
alias Moon.Design.Table
import MoonWeb.Helpers.Lorem
prop(models, :list,
default:
Enum.map(1..5, fn x ->
%{
id: x,
name: "Name \#{x}",
created_at: DateTime.add(DateTime.utc_now(), -3600 + x),
user: "User #\#{x}",
lorem: "lorem ipsum dolor sit almet",
long_text: lorem()
}
end)
)
def render(assigns) do
~F\"""
<Table items={model <- @models} selected={nil}>
<Table.Column label="ID" width="hidden 2xl:table-cell">
{model.id}
</Table.Column>
<Table.Column label="Name" width="hidden sm:table-cell">
{model.name}
</Table.Column>
<Table.Column label="Created at" width="hidden sm:table-cell">
<p class="hidden xl:block">{Timex.format!(model.created_at, "%b %d, %Y, %H:%M:%S", :strftime)}</p>
<p class="block xl:hidden">{Timex.format!(model.created_at, "%b %d, %Y", :strftime)}</p>
</Table.Column>
<Table.Column label="User" width="hidden xl:table-cell">
{model.user}
</Table.Column>
<Table.Column label="Short text" width="hidden lg:table-cell">
{model.lorem}
</Table.Column>
<Table.Column label="Long text" width="hidden md:table-cell">
<p class="hidden xl:block">{model.long_text}</p>
<p class="block xl:hidden">{model.long_text |> String.slice(0, 70)}...</p>
</Table.Column>
<Table.Column class="table-cell sm:hidden">
\#{model.id}: {model.name} by {model.user} at {Timex.format!(model.created_at, "%b %d, %Y", :strftime)}
<br>
{model.long_text |> String.slice(0, 30)}...
</Table.Column>
</Table>
\"""
end
"""
end
end