react-tabs, ReactJS的易于访问和易于使用的标签组件

分享于 

14分钟阅读

GitHub

  繁體 雙語
React tabs component
  • 源代码名称:react-tabs
  • 源代码网址:http://www.github.com/reactjs/react-tabs
  • react-tabs源代码文档
  • react-tabs源代码下载
  • Git URL:
    git://www.github.com/reactjs/react-tabs.git
    Git Clone代码到本地:
    git clone http://www.github.com/reactjs/react-tabs
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/reactjs/react-tabs
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    响应选项卡 Build Statusnpm version

    ReactJS的易于访问和易于使用的标签组件。

    https://reactcommunity.org/react-tabs/

    支持React 0.14.9 +,15.3 + 和 16 +

    安装

    yarn add react-tabs

    在HTML文档中,你也可以直接使用response选项卡作为

    <scriptsrc="https://unpkg.com/react-tabs@2/dist/react-tabs.development.js"/><!-- or --><scriptsrc="https://unpkg.com/react-tabs@2/dist/react-tabs.production.min.js"/>

    例如UMD构建的使用可以查看 examples/umd 插件文件夹。 开发UMD的开发还需要加载 prop-types 包,除了 react

    基本示例

    import { Tab, Tabs, TabList, TabPanel } from'react-tabs';exportdefault () => (
     <Tabs><TabList><Tab>Title 1</Tab><Tab>Title 2</Tab></TabList><TabPanel><h2>Any content 1</h2></TabPanel><TabPanel><h2>Any content 2</h2></TabPanel></Tabs>);

    API

    resetIdCounter(): void

    允许reseting内部标识计数器,用于为id选项卡和选项卡面板生成唯一。

    你不应该在浏览器中使用它。 在服务器运行之前,只有在服务器上运行同构的React App,才应该调用 resetIdCounter(),这样服务器上生成的id就会在浏览器中生成。

    import { resetIdCounter } from'react-tabs';resetIdCounter();ReactDOMServer.renderToString(...);

    组件

    React选项卡由 4个组件组成,所有组件都需要一起使用。

    <选项卡/>

    如果你在 <Tabs/> 组件上指定额外的道具,它们将被转发到渲染的<div/>

    类型: string | Array<string> | { [string]: boolean }

    默认值:"react-tabs"

    为选项卡的外部 <div/> 提供自定义类 NAME。

    还可以提供类名称或者类名的array,该类名称是指示是否应添加 NAME的值。 关于如何提供不同类名的 classnames文档的文档。

    defaultFocus: boolean

    默认值:false

    如果设置为 true,选项卡将集中于初始渲染。 这允许在第一次渲染后立即使用键盘键到 switch 选项卡。

    defaultIndex: number

    默认值:0

    这允许更改在初始呈现时打开的选项卡。 这是从零开始的索引,所以第一个标签是 0,第二个标签是 1

    这里操作仅在响应选项卡处理当前选定选项卡内部且由于这里原因不能与 selectedIndex 一起使用时,才可以处于非受控模式。 有关模式的更多信息,请参见这里的

    disabledTabClassName: string

    默认值:"react-tabs__tab--disabled"

    为已经禁用的选项卡提供自定义类 NAME。

    这里选项也可以直接在 <Tab/> 组件中设置。

    domRef: (node:?HTMLElement) => void

    默认值:null

    register 将接收每个挂载的底层 DOM node的回调。 卸载时它还将接收空。

    forceRenderTabPanel: boolean

    默认值:false

    默认情况下,仅将当前活动选项卡呈现给 DOM。 如果设置为 true,所有标签都将呈现给 DOM。

    这也可以为每个单独的<TabPanel/> 组件启用它的prop forceRender

    onselect: (index: number, lastIndex: number, event: Event) =>?boolean

    默认值:undefined

    每次更改选项卡时都调用这里事件处理程序。 函数将用 index 调用,它将被更改为,即前面选择的lastIndex,或者是通常为 keydown 或者 click 事件的底层的event。 当 indexlastIndex 相等时,表示用户单击了当前活动的选项卡。

    回调可以选择返回 true 以取消对新选项卡的更改。

    当对新选项卡的更改被取消时,返回 true 也是重要的,因为React选项卡仍在内部处理选项卡。

    在受控模式下,onSelect 处理程序是必需的。

    文本:文本的颜色。

    默认值:null

    设置当前选中的标签。 这是从零开始的索引,所以第一个标签是 0,第二个标签是 1

    这将启用控制模式,这也需要设置 onSelect。 有关模式的更多信息,请参见这里的

    selectedTabClassName: string

    默认值:"react-tabs__tab--selected"

    为活动选项卡提供自定义类 NAME。

    这里选项也可以直接在 <Tab/> 组件中设置。

    selectedTabPanelClassName: string

    默认值:"react-tabs__tab-panel--selected"

    为活动选项卡面板提供自定义类 NAME。

    这里选项也可以直接在 <TabPanel/> 组件中设置。

    <TabList/>

    如果你在 <TabList/> 组件上指定额外的道具,它们将被转发到渲染的<ul/>

    类型: string | Array<string> | { [string]: boolean }

    默认值:"react-tabs__tab-list"

    <ul/> 提供自定义类 NAME。

    还可以提供类名称或者类名的array,该类名称是指示是否应添加 NAME的值。 关于如何提供不同类名的 classnames文档的文档。

    <选项卡/>

    如果你在 <Tab/> 组件上指定额外的道具,它们将被转发到渲染的<li/>

    类型: string | Array<string> | { [string]: boolean }

    默认值:"react-tabs__tab"

    <li/> 提供自定义类 NAME。

    还可以提供类名称或者类名的array,该类名称是指示是否应添加 NAME的值。 关于如何提供不同类名的 classnames文档的文档。

    已经禁用:boolean

    默认值:false

    禁用这里选项卡,在单击时不会执行任何操作。 还将添加一个禁用的类 NAME ( 请参见 disabledClassName )

    disabledClassName: string

    默认值:"react-tabs__tab--disabled"

    为已经禁用的选项卡提供自定义类 NAME。

    还可以为所有 <Tab/> 组件设置这里选项,并在 <Tabs/> 上使用 prop disabledTabClassName

    selectedClassName: string

    默认值:"react-tabs__tab--selected"

    为活动选项卡提供自定义类 NAME。

    还可以为所有 <Tab/> 组件设置这里选项,并在 <Tabs/> 上使用 prop selectedTabClassName

    : string

    默认值:如果选择了 "0",否则为 null

    重写oab以在选项卡之间启用标签。

    <TabPanel/>

    如果你在 <TabPanel/> 组件上指定额外的道具,它们将被转发到渲染的<div/>

    类型: string | Array<string> | { [string]: boolean }

    默认值:"react-tabs__tab-panel"

    为包含选项卡内容的<div/> 提供自定义类 NAME。

    还可以提供类名称或者类名的array,该类名称是指示是否应添加 NAME的值。 关于如何提供不同类名的 classnames文档的文档。

    forceRender: boolean

    默认值:false

    默认情况下,选项卡内容仅在选项卡处于活动状态时才会呈现。 如果设置为 true,则在非活动状态下也将呈现该选项卡。

    这也可以为所有 <TabPanel/> 组件启用,并在 <Tabs/> 上使用 prop forceRenderTabPanel

    selectedClassName: string

    默认值:"react-tabs__tab-panel--selected"

    为活动选项卡面板提供自定义类 NAME。

    还可以为所有 <TabPanel/> 组件设置这里选项,并在 <Tabs/> 上使用 prop selectedTabPanelClassName

    受控 vs-控制模式

    React选项卡有两种不同的模式可以操作,这将改变你需要注意的状态。

    非受控模式

    这是响应选项卡的默认模式,并使响应选项卡组件在内部处理它的状态。 你可以使用 defaultIndex 更改起始选项卡,也可以使用 onSelect 侦听更改。

    在这里模式下,你不能强制在运行时更改选项卡。

    <Tabs defaultIndex={1} onSelect={index=>console.log(index)}><TabList><Tab>Title 1</Tab><Tab>Title 2</Tab></TabList><TabPanel></TabPanel><TabPanel></TabPanel></Tabs>

    控制模式

    这里模式必须通过向 <Tabs/> 组件提供 selectedIndex 来启用。

    在这里模式中,选项卡不处理任何选项卡选择状态,并将所有状态管理保留到外部应用程序。

    这里模式还强制你为 onSelect 设置处理程序。 defaultIndex 没有任何效果,因此将引发错误。

    classAppextendsComponent {
     constructor() {
     this.state= { tabIndex:0 };
     }
     render() {
     return (
     <Tabs selectedIndex={this.state.tabIndex} onSelect={tabIndex=>this.setState({ tabIndex })}><TabList><Tab>Title 1</Tab><Tab>Title 2</Tab></TabList><TabPanel></TabPanel><TabPanel></TabPanel></Tabs> );
     }
    }

    样式

    默认情况下,React选项卡不包括任何样式加载。 可以提供默认样式表,如果需要,可以将它的包含在应用程序中。

    web pack

    当使用 web pack和适当的加载程序(。css-loadersass-loaderless-loader 或者 style-loader ) 时,你可以简单地导入默认样式表。

    import'react-tabs/style/react-tabs.css';// orimport'react-tabs/style/react-tabs.scss';// orimport'react-tabs/style/react-tabs.less';

    使用SASS时,你可以轻松导入默认样式

    @import '../../path/to/node_modules/react-tabs/style/react-tabs.scss';

    使用 LESS 时,可以轻松导入默认样式

    @import '../../path/to/node_modules/react-tabs/style/react-tabs.less';

    UMD

    当你使用UMD版本的React标签时,你可以通过添加

    <html>
     <head>
    . . .
     <linkrel="stylesheet"href="https://unpkg.com/react-tabs@2/style/react-tabs.css">
     </head>
    . . .
    </html>

    自定义

    你也可以简单地将默认样式复制到你自己的css/scss/less,并将它的修改为你自己的需要。 更改日志将始终告诉你何时更改类,并且我们还考虑将样式作为主体中的。

    许可证

    MIT


    COM  acc  react  tab  component  Reactjs  
    相关文章