32 lines
1.2 KiB
PHP
32 lines
1.2 KiB
PHP
{{--
|
|
One tab button inside x-global::navigation.tabs.
|
|
|
|
Props:
|
|
name string REQUIRED. Pairs the tab with its panel
|
|
({group}-tab-{name} controls {group}-panel-{name}).
|
|
icon string Optional Font Awesome classes (e.g. "fa-users").
|
|
count mixed Optional count badge; countLabel gives it an
|
|
accessible name ("7 people" instead of bare "7").
|
|
selected bool Server-rendered initial selection (exactly one tab
|
|
per group should pass true).
|
|
--}}
|
|
@props([
|
|
'name',
|
|
'icon' => null,
|
|
'count' => null,
|
|
'countLabel' => null,
|
|
'selected' => false,
|
|
])
|
|
@aware(['group'])
|
|
|
|
<button type="button"
|
|
role="tab"
|
|
id="{{ $group }}-tab-{{ $name }}"
|
|
aria-controls="{{ $group }}-panel-{{ $name }}"
|
|
aria-selected="{{ $selected ? 'true' : 'false' }}"
|
|
tabindex="{{ $selected ? '0' : '-1' }}"
|
|
data-tab-name="{{ $name }}"
|
|
{{ $attributes->merge(['class' => 'lt-tab'.($selected ? ' on' : '')]) }}>
|
|
@if ($icon)<i class="fa {{ $icon }}" aria-hidden="true"></i> @endif{{ $slot }}@if ($count !== null) <span class="ct" @if ($countLabel) aria-label="{{ $countLabel }}" @endif>{{ $count }}</span>@endif
|
|
</button>
|