Tabs

import 'package:flutter/material.dart';
import 'package:remix/remix.dart';

class TabsExample extends StatefulWidget {
  const TabsExample({super.key});

  @override
  State<TabsExample> createState() => _TabsExampleState();
}

class _TabsExampleState extends State<TabsExample> {
  String _tab = 'tab1';

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 320,
      height: 280,
      child: RemixTabs(
        selectedTabId: _tab,
        onChanged: (id) => setState(() => _tab = id),
        child: Column(
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            RemixTabBar(
              style: tabBarStyle,
              child: Row(
                mainAxisSize: MainAxisSize.max,
                children: [
                  RemixTab(tabId: 'tab1', style: tabStyle, label: 'Tab 1'),
                  const SizedBox(width: 8),
                  RemixTab(tabId: 'tab2', style: tabStyle, label: 'Tab 2'),
                ],
              ),
            ),
            const SizedBox(height: 8),
            Expanded(
              child: RemixTabView(
                tabId: 'tab1',
                style: tabViewStyle,
                child: const Text('Content for Tab 1'),
              ),
            ),
            Expanded(
              child: RemixTabView(
                tabId: 'tab2',
                style: tabViewStyle,
                child: const Text('Content for Tab 2'),
              ),
            ),
          ],
        ),
      ),
    );
  }

  TabBarStyler get tabBarStyle {
    return TabBarStyler()
        .padding(.all(4))
        .borderRadius(.circular(12))
        .color(const Color(0xFFF4F6FF))
        .border(.color(Colors.indigo.shade100));
  }

  TabStyler get tabStyle {
    return TabStyler()
        .padding(.horizontal(18))
        .padding(.vertical(10))
        .borderRadius(.circular(10))
        .color(Colors.transparent)
        .labelFontSize(14)
        .labelFontWeight(FontWeight.w600)
        .labelColor(Colors.indigo.shade600)
        .iconColor(Colors.indigo.shade500)
        .onHovered(
          TabStyler()
              .color(Colors.indigo.shade50)
              .labelColor(Colors.indigo.shade700),
        )
        .onSelected(
          TabStyler()
              .color(Colors.white)
              .border(.color(Colors.indigo.shade400).width(2))
              .labelColor(Colors.indigo.shade700)
              .iconColor(Colors.indigo.shade600),
        );
  }

  TabViewStyler get tabViewStyle {
    return TabViewStyler()
        .padding(.all(20))
        .borderRadius(.circular(14))
        .color(Colors.white)
        .border(.color(Colors.indigo.shade100));
  }
}

import 'package:flutter/material.dart';
import 'package:remix/remix.dart';
import 'ui/ui.dart';

class FortalTabsExample extends StatefulWidget {
  const FortalTabsExample({super.key});

  @override
  State<FortalTabsExample> createState() => _FortalTabsExampleState();
}

class _FortalTabsExampleState extends State<FortalTabsExample> {
  String _tab = 'tab1';

  @override
  Widget build(BuildContext context) {
    return RemixTabs(
      selectedTabId: _tab,
      onChanged: (id) => setState(() => _tab = id),
      child: Column(
        children: [
          FortalTabBar(
            child: Row(
              children: [
                FortalTab(
                  tabId: 'tab1',
                  label: 'Tab 1',
                ),
                FortalTab(
                  tabId: 'tab2',
                  label: 'Tab 2',
                ),
              ],
            ),
          ),
          const FortalTabView(tabId: 'tab1', child: Text('Content 1')),
          const FortalTabView(tabId: 'tab2', child: Text('Content 2')),
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:naked_ui/naked_ui.dart';
import 'package:remix/remix.dart';

// Tabs Container
RemixTabs remixTabsConstructor({
  Key? key,
  required Widget child,
  NakedTabController? controller,
  String? selectedTabId,
  ValueChanged<String>? onChanged,
  Axis orientation = Axis.horizontal,
  NakedTabActivationMode activationMode = NakedTabActivationMode.automatic,
  bool enabled = true,
  VoidCallback? onEscapePressed,
}) => throw UnimplementedError();

// Tab Bar
RemixTabBar remixTabBarConstructor({
  Key? key,
  required Widget child,
  TabBarStyler style = const TabBarStyler.create(),
  TabBarSpec? styleSpec,
}) => throw UnimplementedError();

// Individual Tab
RemixTab remixTabConstructor({
  Key? key,
  required String tabId,
  Widget? child,
  String? label,
  IconData? icon,
  bool enabled = true,
  MouseCursor mouseCursor = SystemMouseCursors.click,
  bool enableFeedback = true,
  FocusNode? focusNode,
  bool autofocus = false,
  ValueChanged<bool>? onFocusChange,
  ValueChanged<bool>? onHoverChange,
  ValueChanged<bool>? onPressChange,
  ValueWidgetBuilder<NakedTabState>? builder,
  String? semanticLabel,
  TabStyler style = const TabStyler.create(),
  TabSpec? styleSpec,
}) => throw UnimplementedError();

// Tab View
RemixTabView remixTabViewConstructor({
  Key? key,
  required String tabId,
  required Widget child,
  bool maintainState = true,
  TabViewStyler style = const TabViewStyler.create(),
  TabViewSpec? styleSpec,
}) => throw UnimplementedError();