Sha256: f47abcce88bfd0494c90824cb6bc6d642c41f33590f8255c73ca2d8d9ff7953c
Contents?: true
Size: 1.56 KB
Versions: 66
Compression:
Stored size: 1.56 KB
Contents
# frozen_string_literal: true
module Ariadne
# Tab component to be used with bottom_tab_nav
# Accessibility considerations:
# aria-controls="tabpanelID": Use this if content is being conditionally controlled. Reference the ID of the content being controlled
class BottomTabComponent < Ariadne::Component
DEFAULT_TAG = :a
TAG_OPTIONS = [DEFAULT_TAG].freeze
DEFAULT_CLASSES = "ariadne-w-full ariadne-py-4 ariadne-flex ariadne-flex-col ariadne-justify-center ariadne-items-center ariadne-cursor-pointer [&>span]:ariadne-p-0 ariadne-border-y-2 ariadne-border-r-2 first:ariadne-border-l-2 ariadne-border-solid ariadne-border-black"
TAB_BACKGROUND_COLOR_CLASSES = "aria-selected:ariadne-bg-gray-200"
DEFAULT_ATTRIBUTES = {
"data-action": "click->options#select",
"data-options-target": "option",
role: "tab",
tabindex: "0",
}
renders_one :icon, Ariadne::HeroiconComponent
# @example Default
#
# <%= render(Ariadne::BottomTabComponent.new) { "Example" } %>
#
# @param tag [Symbol, String] The rendered tag name.
# @param classes [String] <%= link_to_classes_docs %>
# @param attributes [Hash] <%= link_to_attributes_docs %>
def initialize(tag: DEFAULT_TAG, classes: "", active: false, attributes: {})
@tag = check_incoming_tag(DEFAULT_TAG, tag)
@classes = merge_class_names(
DEFAULT_CLASSES,
TAB_BACKGROUND_COLOR_CLASSES,
classes,
)
@attributes = DEFAULT_ATTRIBUTES
.merge({ "aria-selected": active })
.merge(attributes)
end
end
end
Version data entries
66 entries across 66 versions & 1 rubygems