jessy1092/react-semantify full documentation

documentation.md

Collections

The collections which interagte Semantic-Ui in react components.

Breadcrumb

A standard Breadcrumb.

Example

<Breadcrumb className="examplebreadcrumb">
  <Section>123</Section>
  <Icon className="right chevron divider"></Icon>
  <Section>321</Section>
</Breadcrumb>

is equal to

<div class="ui breadcrumb examplebreadcrumb">
  <div class="section">123</div>
  <i class="icon right chevron divider"></i>
  <div class="section">321</div>
</div>

Properties

• className: The className would be part of the class attribute.

Form

A standard Form.

Example

<Form className="exampleform">
  <Fields className="two">
    <Field>
      <Label>User</Label>
      <Input className="icon">
        <input placeholder="Username" type="text"/>
        <Icon className="user"/>
      </Input>
    </Field>
    <Field>
      <Label>Password</Label>
      <Input className="icon">
        <input placeholder="password" type="password"/>
        <Icon className="lock"/>
      </Input>
    </Field>
  </Fields>
</Form>

is equal to

<div class="ui form exampleform">
  <div class="two fields">
    <div class="field">
      <div class="ui label">User</div>
      <div class="ui input icon">
        <input placeholder="Username" type="text">
        <i class="icon user"></i>
      </div>
    </div>
    <div class="field">
      <div class="ui label">Password</div>
      <div class="ui input icon">
        <input placeholder="password" type="password">
        <i class="icon user"></i>
      </div>
    </div>
  </div>
</div>

Properties

• className: The className would be part of the class attribute.

Grid

A standard Grid.

Example

<Grid className="examplegrid">
  <Column className="four wide"/>
  <Column className="two wide"/>
  <Column className="four wide"/>
  <Column className="six wide"/>
</Grid>

is equal to

<div class="ui grid examplegrid">
  <div class="four wide column"></div>
  <div class="two wide column"></div>
  <div class="four wide column"></div>
  <div class="six wide column"></div>
</div>

Properties

• className: The className would be part of the class attribute.

Menu

A standard Menu.

Example

<Menu className="examplemenu">
  <Item className="active" type="link">
    <Icon className="home" /> Home
  </Item>
  <Item type="link">
    <Icon className="mail"/> Messages
  </Item>
</Menu>

is equal to

<div class="ui menu examplemenu">
  <a class="active item">
    <i class="home icon"></i> Home
  </a>
  <a class="item">
    <i class="mail icon"></i> Messages
  </a>
</div>

Properties

• className: The className would be part of the class attribute.

Message

A standard Message.

Example

<Message className="icon examplemessage">
  <Icon className="notched circle loading" />
  <Content>
    <Header>Hello World</Header>
    <p>This is a test component.</p>
  </Content>
</Message>

is equal to

<div class="ui icon message examplemessage">
  <i class="otched circle loading icon"></i>
  <div class="content">
    <div class="header">Hello World</div>
    <p>This is a test component.</p>
  </div>
</div>

Properties

• className: The className would be part of the class attribute.

Table

A standard Table.

Example

<Table className="exampletable">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>5566</td>
      <td>Lee</td>
    </tr>
  </tbody>
</Table>

is equal to

<table class="ui table exampletable">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>5566</th>
      <th>Lee</th>
    </tr>
  </tbody>
</table>

Properties

• className: The className would be part of the class attribute.

Elements

The elements which interagte Semantic-Ui in react components.

Button

A standard Button.

Example

<Button className="examplebutton" color="red" onClick={this._onClick} disabled={true}></Button>

You also can write like this:

<Button className="red disabled examplebutton" onClick={this._onClick}></Button>

are equal to

<div class="ui button red disabled examplebutton"></div>

and register the function(this._onClick) on click event.

Properties

• className: The className would be part of the class attribute.
• color: The color is equal to Semantic-Ui color.
• onClick: The click event.
• active: This is a booling type. If true, the active would be part of class attribute.
• disabled: This is a booling type. If true, the disabled would be part of class attribute.
• loading: This is a booling type. If true, the loading would be part of class attribute.

Divider

A standard Divider.

Example

<Divider className="exampledivider"></Divider>

is equal to

<div class="ui divider exampledivider"></div>

Properties

• className: The className would be part of the class attribute.

Flag

A standard Flag.

Example

<Flag className="tw" onClick={this._onClick}></Flag>

is equal to

<i class="flag tw"></i>

and register the function(this._onClick) on click event.

Properties

• className: The className would be part of the class attribute.
• onClick: The click event.

Header

A standard Header.

Example

<Header className="exampleheader" color="red" type="div" onClick={this._onClick} disabled={true}></Header>

You also can write like this:

<Header className="red disabled exampleheader" type="div" onClick={this._onClick}></Header>

are equal to

<div class="ui header red disabled exampleheader"></div>

and register the function(this._onClick) on click event.

Properties

• className: The className would be part of the class attribute.
• color: The color is equal to Semantic-Ui color.
• type: Generate the html tag. type="div" would be <div><\div>. type="link" would be <a><\a>
• onClick: The click event.
• disabled: This is a booling type. If true, the disabled would be part of class attribute.

Icon

A standard Icon.

Example

<Icon className="cloud" color="red" onClick={this._onClick} disabled={true}></Icon>

You also can write like this:

<Icon className="red disabled cloud" onClick={this._onClick}></Icon>

are equal to

<i class="icon red disabled cloud"></i>

and register the function(this._onClick) on click event.

Properties

• className: The className would be part of the class attribute.
• color: The color is equal to Semantic-Ui color.
• onClick: The click event.
• disabled: This is a booling type. If true, the disabled would be part of class attribute.
• loading: This is a booling type. If true, the loading would be part of class attribute.

Image

A standard Image.

Example

<Image className="medium" src="./example/example.jpg" disabled={true}></Image>

is equal to

<img class="ui image medium disabled" src="./example/example.jpg"></img>

Properties

• className: The className would be part of the class attribute.
• src: The image's source file.
• disabled: This is a booling type. If true, the disabled would be part of class attribute.

Input

A standard Input.

Example

<Input className="exampleinput" error={true} placeholder="Search..." type="text"></Input>

is equal to (If you didn't have children component, it would auto generate <input> tag.)

<div class="ui input error exampleinput">
  <input placeholder="Search..." type="text"></input>>
</div>

Properties

• className: The className would be part of the class attribute.
• loading: This is a booling type. If true, the loading would be part of class attribute.
• focus: This is a booling type. If true, the focus would be part of class attribute.
• error: This is a booling type. If true, the error would be part of class attribute.

Label

A standard Label.

Example

<Label className="examplelabel" color="red" type="div"></Label>

You also can write like this:

<Label className="red examplelabel" type="div"></Label>

are equal to

<div class="ui label red examplelabel"></div>

and register the function(this._onClick) on click event.

Properties

• className: The className would be part of the class attribute.
• color: The color is equal to Semantic-Ui color.
• type: Generate the html tag. type="div" would be <div><\div>. type="link" would be <a><\a>
• onClick: The click event.

List

A standard List.

Example

<List className="examplelist"></List>

is equal to

<div class="ui list examplelist"></div>

Properties

• className: The className would be part of the class attribute.

Loader

A standard Loader.

Example

<Loader className="exampleloader" disabled={true}></Loader>

is equal to

<div class="ui loader disabled exampleloader"></div>

Properties

• className: The className would be part of the class attribute.
• active: This is a booling type. If true, the active would be part of class attribute.
• disabled: This is a booling type. If true, the disabled would be part of class attribute.

Rail

A standard Rail.

Example

<Rail className="examplerail"></Rail>

is equal to

<div class="ui rail examplerail"></div>

Properties

• className: The className would be part of the class attribute.

Reveal

A standard Reveal.

Example

<Reveal className="examplereveal" disabled={true}></Reveal>

is equal to

<div class="ui reveal disabled examplereveal"></div>

Properties

• className: The className would be part of the class attribute.
• disabled: This is a booling type. If true, the disabled would be part of class attribute.

Segment

A standard Segment.

Example

<Segment className="examplesegment" color="red" disabled={true}></Segment>

You also can write like this:

<Segment className="red disabled examplesegment"></Segment>

are equal to

<div class="ui segment red disabled examplesegment"></div>

and register the function(this._onClick) on click event.

Properties

• className: The className would be part of the class attribute.
• color: The color is equal to Semantic-Ui color.
• onClick: The click event.
• disabled: This is a booling type. If true, the disabled would be part of class attribute.
• loading: This is a booling type. If true, the loading would be part of class attribute.

Steps/Step

A standard Steps/Step.

Example

<Steps className="examplestep">
  <Step disabled={true}>123</Step>
</Steps>

is equal to

<div class="ui steps examplestep">
  <div class="step disabled">123</div>
</div>

Properties

• className: The className would be part of the class attribute.
• active: This is a booling type. If true, the active would be part of class attribute.
• disabled: This is a booling type. If true, the disabled would be part of class attribute.
• completed: This is a booling type. If true, the completed would be part of class attribute.

Modules

The modules which interagte Semantic-Ui in react components.

Accordion

A standard Accordion.

Example

<Accordion className="exampleaccordion" init={true}></Accordion>

is equal to

<div class="ui accordion examplebutton"></div>

and call below Sementic-ui init function when element in the componentDidMount life cycle.

$('.ui.accordion').accordion();

You also can use init={param} to transfer parameter.

ex.

<Accordion init='refresh'></Accordion>

will transfer 'refresh' to init function.

$('.ui.accordion').accordion('refresh');

Properties

• init: You can see Accordion usage on the Semantic-ui web site.

Checkbox

A standard Checkbox.

Example

<Checkbox className="examplecheckbox" init={true}></Checkbox>

is equal to

<div class="ui checkbox examplecheckbox"></div>

and call below Sementic-ui init function when element in the componentDidMount life cycle.

$('.ui.checkbox').checkbox();

You also can use init={param} to transfer parameter.

ex.

<Checkbox init={{uncheckable: false}}></Checkbox>

will transfer {uncheckable: false} to init function.

$('.ui.checkbox').checkbox({uncheckable: false});

Properties

• init: You can see Checkbox usage on the Semantic-ui web site.
• disabled: This is a booling type. If true, the disabled would be part of class attribute.
• readOnly: This is a booling type. If true, the read-only would be part of class attribute.

Dimmer

A standard Dimmer.

Example

<Dimmer className="exampledimmer" init={true}></Dimmer>

is equal to

<div class="ui dimmer exampledimmer"></div>

and call below Sementic-ui init function when element in the componentDidMount life cycle.

$('.ui.dimmer').dimmer();

You also can use init={param} to transfer parameter.

ex.

<Dimmer init={{on: 'hover'}}></Dimmer>

will transfer {{on: 'hover'}} to init function.

$('.ui.dimmer').dimmer({on: 'hover'});

Properties

• init: You can see Dimmer usage on the Semantic-ui web site.
• disabled: This is a booling type. If true, the disabled would be part of class attribute.
• active: This is a booling type. If true, the active would be part of class attribute.

Dropdown

A standard Dropdown.

Example

<Dropdown className="exampledropdown" init={true}></Dropdown>

is equal to

<div class="ui dropdown exampledropdown"></div>

and call below Sementic-ui init function when element in the componentDidMount life cycle.

$('.ui.dropdown').dropdown();

You also can use init={param} to transfer parameter.

ex.

<Dropdown init={{transition: 'drop'}}></Dropdown>

will transfer {{transition: 'drop'}} to init function.

$('.ui.dropdown').dropdown({transition: 'drop'});

Properties

• init: You can see Dropdown usage on the Semantic-ui web site.
• disabled: This is a booling type. If true, the disabled would be part of class attribute.
• active: This is a booling type. If true, the active would be part of class attribute.
• error: This is a booling type. If true, the error would be part of class attribute.

Modal

A standard Modal.

Example

<Modal className="examplemodal" init={true}></Modal>

is equal to

<div class="ui modal examplemodal"></div>

and call below Sementic-ui init function when element in the componentDidMount life cycle.

$('.ui.modal').modal();

You also can use init={param} to transfer parameter.

ex.

<Modal init='show'></Modal>

will transfer 'show' to init function.

$('.ui.modal').modal('show');

Properties

• init: You can see Modal usage on the Semantic-ui web site.
• active: This is a booling type. If true, the active would be part of class attribute.

Popup

A standard Popup. This is a Pre-Existing popup usage. The inline popup will comming.

Example

<Popup className="examplepopup"></Popup>

is equal to

<div class="ui popup examplepopup"></div>

and you can trigger popup by jQuery method.

$('.custom.button').popup({
  popup: $('.custom.popup'),
  on: 'click'
});

<Button className="custom">Show custom popup</Button>
<Popup className="custom">Hi! I'm custom popup</Popup>

Properties

Progress

A standard Progress.

Example

<Progress className="exampleprogress" init={true}></Progress>

is equal to

<div class="ui progress exampleprogress"></div>

and call below Sementic-ui init function when element in the componentDidMount life cycle.

$('.ui.progress').progress();

You also can use init={param} to transfer parameter.

ex.

<Progress init={{percent: 22}}></Progress>

will transfer {percent: 22} to init function.

$('.ui.progress').progress({percent: 22});

Properties

• init: You can see Progress usage on the Semantic-ui web site.
• percent: This is a string type. Use to be a progress data-percent state. You can see Progress usage for more detail.
• value: This is a string type. Use to be a progress data-value state. You can see Progress usage for more detail.
• total: This is a string type. Use to be a progress data-total state. You can see Progress usage for more detail.
• active: This is a booling type. If true, the active would be part of class attribute.
• success: This is a booling type. If true, the success would be part of class attribute.
• warning: This is a booling type. If true, the warning would be part of class attribute.
• error: This is a booling type. If true, the error would be part of class attribute.
• disabled: This is a booling type. If true, the disabled would be part of class attribute.

Rating

A standard Rating.

Example

<Rating className="examplerating" init={true}></Rating>

is equal to

<div class="ui rating examplerating"></div>

and call below Sementic-ui init function when element in the componentDidMount life cycle.

$('.ui.rating').rating();

You also can use init={param} to transfer parameter.

ex.

<Rating init={{initialRating: 3, maxRating: 5}}></Rating>

will transfer {initialRating: 3, maxRating: 5} to init function.

$('.ui.rating').rating({initialRating: 3, maxRating: 5});

Properties

• init: You can see Rating usage on the Semantic-ui web site.
• rating: This is a string type. Use to be a rating data-rating state. You can see Rating usage for more detail.
• maxRating: This is a string type. Use to be a rating data-max-rating state. You can see Rating usage for more detail.

Search

A standard Search.

Example

<Search className="examplesearch" init={true}></Search>

is equal to

<div class="ui search examplesearch"></div>

and call below Sementic-ui init function when element in the componentDidMount life cycle.

$('.ui.search').search();

You also can use init={param} to transfer parameter.

ex.

<Search init={{type: 'category'}}></Search>

will transfer {type: 'category'} to init function.

$('.ui.search').search({type: 'category'});

Properties

• init: You can see Search usage on the Semantic-ui web site.
• loading: This is a booling type. If true, the loading would be part of class attribute.

Shape

A standard Shape.

Example

<Shape className="exampleshape" init={true}></Shape>

is equal to

<div class="ui shape exampleshape"></div>

and call below Sementic-ui init function when element in the componentDidMount life cycle.

$('.ui.shape').shape();

You also can use init={param} to transfer parameter.

ex.

<Shape init='flip up'}></Shape>

will transfer 'flip up' to init function.

$('.ui.shape').shape('flip up');

Properties

• init: You can see Shape usage on the Semantic-ui web site.

Sidebar

A standard Sidebar.

Example

<Sidebar className="examplesidebar" init={true}></Sidebar>

is equal to

<div class="ui sidebar examplesidebar"></div>

and call below Sementic-ui init function when element in the componentDidMount life cycle.

$('.ui.sidebar').sidebar();

You also can use init={param} to transfer parameter.

ex.

<Sidebar init='show'></Sidebar>

will transfer 'show' to init function.

$('.ui.sidebar').sidebar('show');

Properties

• init: You can see Sidebar usage on the Semantic-ui web site.

Sticky

A standard Sticky.

Example

<Sticky className="examplesticky" init={true}></Sticky>

is equal to

<div class="ui sticky examplesticky"></div>

and call below Sementic-ui init function when element in the componentDidMount life cycle.

$('.ui.sticky').sticky();

You also can use init={param} to transfer parameter.

ex.

<Sticky init={{context: '#example'}}></Sticky>

will transfer {context: '#example'} to init function.

$('.ui.sticky').sticky({context: '#example'});

Properties

• init: You can see Sticky usage on the Semantic-ui web site.

Tab

A standard Tab.

Example

<Tab className="exampletab" init={true}></Tab>

is equal to

<div class="ui tab exampletab"></div>

and call below Sementic-ui init function when element in the componentDidMount life cycle.

$('.ui.tab').tab();

You also can use init={param} to transfer parameter.

ex.

<Tab init={{history: true, historyType: 'hash'}}></Tab>

will transfer {history: true, historyType: 'hash'} to init function.

$('.ui.tab').tab({history: true, historyType: 'hash'});

Properties

• init: You can see Tab usage on the Semantic-ui web site.
• active: This is a booling type. If true, the active would be part of class attribute.

Views

The views which interagte Semantic-Ui in react components.

Advertisement

A standard Advertisement.

Example

<Ad className="medium rectangle">
  <!-- Ad Code Here !-->
</Ad>

is equal to

<div class="ui ad medium rectangle">
  <!-- Ad Code Here !-->
</div>

Properties

• className: The className would be part of the class attribute.

Card

A standard Card.

Example

<Card className="examplecard">
  <Content>
    <Header>Hello World</Header>
    <div className="meta">
      <span className="time">1 days ago</span>
      <span className="category">Test</span>
    </div>
  </Content>
</Card>

is equal to

<div class="ui card examplecard">
  <div class="content">
    <div class="header">Hello World</div>
    <div class="meta">
      <span class="time">1 days ago</span>
      <span class="category">Test</span>
    </div>
  </div>
</div>

Properties

• className: The className would be part of the class attribute.

Comments/Comment

A standard Comments.

Example

<Comments className="examplecomments">
  <Comment>
    <a className="avatar">
      <Image src="./example/example.jpg" />
    </a>
    <Content>
      <a className="author">Lee</a>
    </Content>
  </Comment>
</Comments>

is equal to

<div class="ui Comments examplecomments">
  <div class="Comment">
    <a class="avatar">
      <img class="ui image" src="./example/example.jpg"></img>
    </a>
    <div class="content">
      <a class="author">Lee</a>
    </div>
  </div>
</div>

Properties

• className: The className would be part of the class attribute.

Feed

A standard Feed.

Example

<Feed className="examplefeed">
  <div className="event">
    <Label>
      <Image src="./example/example.jpg" />
    </Label>
    <Content>
      I said hello.
    </Content>
  </div>
</Feed>

is equal to

<div class="ui feed examplefeed">
  <div class="event">
    <div class="ui label">
      <img class="ui image" src="./example/example.jpg"></img>
    </div>
    <div class="content">
      I said hello.
    </div>
  </div>
</div>

Properties

• className: The className would be part of the class attribute.

Items/Item

A standard Items.

Example

<Items className="exampleitems">
  <Item>
    <Content>
      <Header>The Best Thing</Header>
      <div className="description">Nothing</div>
    </Content>
  </Item>
</Items>

is equal to

<div class="ui items exampleitems">
  <div class="item">
    <div class="content">
      <div class="header">The Best Thing</div>
      <div class="description">Nothing</div>
    </div>
  </div>
</div>

Properties

• className: The className would be part of the class attribute.

Statistic

A standard Statistic.

Example

<Statistic className="examplestatistic">
  <div className="value">22</div>
  <Lable>Breeds of Dog</Lable>
</Statistic>

is equal to

<div class="ui statistic examplestatistic">
  <div class="value">22</div>
  <div class="ui label">Breeds of Dog</div>
</div>

Properties

• className: The className would be part of the class attribute.
• loading: This is a booling type. If true, the loading would be part of class attribute.