Pajamas ViewComponents
x
1
<span class='gl-badge badge badge-pill badge-success md js-special-badge' data-count='1' id='special-badge-22'><svg class="s16 gl-icon gl-badge-icon js-special-badge-icon gl-mr-2" data-testid="tanuki-icon"><use href="/assets/icons-be8ca3b37e0f9a5adb0ee8b20a3ae0e568a9b5ac85539f8eaa965b6f7b4b38a1.svg#tanuki"></use></svg>I'm special.</span>
1
2
3
4
5
6
7
8
9
render Pajamas::BadgeComponent.new(
  "I'm special.",
  class: "js-special-badge",
  data: { count: 1 },
  icon: :tanuki,
  icon_classes: ["js-special-badge-icon"],
  id: "special-badge-22",
  variant: :success
)

Custom HTML attributes and icon classes

Any extra options passed into the component are treated as HTML attributes. This makes adding data or an id easy.

CSS classes provided with the class: option are combined with the component classes.

It is also possible to set custom icon_classes:.

The order in which you provide these keywords doesn't matter.

No params configured.