Connected.Components/Components/Tabs/Tabs.razor

@namespace Connected.Components
@inherits UIComponent

<div @attributes="UserAttributes" class="@TabsClassnames" style="@Style">
    <CascadingValue Value="this" IsFixed="true">
        <div class="@ToolbarClassnames">
            <div class="mud-tabs-toolbar-inner" style="@MaxHeightStyles">
                @if (HeaderPosition == TabHeaderPosition.Before && Header != null)
                {
                    <div class="mud-tabs-header mud-tabs-header-before">
                        @Header(this)
                    </div>
                }
                @if (_showScrollButtons)
                {
                    <div class="mud-tabs-scroll-button">
                        <IconButton Icon="@_prevIcon" Color="@ScrollIconColor" OnClick="@((e) => ScrollPrev())" Disabled="@_prevButtonDisabled" />
                    </div>
                }
                <div @ref="@_tabsContentSize" class="mud-tabs-toolbar-content">
                    <div class="@WrapperClassnames" style="@WrapperScrollStyle">
                        @foreach (TabPanel panel in _panels)
                        {
                            @if (panel.TabContent == null && panel.TabWrapperContent == null)
                            {
                                <Tooltip Placement="@GetTooltipPlacement()" Text="@panel.ToolTip">
                                    @RenderTab(panel)
                                </Tooltip>
                            }
                            else
                            {
                                if (panel.TabWrapperContent == null)
                                {
                                    <div class="d-inline-block" style="width: fit-content;">
                                        @RenderTab(panel)
                                    </div>
                                }
                                else
                                {
                                    <div class="d-inline-block" style="width: fit-content;">
                                        @panel.TabWrapperContent(RenderTab(panel))
                                    </div>
                                }
                            }
                        }
                        @if (!HideSlider)
                        {
                            <div class="@SliderClass" style="@SliderStyle"></div>
                        }
                    </div>
                </div>
                @if (_showScrollButtons)
                {
                    <div class="mud-tabs-scroll-button">
                        <IconButton Icon="@_nextIcon" Color="@ScrollIconColor" OnClick="@((e) => ScrollNext())" Disabled="@_nextButtonDisabled" />
                    </div>
                }
                @if (HeaderPosition == TabHeaderPosition.After && Header != null)
                {
                    <div class="mud-tabs-header mud-tabs-header-after">
                        @Header(this)
                    </div>
                }
            </div>
        </div>
        @if (PrePanelContent != null)
        {
            @PrePanelContent(ActivePanel)
        }
        <div class="@PanelsClassnames">
            @ChildContent
        </div>
    </CascadingValue>
</div>

@code {
    RenderFragment RenderTab(TabPanel panel) => @<div @ref="panel.PanelRef" class="@GetTabClass(panel)" style="@GetTabStyle(panel)" @onclick=@( e => ActivatePanel(panel, e, false) )>
        @if (TabPanelHeaderPosition == TabHeaderPosition.Before && TabPanelHeader != null)
            {
                <div class="mud-tabs-panel-header mud-tabs-panel-header-before">
                    @TabPanelHeader(panel)
                </div>
            }
            @if (panel.TabContent != null)
            {
                @panel.TabContent
            }
            else if (!String.IsNullOrEmpty(panel.Text) && String.IsNullOrEmpty(panel.Icon))
            {
                @((MarkupString)panel.Text)
            }
            else if (String.IsNullOrEmpty(panel.Text) && !String.IsNullOrEmpty(panel.Icon))
            {
                <Icon Icon="@panel.Icon" Color="@IconColor" />
            }
            else if (!String.IsNullOrEmpty(panel.Text) && !String.IsNullOrEmpty(panel.Icon))
            {
                <Icon Icon="@panel.Icon" Color="@IconColor" Class="mud-tab-icon-text" />
                @((MarkupString)panel.Text)
            }
            @if (panel.BadgeData != null || panel.BadgeDot)
            {
                <Badge Dot="@panel.BadgeDot" Content="@panel.BadgeData" Color="@panel.BadgeColor" Class="mud-tab-badge" />
            }
            @if (TabPanelHeaderPosition == TabHeaderPosition.After && TabPanelHeader != null)
            {
                <div class="mud-tabs-panel-header mud-tabs-panel-header-after">
                    @TabPanelHeader(panel)
                </div>
            }
        </div>;
}