npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

dfws-admin-tabs

v2.1.0

Published

东方网升 Ant Design 版Tabs组件, 适配admin-portal v2.x

Downloads

2

Readme

东方网升Ant Design版选择器组件。

使用之前

该组件依赖于Ant Design组件,使用之前请配置Ant Design。

何时使用

  • 弹出一个下拉菜单给用户选择操作,用于代替原生的选择器,或者需要一个更优雅的多选器时。
  • 当选项少时(少于 5 项),建议直接将选项平铺,使用 Radio 是更好的选择。

API

<DfwsSelect code="major">
</DfwsSelect>

DfwsSelect props

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | code | 字典code | string | - | | url | 字典服务URL | string | - | | allowClear | 支持清除 | boolean | false | | autoFocus | 默认获取焦点 | boolean | false | | combobox | 输入框自动提示模式(2.9 之后废弃,请使用 mode) | boolean | false | | defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true | | defaultValue | 指定默认选中的条目 | string|string[]|number|number[] | - | | disabled | 是否禁用 | boolean | false | | dropdownClassName | 下拉菜单的 className 属性 | string | - | | dropdownMatchSelectWidth | 下拉菜单和选择器同宽 | boolean | true | | dropdownStyle | 下拉菜单的 style 属性 | object | - | | filterOption | 是否根据输入项进行筛选。当其为一个函数时,会接收 inputValue option 两个参数,当 option 符合筛选条件时,应返回 true,反之则返回 false。 | boolean or function(inputValue, option) | true | | firstActiveValue | 默认高亮的选项 | string|string[] | - | | getPopupContainer | 菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。示例 | Function(triggerNode) | () => document.body | | labelInValue | 是否把每个选项的 label 包装到 value 中,会把 Select 的 value 类型从 string 变为 {key: string, label: ReactNode} 的格式 | boolean | false | | maxTagCount | 最多显示多少个 tag | number | - | | maxTagPlaceholder | 隐藏 tag 时显示的内容 | ReactNode/function(omittedValues) | - | | mode | 设置 Select 的模式(2.9 之后支持) | 'multiple' | 'tags' | 'combobox' | - | | multiple | 支持多选(2.9 之后废弃,请使用 mode) | boolean | false | | notFoundContent | 当下拉列表为空时显示的内容 | string | 'Not Found' | | optionFilterProp | 搜索时过滤对应的 option 属性,如设置为 children 表示对内嵌内容进行搜索 | string | value | | optionLabelProp | 回填到选择框的 Option 的属性值,默认是 Option 的子元素。比如在子元素需要高亮效果时,此值可以设为 value。 | string | children (combobox 模式下为 value) | | placeholder | 选择框默认文字 | string | - | | showSearch | 使单选模式可搜索 | boolean | false | | showArrow | 是否显示下拉小箭头 | boolean | true | | size | 选择框大小,可选 large small | string | default | | tags | 可以把随意输入的条目作为 tag,输入项不需要与下拉选项匹配(2.9 之后废弃,请使用 mode) | boolean | false | | tokenSeparators | 在 tags 和 multiple 模式下自动分词的分隔符 | string[] | | | value | 指定当前选中的条目 | string|string[]|number|number[] | - | | onBlur | 失去焦点的时回调 | function | - | | onChange | 选中 option,或 input 的 value 变化(combobox 模式下)时,调用此函数 | function(value, option:Option/Array<Option>) | - | | onDeselect | 取消选中时调用,参数为选中项的 value (或 key) 值,仅在 multiple 或 tags 模式下生效 | function(value,option:Option) | - | | onFocus | 获得焦点时回调 | function | - | | onMouseEnter | 鼠标移入时回调 | function | - | | onMouseLeave | 鼠标移出时回调 | function | - | | onPopupScroll | 下拉列表滚动时的回调 | function | - | | onSearch | 文本框值变化时回调 | function(value: string) | | | onSelect | 被选中时调用,参数为选中项的 value (或 key) 值 | function(value, option:Option) | - |

注意,如果发现下拉菜单跟随页面滚动,或者需要在其他弹层中触发 Select,请尝试使用 getPopupContainer={triggerNode => triggerNode.parentNode} 将下拉弹层渲染节点固定在触发器的父元素中。

DfwsSelect Methods

| 名称 | 说明 | | --- | --- | | blur() | 取消焦点 | | focus() | 获取焦点 |

Option props

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | disabled | 是否禁用 | boolean | false | | key | 和 value 含义一致。如果 React 需要你设置此项,此项值与 value 的值相同,然后可以省略 value 设置 | string | | | title | 选中该 Option 后,Select 的 title | string | - | | value | 默认根据此属性值进行筛选 | string|number | - |

OptGroup props

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | key | | string | - | | label | 组名 | string|React.Element | 无 |

参考

Ant Design