1.0.2 • Published 10 months ago

demofinal v1.0.2

Weekly downloads
-
License
MIT
Repository
-
Last release
10 months ago

`### Example Configuration

tabCustom({
    selector: '.demo',
    animation: 'fadeIn',
    resize: true,
    tabs: {
        class: 'accComon',
        allOpen: 'false',
        toggleParentClass: 'commonParAcc',
        toggleChildClass: 'commonChildAcc',
        responsive: {
            media: 376
        }
    },
    slider: {
        active: true,
        nav: true,
        touch: true,
        responsive: {
            0: {
                items: 2
            },
            600: {
                items: 2
            },
            800: {
                items: 3
            },
            1000: {
                active: false,
            }
        }
    }
});

## `tabCustom` Configuration

The `tabCustom` function provides a customizable tab and accordion component with a range of configuration options. Below is a detailed explanation of each option you can use:

### Configuration Options

- **`selector`**: `string`
  - Specifies the CSS selector for the element(s) to apply the `tabCustom` functionality.

- **`animation`**: `string`
  - Defines the animation effect. Options include `'fadeIn'` (default) and `'slide'` (available in v2).

- **`resize`**: `boolean`
  - If `true`, the component is responsive to window resize events. (Available in v2)

- **`tabs`**: `object`
  - Configuration for accordion functionality.
  - **`class`**: `string` - The class name for the tabs container.
  - **`allOpen`**: `boolean` - If `'false'`, only one tabs section is open at a time.
  - **`toggleParentClass`**: `string` - Class for the parent element that toggles the tabs.
  - **`toggleChildClass`**: `string` - Class for the child elements affected by the toggle.
  - **`responsive`**: `object` - Responsive behavior configuration.
    - **`media`**: `number` - Maximum viewport width for tabs visibility. Set to `0` to disable.

- **`slider`**: `object`
  - Configuration for slider functionality.
  - **`active`**: `boolean` - Enables the slider if `true`.
  - **`nav`**: `boolean` - Includes navigation controls if `true`.
  - **`touch`**: `boolean` - Enables touch gestures if `true`.
  - **`responsive`**: `object` - Responsive behavior configuration.
    - **`0`**, **`600`**, **`800`**, **`1000`**: Configuration for different screen widths.
      - **`items`**: `number` - Number of visible items.
      - **`active`**: `boolean` - If `false`, disables the slider above specified widths.