rmc-tabs

rmc-tabs

Version 1.2.29
Published 5 years ago
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

Namespaces

Models
- TabData

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: IGestureStatus) => 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
) => JSX.Element;

property setContentLayout

setContentLayout: (div: HTMLDivElement) => void;

method componentWillReceiveProps

componentWillReceiveProps: (nextProps: PropsType) => void;

method render

render: () => JSX.Element;

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: IGestureStatus) => void;
    onPanMove: (status: IGestureStatus) => void;
    onPanEnd: () => void;
    setCurrentOffset: (offset: string | number) => string | number;
};

property onSwipe

onSwipe: (status: IGestureStatus) => 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: () => JSX.Element;

method renderContent

renderContent: (
    getSubElements?: (
        defaultPrefix?: string,
        allPrefix?: string
    ) => { [key: string]: React.ReactNode }
) => JSX.Element;

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)

Peer Dependencies (0)

No peer dependencies.

Badge

To add a badge like this oneto 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>

Updated 1 year ago.
Package analyzed in 5060 ms.
Missing or incorrect documentation? Open an issue for this package.