View Source Shino.UI.VerticalNav (shino v0.1.1-alpha.0)
Provides vertical navigation related components.
Examples
<VerticalNav.root>
<VerticalNav.group>
<VerticalNav.item active={assigns[:nav] == :home}>
<VerticalNav.anchor navigate={~p"/"}>
<.icon name="hero-home" class="mr-2 h-4 w-4" /> Overview
</VerticalNav.anchor>
</VerticalNav.item>
<VerticalNav.item active={assigns[:nav] == :income}>
<VerticalNav.anchor navigate={~p"/income"} active={assigns[:nav] == :income}>
<.icon name="hero-chart-pie" class="mr-2 h-4 w-4" /> Income
</VerticalNav.anchor>
</VerticalNav.item>
<Collapsible.root
:let={root}
id="nav-app_releases"
default_open={match?({:app_releases, _}, assigns[:nav])}
>
<Collapsible.trigger for={root}>
<VerticalNav.item>
<VerticalNav.plain>
<.icon name="hero-device-phone-mobile" class="mr-2 h-4 w-4" /> APP Versions
<.icon name="hero-chevron-down" class="ml-auto h-4 w-4" />
</VerticalNav.plain>
</VerticalNav.item>
</Collapsible.trigger>
<Collapsible.content for={root} class="mt-2 pl-6">
<VerticalNav.sub_group>
<VerticalNav.item active={assigns[:nav] == {:app_releases, :ios}}>
<VerticalNav.anchor navigate={~p"/app_releases/ios"}>
iOS APP Versions
</VerticalNav.anchor>
</VerticalNav.item>
<VerticalNav.item active={assigns[:nav] == {:app_releases, :android}}>
<VerticalNav.anchor navigate={~p"/app_releases/android"}>
Android APP Versions
</VerticalNav.anchor>
</VerticalNav.item>
</VerticalNav.sub_group>
</Collapsible.content>
</Collapsible.root>
</VerticalNav.group>
</VerticalNav.root>
Summary
Functions
Renders a sidebar anchor.
Renders a sidebar group.
Renders a sidebar item.
Renders a sidebar plain.
The root contains all the parts of a collapsible.
Renders a sidebar sub_group.
Functions
Renders a sidebar anchor.
It should be used with <VerticalNav.item />
.
Attributes
class
(:string
) - Defaults tonil
.- Global attributes are accepted. Supports all globals plus:
["href", "navigate", "patch", "method"]
.
Slots
inner_block
(required)
Renders a sidebar group.
Attributes
class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
Renders a sidebar item.
Attributes
class
(:string
) - Defaults tonil
.active
(:boolean
) - Defaults tofalse
.- Global attributes are accepted.
Slots
inner_block
(required)
Renders a sidebar plain.
It should be used with <VerticalNav.item />
.
Attributes
class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
The root contains all the parts of a collapsible.
Attributes
class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
Renders a sidebar sub_group.
Attributes
class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)