帮酷LOGO
0 0 评论
  • 显示原文与译文双语对照的内容
文章标签:acc  component  react  Accordion  accessible  COM  
Accessible react accordion component

  • 源代码名称:react-sanfona
  • 源代码网址:http://www.github.com/daviferreira/react-sanfona
  • react-sanfona源代码文档
  • react-sanfona源代码下载
  • Git URL:
    git://www.github.com/daviferreira/react-sanfona.git
  • Git Clone代码到本地:
    git clone http://www.github.com/daviferreira/react-sanfona
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/daviferreira/react-sanfona
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
  • 响应 sanfona

    NPM info

    Travis build statusDepfu

    响应 accordion 组件

    giphy 1

    用法

    通过NPM安装:

    
    npm install react-sanfona
    
    
    
    

    然后:

    import { Accordion, AccordionItem } from'react-sanfona';
    ...
     render() {
     return (
     <Accordion> {[1, 2, 3, 4, 5].map(item=> {
     return (
     <AccordionItem title={`Item ${item}`} expanded={item ===1}><div> {`Item ${item} content`}
     </div></AccordionItem> );
     })}
     </Accordion> );
     }
    ...

    选项/PropTypes

    accordion 属性类型说明默认值
    allowMultipleBoolean允许同时打开多个项目。false
    openNextAccordionItemBoolean打开前一个 accordion 项目后,将它的关闭。 默认为活动的,并适用于除最后一个外的每个 accordion 项。false
    类名String应用于 root 元素的自定义类名null
    样式Object用于 root 元素的内联样式null
    onChangeFunction当组件更新并将新状态作为参数传递时触发null
    rootTagString用于 root 元素的自定义HTML标记'div'
    工期Number打开/关闭过渡持续时间以毫秒为单位300
    缓动String打开/关闭转换缓动'ease'
    AccordionItem属性类型说明默认值
    标题String/Object要在页眉中显示的文本或者对象。null
    展开Boolean如果项目主体应展开或者不展开false
    onExpandFunction项目展开时的回调null
    onCloseFunction项目关闭时的回调null
    类名String应用于 root 项元素的自定义类名null
    bodyClassNameString应用于 accordion 项主体的自定义类名null
    expandedClassNameString扩展 accordion 时应用的自定义类名null
    titleClassNameString应用于 accordion 项 header 文本的自定义类名null
    已经禁用Boolean如果项目应禁用或者不被禁用false
    disabledClassNameString禁用项时应用于 accordion 项 header 文本的自定义类名null
    rootTagString用于 root 元素的自定义HTML标记'div'
    titleTagString用于标题元素的自定义HTML标记'h3'
    bodyTagString用于正文元素的自定义HTML标记'div'
    工期Number打开/关闭过渡持续时间以毫秒为单位300
    缓动String打开/关闭转换缓动'ease'

    带类名的

    Classname目标
    react-sanfonaaccordion 容器
    react-sanfona-itemAccordionItem容器
    react-sanfona-item-expanded扩展时AccordionItem容器
    react-sanfona-item-titleAccordionItem header 文本
    react-sanfona-item-bodyAccordionItem正文容器
    react-sanfona-item-body-wrapperAccordionItem主体子包装
    react-sanfona-item-disabledAccordionItem已经禁用

    插件开发

    
    npm install
    
    
    
    npm start//served on localhost:8080
    
    
    
    npm test
    
    
    
    


    文章标签:COM  acc  react  component  accessible  Accordion  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语