Skip to content

Tab Modal

Jump to bottom
Dan edited this page Jan 10, 2024 · 1 revision

TabModal

Overview

The TabModal component is a versatile and customizable modal dialog box with tabbed navigation for React applications. It supports multiple tabs with individual content, allowing users to easily switch between different sections within the modal. This component is particularly useful for complex modal dialogues requiring organized and accessible content.

Installation

To use the TabModal component in your project, you need to access it through the window.$_gooee.framework as shown:

const { TabModal } = window.$_gooee.framework;

Usage

The TabModal component can be used to display a modal with tabbed navigation. Each tab can contain custom content, and the component supports various customization options including size, fixed positioning, and custom styling.

Props

The TabModal component accepts the following props:

  • tabs: An array of objects representing each tab. Each object should have a name, label, and content.
  • style: CSS styles to apply to the modal.
  • size: Adjusts the size of the modal. Accepts standard size keywords.
  • onClose: Function to be called when the modal is closed.
  • title: Text or component to be used as the modal's title.
  • icon: An optional icon to display in the modal header.
  • fixed: If true, the modal will have a fixed position.
  • bodyClassName: Additional CSS class names to apply to the modal body.

Modal Structure

The modal consists of the following key elements:

  • modal-header: Contains the title, icon, close button, and tab navigation.
  • modal-tabs: Displays the tabs for navigation within the modal.
  • modal-body: The main content area for the active tab.

Integration with $_gooee.framework

The component uses the Button and Scrollable components from window.$_gooee.framework, demonstrating integration with external frameworks or libraries.

Accessibility

The TabModal component should be accessible and navigable. Ensure that it meets all accessibility requirements for your specific use case, including focus management and keyboard navigation.

Browser Support

The TabModal component is compatible with all modern web browsers, including Chrome, Firefox, Safari, and Edge.

Examples

Basic TabModal Usage

<TabModal
    tabs={[
        { name: 'tab1', label: 'Tab 1', content: <div>Content for Tab 1</div> },
        { name: 'tab2', label: 'Tab 2', content: <div>Content for Tab 2</div> }
    ]}
    title="Modal Title"
    onClose={handleClose}
/>

TabModal with Icon

<TabModal
    tabs={[/* Tab objects here */]}
    title="Modal Title"
    icon={<YourIcon />}
    onClose={handleClose}
/>

Custom Styled TabModal

<TabModal
    tabs={[/* Tab objects here */]}
    style={{ backgroundColor: 'lightblue' }}
    size="lg"
    onClose={handleClose}
/>

Contributing

Contributions to enhance the TabModal component are welcomed. Follow the project's contribution guidelines for submitting bug fixes, feature requests, or enhancements.

Clone this wiki locally