rmc-tabs

  • Version 1.2.29
  • Published
  • 165 kB
  • 2 dependencies
  • MIT license

Install

npm i rmc-tabs
yarn add rmc-tabs
pnpm add rmc-tabs

Overview

React Mobile Tabs Component(web & react-native)

Index

Classes

class DefaultTabBar

class DefaultTabBar extends React.PureComponent<PropsType, StateType> {}

    constructor

    constructor(props: PropsType);

      property defaultProps

      static defaultProps: PropsType;

        property getTabSize

        getTabSize: (page: number, tabLength: number) => number;

          property getTransformByIndex

          getTransformByIndex: (
          props: PropsType
          ) => { transform: string; showPrev: boolean; showNext: boolean };

            property isTabBarVertical

            isTabBarVertical: (
            position?: 'left' | 'right' | 'top' | 'bottom' | undefined
            ) => boolean;

              property layout

              layout: HTMLDivElement;

                property onPan

                onPan: {
                onPanStart: () => void;
                onPanMove: (status: any) => void;
                onPanEnd: () => void;
                setCurrentOffset: (offset: string | number) => string | number;
                };

                  property onPress

                  onPress: (index: number) => void;

                    property renderTab

                    renderTab: (
                    t: Models.TabData,
                    i: number,
                    size: number,
                    isTabBarVertical: boolean
                    ) => any;

                      property setContentLayout

                      setContentLayout: (div: HTMLDivElement) => void;

                        method componentWillReceiveProps

                        componentWillReceiveProps: (nextProps: PropsType) => void;

                          method render

                          render: () => any;

                            class Tabs

                            class Tabs extends Component<PropsType, StateType> {}

                              constructor

                              constructor(props: PropsType);

                                property defaultProps

                                static defaultProps: PropsType;

                                  property DefaultTabBar

                                  static DefaultTabBar: typeof DefaultTabBar;

                                    property layout

                                    layout: HTMLDivElement;

                                      property onPan

                                      onPan: {
                                      onPanStart: (status: any) => void;
                                      onPanMove: (status: any) => void;
                                      onPanEnd: () => void;
                                      setCurrentOffset: (offset: string | number) => string | number;
                                      };

                                        property onSwipe

                                        onSwipe: (status: any) => void;

                                          property setContentLayout

                                          setContentLayout: (div: HTMLDivElement) => void;

                                            method getContentPosByIndex

                                            getContentPosByIndex: (
                                            index: number,
                                            isVertical: boolean,
                                            useLeft?: boolean
                                            ) => string;

                                              method goToTab

                                              goToTab: (
                                              index: number,
                                              force?: boolean,
                                              usePaged?: boolean | undefined,
                                              props?: Readonly<{ children?: React.ReactNode }> & Readonly<PropsType>
                                              ) => boolean;

                                                method render

                                                render: () => any;

                                                  method renderContent

                                                  renderContent: (
                                                  getSubElements?: (
                                                  defaultPrefix?: string,
                                                  allPrefix?: string
                                                  ) => { [key: string]: any }
                                                  ) => any;

                                                    method tabClickGoToTab

                                                    tabClickGoToTab: (index: number) => void;

                                                      Interfaces

                                                      interface PropsType

                                                      interface PropsType {}

                                                        property animated

                                                        animated?: boolean;
                                                        • whether to change tabs with animation | default: true

                                                        property destroyInactiveTab

                                                        destroyInactiveTab?: boolean;
                                                        • destroy inactive tab | default: false

                                                        property distanceToChangeTab

                                                        distanceToChangeTab?: number;
                                                        • distance to change tab, width ratio | default: 0.3

                                                        property initialPage

                                                        initialPage?: number | string;
                                                        • initial Tab, index or key

                                                        property noRenderContent

                                                        noRenderContent?: boolean;
                                                        • can't render content | default: false

                                                        property onChange

                                                        onChange?: (tab: Models.TabData, index: number) => void;
                                                        • callback when tab is switched

                                                        property onTabClick

                                                        onTabClick?: (tab: Models.TabData, index: number) => void;
                                                        • on tab click

                                                        property page

                                                        page?: number | string;
                                                        • current tab, index or key

                                                        property prerenderingSiblingsNumber

                                                        prerenderingSiblingsNumber?: number;
                                                        • pre-render nearby # sibling, Infinity: render all the siblings, 0: render current page | default: 1

                                                        property renderTabBar

                                                        renderTabBar?: ((props: TabBarPropsType) => React.ReactNode) | false;
                                                        • render for TabBar

                                                        property swipeable

                                                        swipeable?: boolean;
                                                        • whether to switch tabs with swipe gestrue in the content | default: true

                                                        property tabBarActiveTextColor

                                                        tabBarActiveTextColor?: string;
                                                        • tabBar active text color

                                                        property tabBarBackgroundColor

                                                        tabBarBackgroundColor?: string;
                                                        • tabBar background color

                                                        property tabBarInactiveTextColor

                                                        tabBarInactiveTextColor?: string;
                                                        • tabBar inactive text color

                                                        property tabBarPosition

                                                        tabBarPosition?: 'top' | 'bottom' | 'left' | 'right';
                                                        • TabBar's position | default: top

                                                        property tabBarTextStyle

                                                        tabBarTextStyle?: React.CSSProperties | any;
                                                        • tabBar text style

                                                        property tabBarUnderlineStyle

                                                        tabBarUnderlineStyle?: React.CSSProperties | any;
                                                        • tabBar underline style

                                                        property tabDirection

                                                        tabDirection?: 'horizontal' | 'vertical';
                                                        • tab paging direction | default: horizontal

                                                        property tabs

                                                        tabs: Models.TabData[];
                                                        • tabs data

                                                        property useLeftInsteadTransform

                                                        useLeftInsteadTransform?: boolean;
                                                        • use left instead of transform | default: false

                                                        property useOnPan

                                                        useOnPan?: boolean;
                                                        • use scroll follow pan | default: true

                                                        property usePaged

                                                        usePaged?: boolean;
                                                        • use paged | default: true

                                                        interface TabBarPropsType

                                                        interface TabBarPropsType {}

                                                          property activeTab

                                                          activeTab: number;
                                                          • current active tab

                                                          property animated

                                                          animated: boolean;
                                                          • use animate | default: true

                                                          property goToTab

                                                          goToTab: (index: number) => void;
                                                          • call this function to switch tab

                                                          property instanceId

                                                          instanceId: number;

                                                            property onTabClick

                                                            onTabClick?: (tab: Models.TabData, index: number) => void;
                                                            • on tab click

                                                            property page

                                                            page?: number;
                                                            • page size of tabbar's tab | default: 5

                                                            property renderTab

                                                            renderTab?: (tab: Models.TabData) => React.ReactNode;
                                                            • render the tab of tabbar

                                                            property renderUnderline

                                                            renderUnderline?: (style: React.CSSProperties | any) => React.ReactNode;
                                                            • render the underline of tabbar

                                                            property tabBarActiveTextColor

                                                            tabBarActiveTextColor?: string;
                                                            • tabBar active text color

                                                            property tabBarBackgroundColor

                                                            tabBarBackgroundColor?: string;
                                                            • tabBar background color

                                                            property tabBarInactiveTextColor

                                                            tabBarInactiveTextColor?: string;
                                                            • tabBar inactive text color

                                                            property tabBarPosition

                                                            tabBarPosition?: 'top' | 'bottom' | 'left' | 'right';
                                                            • tabBar's position | defualt: top

                                                            property tabBarTextStyle

                                                            tabBarTextStyle?: React.CSSProperties | any;
                                                            • tabBar text style

                                                            property tabBarUnderlineStyle

                                                            tabBarUnderlineStyle?: React.CSSProperties | any;
                                                            • tabBar underline style

                                                            property tabs

                                                            tabs: Models.TabData[];
                                                            • tabs data

                                                            Namespaces

                                                            namespace Models

                                                            namespace Models {}

                                                              interface TabData

                                                              interface TabData {}

                                                                property key

                                                                key?: string;

                                                                  property title

                                                                  title: React.ReactNode;

                                                                    index signature

                                                                    [key: string]: any;
                                                                    • for user's custom extends

                                                                    Package Files (5)

                                                                    Dependencies (2)

                                                                    Dev Dependencies (21)

                                                                    Peer Dependencies (0)

                                                                    No peer dependencies.

                                                                    Badge

                                                                    To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                    You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/rmc-tabs.

                                                                    • Markdown
                                                                      [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/rmc-tabs)
                                                                    • HTML
                                                                      <a href="https://www.jsdocs.io/package/rmc-tabs"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>