Packages
moon
2.89.4
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/pages/components/tooltip_page.ex
defmodule MoonWeb.Pages.Components.TooltipPage do
@moduledoc false
use MoonWeb, :live_view
alias Moon.Components.{Button, Tooltip}
alias MoonWeb.Components.ExampleAndCode
alias MoonWeb.Components.Page
alias MoonWeb.Components.ComponentPageDescription
alias MoonWeb.Components.PropsTable
alias MoonWeb.Components.Facing.DeprecationWarning
data(breadcrumbs, :any,
default: [
%{
to: "#",
name: "Components v1"
},
%{
to: "/components/tooltip",
name: "Tooltip"
}
]
)
data(props_info_array, :list,
default: [
%{
:name => ~c"children",
:type => ~c"slot",
:required => ~c"Yes",
:default => ~c"-",
:description => ~c"Component or element which Tooltip wraps around"
},
%{
:name => ~c"text",
:type => ~c"string",
:required => ~c"Yes",
:default => ~c"-",
:description => ~c"Textual content for Tooltip"
},
%{
:name => ~c"icon",
:type => ~c"-",
:required => ~c"-",
:default => ~c"-",
:description => ~c"Icon shown in the Tooltip"
},
%{
:name => ~c"content",
:type => ~c"-",
:required => ~c"-",
:default => ~c"-",
:description => ~c"TODO - Custom component shown in the Tooltip"
},
%{
:name => ~c"placement",
:type => ~c"top | bottom | left | right",
:required => ~c"Yes",
:default => ~c"-",
:description => ~c"Where Tooltip will be shown"
},
%{
:name => ~c"show",
:type => ~c"-",
:required => ~c"-",
:default => ~c"-",
:description => ~c"TODO - Should Tooltip be shown persistently"
}
]
)
def handle_params(_params, uri, socket) do
{:noreply, assign(socket, uri: uri)}
end
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<ComponentPageDescription title="Tooltip">
<DeprecationWarning
name="Tooltip"
href={live_path(MoonWeb.Endpoint, MoonWeb.Pages.Design.TooltipPage)}
/>
</ComponentPageDescription>
{#for placement <- ["top", "right", "bottom", "left"]}
<ExampleAndCode title={placement} id={"tooltip_#{placement}"}>
<:example>
<Tooltip placement={placement} text={placement}>
<Button variant="primary">Hover Me</Button>
</Tooltip>
</:example>
<:code>{tooltip_1_code(placement)}</:code>
</ExampleAndCode>
{/for}
<PropsTable data={@props_info_array} />
</Page>
"""
end
def tooltip_1_code(placement) do
"""
<Tooltip placement="#{placement}" text="#{placement}">
<Button variant="primary">Hover Me</Button>
</Tooltip>
"""
end
end