开源软件名称:mentions
开源软件地址:https://gitee.com/mirrors_react-component/mentions
开源软件介绍:
rc-mentions
React Mentions
ScreenshotsFeature- support ie9,ie9+,chrome,firefox,safari
Keyboard- Open mentions (focus input || focus and click)
- KeyDown/KeyUp/Enter to navigate menu
install
Usagebasic useimport Mentions from 'rc-mentions';const { Option } = Mentions;var Demo = ( <Mentions> <Option value="light">Light</Option> <Option value="bamboo">Bamboo</Option> <Option value="cat">Cat</Option> </Mentions>);React.render(<Demo />, container); APIMentions propsname | description | type | default |
---|
autoFocus | Auto get focus when component mounted | boolean | false | defaultValue | Default value | string | - | filterOption | Customize filter option logic | false | (input: string, option: OptionProps) => boolean | - | notFoundContent | Set mentions content when not match | ReactNode | 'Not Found' | placement | Set popup placement | 'top' | 'bottom' | 'bottom' | direction | Set popup direction | 'ltr' | 'rtl' | 'ltr' | prefix | Set trigger prefix keyword | string | string[] | '@' | rows | Set row count | number | 1 | split | Set split string before and after selected mention | string | ' ' | validateSearch | Customize trigger search logic | (text: string, props: MentionsProps) => void | - | value | Set value of mentions | string | - | onChange | Trigger when value changed | (text: string) => void | - | onKeyDown | Trigger when user hits a key | React.KeyboardEventHandler | - | onKeyUp | Trigger when user releases a key | React.KeyboardEventHandler | - | onSelect | Trigger when user select the option | (option: OptionProps, prefix: string) => void | - | onSearch | Trigger when prefix hit | (text: string, prefix: string) => void | - | onFocus | Trigger when mentions get focus | React.FocusEventHandler | - | onBlur | Trigger when mentions lose focus | React.FocusEventHandler | - | getPopupContainer | DOM Container for suggestions | () => HTMLElement | - | autoSize | Textarea height autosize feature, can be set to true|false or an object { minRows: 2, maxRows: 6 } | boolean | object | - | onPressEnter | The callback function that is triggered when Enter key is pressed | function(e) | - | onResize | The callback function that is triggered when textarea resize | function({ width, height }) | - |
Methodsname | description |
---|
focus() | Component get focus | blur() | Component lose focus |
DevelopmentExamplehttp://localhost:9001/ online example: http://react-component.github.io/mentions/ Test CaseCoverageLicenserc-mentions is released under the MIT license. |
请发表评论