View Source Shino.UI.Breadcrumb (shino v0.1.1-alpha.0)
Provides breadcrumb related components.
Displays the path to the current resource using a hierarchy of links.
Examples
Basic
<Breadcrumb.root>
<Breadcrumb.list>
<Breadcrumb.item>
<Breadcrumb.anchor href="/">Home</Breadcrumb.anchor>
</Breadcrumb.item>
<Breadcrumb.sep />
<Breadcrumb.item>
<Breadcrumb.ellipsis />
</Breadcrumb.item>
<Breadcrumb.sep />
<Breadcrumb.item>
<Breadcrumb.anchor href="/components">Components</Breadcrumb.anchor>
</Breadcrumb.item>
<Breadcrumb.sep />
<Breadcrumb.item>
<Breadcrumb.page>Breadcrumb</Breadcrumb.page>
</Breadcrumb.item>
</Breadcrumb.list>
</Breadcrumb.root>
Collapsed
Use <Breadcrumb.ellipsis />
component to show a collapsed state when the
breadcrumb is too long.
<Breadcrumb.root>
<Breadcrumb.list>
<% # ... %>
<Breadcrumb.item>
<Breadcrumb.ellipsis />
</Breadcrumb.item>
<% # ... %>
</Breadcrumb.list>
</Breadcrumb.root>
References
Summary
Functions
Renders a breadcrumb link.
Renders a breadcrumb ellipsis.
Renders a breadcrumb item.
Renders a breadcrumb list.
Renders a breadcrumb page which indicates the page that user visits currently.
The root contains all the parts of a breadcrumb.
Renders a breadcrumb separator.
Functions
Renders a breadcrumb link.
Attributes
class
(:string
) - Defaults tonil
.- Global attributes are accepted. Supports all globals plus:
["href", "navigate", "patch", "method"]
.
Slots
inner_block
(required)
Renders a breadcrumb ellipsis.
Customization
To create a custom ellipsis, put the custom content to the :inner_block
slot:
<Breadcrumb.ellipsis>
<% # custom content %>
</Breadcrumb.ellipsis>
Attributes
class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
Renders a breadcrumb item.
In theory, you can put anything into a breadcrumb item, such as:
- a link
- a dropdown menu
- ...
Attributes
class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
Renders a breadcrumb list.
Attributes
class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
Renders a breadcrumb page which indicates the page that user visits currently.
Attributes
class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
The root contains all the parts of a breadcrumb.
Attributes
class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block
(required)
Renders a breadcrumb separator.
Customization
To create a custom separator, put the custom content to the :inner_block
slot:
<Breadcrumb.separator>
<% # custom content %>
</Breadcrumb.separator>
Attributes
class
(:string
) - Defaults tonil
.- Global attributes are accepted.
Slots
inner_block