material-ui-superselectfield, 概念材质用户界面的自动完成下拉列表组件

分享于 

13分钟阅读

GitHub

  繁體
multiselection autocomplete dropdown component for Material-UI
  • 源代码名称:material-ui-superselectfield
  • 源代码网址:http://www.github.com/Sharlaan/material-ui-superselectfield
  • material-ui-superselectfield源代码文档
  • material-ui-superselectfield源代码下载
  • Git URL:
    git://www.github.com/Sharlaan/material-ui-superselectfield.git
    Git Clone代码到本地:
    git clone http://www.github.com/Sharlaan/material-ui-superselectfield
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/Sharlaan/material-ui-superselectfield
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    material-ui-superSelectField npmdownloadsjavascript style guideDeepScan Grade

    table-内容

    实时预览( 现场演示 )

    dataSourcecaseInsensitivechips

    安装

    这里组件需要 3个依赖项:

    • 反作用力
    • 响应 dom
    • 材质用户界面

    。所以确保它们已经安装在你的项目中。

    yarn add material-ui-superselectfield

    ES5版本

    import SelectField from 'material-ui-superselectfield'

    ES6+版本

    import SelectField from 'material-ui-superselectfield/es'

    属性

    名称类型默认说明
    anchorOrigin对象{ vertical: 'top', horizontal: 'left' }菜单的定位位置,接受值: top, bottom/left, right
    autocompleteFilter函数请参见下面提供你自己的过滤解析器。 默认值:不区分大小写。
    仅当超过 10个子( 查看 showAutocompleteThreshold ) 时,搜索字段才会出现。
    默认情况下,解析器将检查 label 道具,否则为'值'。
    canAutoPositionbooltrue如果存在,这里属性允许内部Popover组件以这样的方式定位菜单选项不被屏幕边缘隐藏。
    checkPosition字符串多模式下复选标记的位置。 接受的值:'', left, right
    儿童的身体不断发育成长.任意[ ]Datasource是任意类型节点的array,根据你的方便设置。
    /必需:每个 node 必须公开 value 属性。 默认情况下,这里值属性将同时用于选项和标签的值。
    可以提供 label 属性来指定与 value 不同的值。
    已经禁用boolfalse包含这里属性以禁用 superSelectField。
    elementHeight数字,数字 [ ]36每个选项元素的高度以像素为单位。 如果元素具有不同的高度,则可以在 array 中提供它们。
    阶乘字符串或者 node''''包含这里属性以显示错误警告。
    floatingLabel字符串或者 node浮动标签元素所使用的内容。
    hintText字符串'Click单击我"'主选择显示的占位符文本。
    hintTextAutocomplete字符串或者 node'Type键入内容'自动完成的占位符文本。
    keepSearchOnSelectboolfalse防止在每次选择后重新设置字段的自动完成值。
    多重boolfalse包含这里属性可以将superSelectField转换为多个选择下拉列表。 将显示复选框。
    姓名字符串在同一页面中区分superSelectField的多个实例时需要。
    nb2show号码5从菜单显示的选项数。
    noMatchFound字符串'没有找到 MATCH"'自动完成筛选器失败时的占位符文本。
    openImmediatelyboolfalse使菜单在页面加载时打开。
    onAutoCompleteTyping函数( ) => {}公开键入后键入的单词。 用于触发 onType API请求。
    onChange函数( ) => {}关闭菜单时触发。 如果你不希望在每次选择时更新组件状态,只在菜单关闭时使用这里选项。
    ( selectedValues,名称): 基于选定的节点值属性的选定值的selectedValues array,name的superSelectField NAME的值
    onMenuOpen函数( ) => {}打开菜单时触发。
    onSelect函数( ) => {}选择菜单中的项目时触发。 使用这里选项可以从菜单( 虽然仍然开放) 中的每个选择更新你的componenet状态。
    ( selectedValues,名称): 基于选定的节点值属性的选定值的selectedValues array,name的superSelectField NAME的值
    showAutocompleteThreshold数字,'始终',永远不会'10显示自动完成搜索字段的选项的最大数目。
    例如,如果需要禁用"自动完成"字段,只需将这里具有高于子级的值设置为。
    但是,如果需要自动完成以显示始终,则可以通过 'always'。 即使没有要显示的项,也会打开菜单。 传递 'never' 永远不会显示传递多少子节点的自动完成 regadless。
    useLayerForClickAwayboolfalse如果 true,popover下拉列表将呈现在不可以见层的顶部,这将阻止单击基础元素并触发 onRequestClose('clickAway') 调用。
    null,对象,对象 [ ]选定的value(s)。
    /必需:每个对象必须公开一个'值'属性。
    withResetSelectAllButtonsboolfalse'多重'一起显示,显示包含'重置'和'全部选择'按钮的标题。

    设置值时

    如果设置了多个,则值必须至少是空的array。
    对于单个值模式,可以将值设置为 null。
    使用对象时,请确保它们公开了非null值属性。
    如果实现,PropTypes应引发警告。

    样式属性 NAME 类型默认说明
    autocompleteStyle对象允许更改自动完成字段( 内部输入组件)的样式。
    注意:自动完成 root 元素的左边距/右边距和宽度不是自定义的( 自动计算)
    autocompleteUnderlineStyle对象允许更改searchTextField下划线的样式。
    autocompleteUnderlineFocusStyle对象当焦点集中时,允许更改searchTextField下划线的样式。
    checkedIconSVGicon请参见下面用于选中状态的SvgIcon。 这对创建 icon 切换非常有用。
    dropDownIconSVGicon请参见下面用于在选择中下降 icon的SvgIcon。
    errorStyle对象{color:'红色'}允许更改消息的错误容器样式。
    仅在定义了errorText时解析。
    floatingLabelStyle对象允许更改浮动标签的样式。
    floatingLabelFocusStyle对象允许在焦点集中时更改浮动标签的样式。
    innerDivStyle对象{}应用到menuitem的内部分区中的样式,该样式用于每个子组件。
    hoverColor字符串''( 69,90,100,)"'替代悬停 background 颜色。
    menuStyle对象{}应用于将接收子组件的comtainer的样式。
    menuGroupStyle对象{}应用到你的<optgroup/>的menuitem的样式。
    menuFooterStyle对象{}应用于菜单页脚的样式。
    menuCloseButtonnode用于显式关闭菜单的按钮。 在手机上有用。
    noMatchFoundStyle对象{}允许更改noMatchFound列表项的样式。
    popoverClassName字符串''''设置Popover组件的className 属性。
    popoverWidth号码180设置菜单的宽度。
    菜单是 4个主要子组件的容器: textfield,reset/async按钮 header,选项容器和页脚的标题。
    菜单宽度将始终将它的宽度设置为 popoverWidth prop ( 在 px ) 或者 root 组件宽度之间的最大值。 选择了默认值 180px,以便标题按钮的内部不溢出。
    resetButtonnode请参见下面node 用于取消选择所有选项。
    /需要 withResetSelectAllButtons
    selectAllButtonnode请参见下面node 用于选择所有选项。
    /需要 withResetSelectAllButtons
    selectedMenuItemStyle对象应用于选定MenuItem的样式。
    selectionsRenderer函数请参见下面为所选选项提供你自己的渲染器。 默认值为连接子文本的值。 检查CodeExample4以获得更高级的渲染器示例。
    样式对象{}插入你自己的内联样式,应用于 root 组件。
    unCheckedIconSVGicon请参见下面用于未选中状态的SvgIcon。 这对创建 icon 切换非常有用。
    underlineErrorStyle对象{borderColor:'红色'}允许在错误状态下更改下划线的样式。
    仅在定义了errorText时解析。
    underlineFocusStyle对象允许在焦点集中时更改下划线的样式。
    underlineStyle对象允许更改下划线的样式。
    默认函数 NAME 默认函数
    autocompleteFilter` ( searchText,文本) => 文本 !
    checkedIcon<CheckedIcon style={{ top: 'calc(50% - 12px)' }}/>
    dropDownIcon<DropDownArrow/>
    resetButton<FlatButton label='reset' hoverColor='rgba(69, 90, 100, 0.1)' fullWidth/>
    selectAllButton<FlatButton label='select all' hoverColor='rgba(69, 90, 100, 0.1)' fullWidth labelStyle={{ whiteSpace: 'nowrap' }}/>
    unCheckedIcon<UnCheckedIcon style={{ top: 'calc(50% - 12px)' }}/>
    selectionsRenderer
    (values, hintText) => {
     if (!values) return hintText
     const { value, label } = values
     if (Array.isArray(values)) {
     return values.length
    ? values.map(({ value, label }) => label || value).join(', ')
     : hintText
     }
     else if (label || value) return label || value
     else return hintText
    }

    用法

    检查存储库中提供的CodeExampleX.js

    建筑

    你可以使用以下方法生成项目:

    git clone https://github.com/Sharlaan/material-ui-superselectfield.git
    yarn && yarn start

    它应该在默认浏览器 @ localhost:3000 上打开一个新页面

    在另一个本地项目中链接

    要测试SSF的本地版本更改,请执行以下操作:

    yarn build && yarn link

    。然后导航到你的本地项目目录,然后键入:

    yarn link material-ui-superselectfield

    /警告:如果你在项目中重新安装依赖项,这将破坏链接,你将得到链接。

    测试

    yarn test

    代替正式的样式指南,请注意维护现有的编码风格。 为任何新的或者已经更改的功能添加单元测试。 Lint并测试代码。

    已知的Bug

    • 键盘焦点处理结合optgroups和自动完成结果

    TodoList

    • 为多个模式实现全选和重置

    • 在多个模式下实现onClose处理程序,允许在oneshot中注册所选值,而不是在每个选择( IE 一个单独的服务器请求) 中公开值

    • 如果宽度prop具有值,则自动将autoWidth设置为 false

    • 为 this.root :focus { 大纲添加一个css规则: '无'}, 和 :hover { 变暗 }

    • 在多个superSelectFields之间切换时,为焦点状态/样式添加测试

    • 为击键添加测试

    • 为值和子元素添加PropTypes检查

    • 支持 <optgroup/>

    • 实现可选 <optgroup/> 来选择所有内部子对象

    • 使用 200个menuitem检查渲染性能( 集成React无限)

    • 实现容器的容器( 绝对定位 below的focusedLine )

      公开更多的道具:

      • noMatchFound消息
      • floatingLabelText
      • canAutoPosition
      • checkPosition
      • anchorOrigin
      • popoverStyle
      • hoverColor
      • 已经禁用
      • 必选
      • errorMessage
      • errorStyle
      • 子组件的classeNames
      • maxSelection
    • 添加 props.disableAutoComplete ( 默认值:false ) 或者 nbItems2showAutocomplete ( 默认: null,表示从不显示 searchTextField )

    • 仅在当前 numberOfMenuItems> props.autocompleteTreshold 时才显示自动完成

    • 为MenuItem实现一个 checkboxRenderer ( 或者公开 2属性 CheckIconFalse & CheckIconTrue )

    • 使 MenuItem.insetChildren 重新实现替换为 checkPosition= {'left'(default) or'right'}

    • 添加带有GooglePlaces的示例

    • 添加带有ReduxForm的示例


    COM  AUTO  component  MAT  Material  MATE  
    相关文章