InlineFlexComponent
import Example from ‘../../src/@primer/gatsby-theme-doctocat/components/example’
Represents two items side-by-side. Typically, this will be an icon (of CSS classes, SVG, or a Heroicon icon) with optional text.
InlineFlexComponent differs from HeroiconComponent in that it is intended to be used within (or next to) text, whereas HeroiconComponent is intended to only present a static list of SVG images (and can be embedded in buttons or shown alone).
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
tag |
Symbol, String |
:span |
The rendered tag name |
classes |
String |
"" |
Classes and attributes |
attributes |
Hash |
{} |
Classes and attributes |
Slots
Icon
Item
Text
Dropdown
Examples
Default
<%= render(Ariadne::InlineFlexComponent.new) do |c| %>
<% c.item { Ariadne::InlineFlexComponent::STATE_OPEN_SVG.html_safe } %>
<% end %>
# TODO: STATE_CLOSED_SVG colors didn't show until it was listed in an example
<%= render(Ariadne::InlineFlexComponent.new) do |c| %>
<% c.item { Ariadne::InlineFlexComponent::STATE_CLOSED_SVG.html_safe } %>
<% end %>
<%= render(Ariadne::InlineFlexComponent.new) do |c| %>
<% c.icon(icon: :check, size: :sm, variant: HeroiconsHelper::Icon::VARIANT_SOLID) %>
<% c.text { "Closed" } %>
<% end %>
Have questions?
Still have questions? Talk to support.