mpana/copilot
1
0
Fork 0
mirror of https://github.com/yldio/copilot.git synced 2024-11-15 15:50:06 +02:00
Code Issues Releases Wiki Activity
8295bd6882
copilot/packages/ui-toolkit/src/form/usage-select.md
Sérgio Ramos 8295bd6882 chore: initial lerna setup 
this shall be a progressive process
2017-05-25 10:56:50 +01:00

6.2 KiB
Raw Blame History 

const FormGroup = require('./group').default;
const Label = require('./label').default;

<FormGroup>
  <Label>Your location</Label>
  <Select placeholder='Select Location'>
    <option value='1'>Amsterdam, EU</option>
    <option>San Francisco, USA</option>
    <option>Seoul, South Korea</option>
    <option>Tokyo, Japan</option>
  </Select>
</FormGroup>

placeholder

<Select>
  <option selected disabled>Select a datacenter</option>
  <option>Amsterdam, EU</option>
  <option>San Francisco, USA</option>
  <option>Seoul, South Korea</option>
  <option>Tokyo, Japan</option>
</Select>

disabled

const FormGroup = require('./group').default;
const Label = require('./label').default;

<FormGroup>
  <Label>Your location</Label>
  <Select disabled>
    <option selected disabled>Select Location</option>
    <option value='1'>Amsterdam, EU</option>
    <option>San Francisco, USA</option>
    <option>Seoul, South Korea</option>
    <option>Tokyo, Japan</option>
  </Select>
</FormGroup>

selected

const FormGroup = require('./group').default;
const Label = require('./label').default;

<FormGroup>
  <Label>Your location</Label>
  <Select>
    <option selected disabled>Select Location</option>
    <option value='1'>Amsterdam, EU</option>
    <option>San Francisco, USA</option>
    <option>Seoul, South Korea</option>
    <option>Tokyo, Japan</option>
  </Select>
</FormGroup>

multiple

const FormGroup = require('./group').default;
const Label = require('./label').default;

<FormGroup>
  <Label>Your location</Label>
  <Select multiple>
    <option>Amsterdam, EU</option>
    <option>San Francisco, USA</option>
    <option>Seoul, South Korea</option>
    <option>Tokyo, Japan</option>
  </Select>
</FormGroup>

warning

const FormMeta = require('./meta').default;
const FormGroup = require('./group').default;
const Label = require('./label').default;

<div>
  <FormGroup>
    <Label>Your location</Label>
    <Select>
      <option>Amsterdam, EU</option>
      <option>San Francisco, USA</option>
      <option>Seoul, South Korea</option>
      <option>Tokyo, Japan</option>
    </Select>
    <FormMeta warning='Unexpected inline warning!' />
  </FormGroup>
  <FormGroup warning='Unexpected group warning!'>
    <Label>Your location</Label>
    <Select>
      <option>Amsterdam, EU</option>
      <option>San Francisco, USA</option>
      <option>Seoul, South Korea</option>
      <option>Tokyo, Japan</option>
    </Select>
    <FormMeta />
  </FormGroup>
  <FormGroup meta={{warning: 'Unexpected meta warning!'}}>
    <Label>Your location</Label>
    <Select>
      <option>Amsterdam, EU</option>
      <option>San Francisco, USA</option>
      <option>Seoul, South Korea</option>
      <option>Tokyo, Japan</option>
    </Select>
    <FormMeta />
  </FormGroup>
  <FormGroup>
    <Label>Your location</Label>
    <Select>
      <option>Amsterdam, EU</option>
      <option>San Francisco, USA</option>
      <option>Seoul, South Korea</option>
      <option>Tokyo, Japan</option>
    </Select>
    <FormMeta warning>
      Unexpected children warning!
    </FormMeta>
  </FormGroup>
</div>

error

const FormMeta = require('./meta').default;
const FormGroup = require('./group').default;
const Label = require('./label').default;

<div>
  <FormGroup>
    <Label>Your location</Label>
    <Select>
      <option>Amsterdam, EU</option>
      <option>San Francisco, USA</option>
      <option>Seoul, South Korea</option>
      <option>Tokyo, Japan</option>
    </Select>
    <FormMeta error='Unexpected inline error!' />
  </FormGroup>
  <FormGroup error='Unexpected group error!'>
    <Label>Your location</Label>
    <Select>
      <option>Amsterdam, EU</option>
      <option>San Francisco, USA</option>
      <option>Seoul, South Korea</option>
      <option>Tokyo, Japan</option>
    </Select>
    <FormMeta />
  </FormGroup>
  <FormGroup meta={{error: 'Unexpected meta error!'}}>
    <Label>Your location</Label>
    <Select>
      <option>Amsterdam, EU</option>
      <option>San Francisco, USA</option>
      <option>Seoul, South Korea</option>
      <option>Tokyo, Japan</option>
    </Select>
    <FormMeta />
  </FormGroup>
  <FormGroup>
    <Label>Your location</Label>
    <Select>
      <option>Amsterdam, EU</option>
      <option>San Francisco, USA</option>
      <option>Seoul, South Korea</option>
      <option>Tokyo, Japan</option>
    </Select>
    <FormMeta error>
      Unexpected children error!
    </FormMeta>
  </FormGroup>
</div>

success

const FormMeta = require('./meta').default;
const FormGroup = require('./group').default;
const Label = require('./label').default;

<div>
  <FormGroup>
    <Label>Your location</Label>
    <Select>
      <option>Amsterdam, EU</option>
      <option>San Francisco, USA</option>
      <option>Seoul, South Korea</option>
      <option>Tokyo, Japan</option>
    </Select>
    <FormMeta success='Unexpected inline success!' />
  </FormGroup>
  <FormGroup success='Unexpected group success!'>
    <Label>Your location</Label>
    <Select>
      <option>Amsterdam, EU</option>
      <option>San Francisco, USA</option>
      <option>Seoul, South Korea</option>
      <option>Tokyo, Japan</option>
    </Select>
    <FormMeta />
  </FormGroup>
  <FormGroup meta={{success: 'Unexpected meta success!'}}>
    <Label>Your location</Label>
    <Select>
      <option>Amsterdam, EU</option>
      <option>San Francisco, USA</option>
      <option>Seoul, South Korea</option>
      <option>Tokyo, Japan</option>
    </Select>
    <FormMeta />
  </FormGroup>
  <FormGroup>
    <Label>Your location</Label>
    <Select>
      <option>Amsterdam, EU</option>
      <option>San Francisco, USA</option>
      <option>Seoul, South Korea</option>
      <option>Tokyo, Japan</option>
    </Select>
    <FormMeta success>
      Unexpected children success!
    </FormMeta>
  </FormGroup>
</div>

meta

const FormMeta = require('./meta').default;
const FormGroup = require('./group').default;
const Label = require('./label').default;

<FormGroup>
  <Label>Your location</Label>
  <Select>
    <option>Amsterdam, EU</option>
    <option>San Francisco, USA</option>
    <option>Seoul, South Korea</option>
    <option>Tokyo, Japan</option>
  </Select>
  <FormMeta>
    I&#39;m a children of meta!
  </FormMeta>
</FormGroup>