antd#Mentions JavaScript Examples

The following examples show how to use antd#Mentions. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.js    From gobench with Apache License 2.0 6 votes vote down vote up 
render() {
    return (
      <div>
        <h5 className="mb-3">
          <strong>Basic</strong>
        </h5>
        <Mentions
          style={{ width: '100%' }}
          onChange={onChange}
          onSelect={onSelect}
          defaultValue="@afc163"
        >
          <Option value="afc163">afc163</Option>
          <Option value="zombieJ">zombieJ</Option>
          <Option value="yesmeck">yesmeck</Option>
        </Mentions>
      </div>
    )
  }
Example #2
Source File: async.jsx    From virtuoso-design-system with MIT License 6 votes vote down vote up 
render() {
    const { users, loading } = this.state;

    return (
      <Mentions style={{ width: '100%' }} loading={loading} onSearch={this.onSearch}>
        {users.map(({ login, avatar_url: avatar }) => (
          <Option key={login} value={login} className="antd-demo-dynamic-option">
            <img src={avatar} alt={login} />
            <span>{login}</span>
          </Option>
        ))}
      </Mentions>
    );
  }
Example #3
Source File: basic.jsx    From virtuoso-design-system with MIT License 6 votes vote down vote up 
storiesOf('antd/mentions', module).add('basic', () => 
  <Mentions
    style={{ width: '100%' }}
    onChange={onChange}
    onSelect={onSelect}
    defaultValue="@afc163"
  >
    <Option value="afc163">afc163</Option>
    <Option value="zombieJ">zombieJ</Option>
    <Option value="yesmeck">yesmeck</Option>
  </Mentions>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Basic usage.</p></>) } });
Example #4
Source File: prefix.jsx    From virtuoso-design-system with MIT License 6 votes vote down vote up 
render() {
    const { prefix } = this.state;

    return (
      <Mentions
        style={{ width: '100%' }}
        placeholder="input @ to mention people, # to mention tag"
        prefix={['@', '#']}
        onSearch={this.onSearch}
      >
        {(MOCK_DATA[prefix] || []).map(value => (
          <Option key={value} value={value}>
            {value}
          </Option>
        ))}
      </Mentions>
    );
  }
Example #5
Source File: readonly.jsx    From virtuoso-design-system with MIT License 6 votes vote down vote up 
function App() {
  return (
    <>
      <div style={{ marginBottom: 10 }}>
        <Mentions style={{ width: '100%' }} placeholder="this is disabled Mentions" disabled>
          {getOptions()}
        </Mentions>
      </div>
      <Mentions style={{ width: '100%' }} placeholder="this is readOnly Mentions" readOnly>
        {getOptions()}
      </Mentions>
    </>
  );
}
Example #6
Source File: index.js    From gobench with Apache License 2.0 5 votes vote down vote up 
{ Option } = Mentions
Example #7
Source File: align.jsx    From virtuoso-design-system with MIT License 5 votes vote down vote up 
storiesOf('antd/Input', module).add('align', () => 
  <>
    <Mentions style={{ width: 100 }} rows={1} />
    <Input.TextArea rows={1} style={{ width: 100 }} />
    <Button type="primary">Button</Button>
    <Input style={{ width: 100 }} />
    <Text copyable>Ant Design</Text>
    <Input prefix="1" suffix="2" style={{ width: 100 }} />
    <Input addonBefore="1" addonAfter="2" style={{ width: 100 }} />
    <InputNumber style={{ width: 100 }} />
    <DatePicker style={{ width: 100 }} />
    <TimePicker style={{ width: 100 }} />
    <Select style={{ width: 100 }} defaultValue="jack">
      <Option value="jack">Jack</Option>
      <Option value="lucy">Lucy</Option>
      <Option value="disabled" disabled>
        Disabled
      </Option>
      <Option value="Yiminghe">yiminghe</Option>
    </Select>
    <TreeSelect style={{ width: 100 }} />
    <Cascader defaultValue={['zhejiang', 'hangzhou', 'xihu']} options={options} />
    <RangePicker />
    <DatePicker picker="month" />
    <Radio.Group defaultValue="a">
      <Radio.Button value="a">Hangzhou</Radio.Button>
      <Radio.Button value="b">Shanghai</Radio.Button>
    </Radio.Group>
    <AutoComplete style={{ width: 100 }} placeholder="input here" />
    <br />
    <Input prefix="$" addonBefore="Http://" addonAfter=".com" defaultValue="mysite" />
    <Input style={narrowStyle} suffix="Y" />
    <Input style={narrowStyle} />
    <Input style={narrowStyle} defaultValue="1" suffix="Y" />
  </>,
  { docs: { page: () => (<><hr />
<p>order: 99
title:
  zh-CN: 文本对齐
  en-US: Text Align</p>
<h2 id="debugtrue">debug: true</h2></>) } });
Example #8
Source File: async.jsx    From virtuoso-design-system with MIT License 5 votes vote down vote up 
{ Option } = Mentions
Example #9
Source File: autoSize.jsx    From virtuoso-design-system with MIT License 5 votes vote down vote up 
{ Option } = Mentions
Example #10
Source File: autoSize.jsx    From virtuoso-design-system with MIT License 5 votes vote down vote up 
storiesOf('antd/mentions', module).add('autoSize', () => 
  <Mentions autoSize style={{ width: '100%' }}>
    <Option value="afc163">afc163</Option>
    <Option value="zombieJ">zombieJ</Option>
    <Option value="yesmeck">yesmeck</Option>
  </Mentions>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Height autoSize.</p></>) } });
Example #11
Source File: basic.jsx    From virtuoso-design-system with MIT License 5 votes vote down vote up 
{ Option } = Mentions
Example #12
Source File: placement.jsx    From virtuoso-design-system with MIT License 5 votes vote down vote up 
{ Option } = Mentions
Example #13
Source File: placement.jsx    From virtuoso-design-system with MIT License 5 votes vote down vote up 
storiesOf('antd/mentions', module).add('placement', () => 
  <Mentions style={{ width: '100%' }} placement="top">
    <Option value="afc163">afc163</Option>
    <Option value="zombieJ">zombieJ</Option>
    <Option value="yesmeck">yesmeck</Option>
  </Mentions>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Change the suggestions placement.</p></>) } });
Example #14
Source File: prefix.jsx    From virtuoso-design-system with MIT License 5 votes vote down vote up 
{ Option } = Mentions
Example #15
Source File: readonly.jsx    From virtuoso-design-system with MIT License 5 votes vote down vote up 
{ Option } = Mentions