The collections which interagte Semantic-Ui in react components.
A standard Breadcrumb.
<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>
- className: The className would be part of the
class
attribute.
A standard Form.
<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>
- className: The className would be part of the
class
attribute.
A standard Grid.
<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>
- className: The className would be part of the
class
attribute.
A standard Menu.
<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>
- className: The className would be part of the
class
attribute.
A standard Message.
<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>
- className: The className would be part of the
class
attribute.
A standard Table.
<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>
- className: The className would be part of the
class
attribute.
The elements which interagte Semantic-Ui in react components.
A standard Button.
<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.
- 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
, theactive
would be part ofclass
attribute. - disabled: This is a booling type. If
true
, thedisabled
would be part ofclass
attribute. - loading: This is a booling type. If
true
, theloading
would be part ofclass
attribute.
A standard Divider.
<Divider className="exampledivider"></Divider>
is equal to
<div class="ui divider exampledivider"></div>
- className: The className would be part of the
class
attribute.
A standard Flag.
<Flag className="tw" onClick={this._onClick}></Flag>
is equal to
<i class="flag tw"></i>
and register the function(this._onClick) on click event.
- className: The className would be part of the
class
attribute. - onClick: The click event.
A standard Header.
<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.
- 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
, thedisabled
would be part ofclass
attribute.
A standard Icon.
<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.
- 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
, thedisabled
would be part ofclass
attribute. - loading: This is a booling type. If
true
, theloading
would be part ofclass
attribute.
A standard Image.
<Image className="medium" src="./example/example.jpg" disabled={true}></Image>
is equal to
<img class="ui image medium disabled" src="./example/example.jpg"></img>
- className: The className would be part of the
class
attribute. - src: The image's source file.
- disabled: This is a booling type. If
true
, thedisabled
would be part ofclass
attribute.
A standard Input.
<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>
- className: The className would be part of the
class
attribute. - loading: This is a booling type. If
true
, theloading
would be part ofclass
attribute. - focus: This is a booling type. If
true
, thefocus
would be part ofclass
attribute. - error: This is a booling type. If
true
, theerror
would be part ofclass
attribute.
A standard Label.
<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.
- 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.
A standard List.
<List className="examplelist"></List>
is equal to
<div class="ui list examplelist"></div>
- className: The className would be part of the
class
attribute.
A standard Loader.
<Loader className="exampleloader" disabled={true}></Loader>
is equal to
<div class="ui loader disabled exampleloader"></div>
- className: The className would be part of the
class
attribute. - active: This is a booling type. If
true
, theactive
would be part ofclass
attribute. - disabled: This is a booling type. If
true
, thedisabled
would be part ofclass
attribute.
A standard Rail.
<Rail className="examplerail"></Rail>
is equal to
<div class="ui rail examplerail"></div>
- className: The className would be part of the
class
attribute.
A standard Reveal.
<Reveal className="examplereveal" disabled={true}></Reveal>
is equal to
<div class="ui reveal disabled examplereveal"></div>
- className: The className would be part of the
class
attribute. - disabled: This is a booling type. If
true
, thedisabled
would be part ofclass
attribute.
A standard Segment.
<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.
- 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
, thedisabled
would be part ofclass
attribute. - loading: This is a booling type. If
true
, theloading
would be part ofclass
attribute.
A standard Steps/Step.
<Steps className="examplestep">
<Step disabled={true}>123</Step>
</Steps>
is equal to
<div class="ui steps examplestep">
<div class="step disabled">123</div>
</div>
- className: The className would be part of the
class
attribute. - active: This is a booling type. If
true
, theactive
would be part ofclass
attribute. - disabled: This is a booling type. If
true
, thedisabled
would be part ofclass
attribute. - completed: This is a booling type. If
true
, thecompleted
would be part ofclass
attribute.
The modules which interagte Semantic-Ui in react components.
A standard Accordion.
<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');
- init: You can see Accordion usage on the Semantic-ui web site.
A standard Checkbox.
<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});
- init: You can see Checkbox usage on the Semantic-ui web site.
- disabled: This is a booling type. If
true
, thedisabled
would be part ofclass
attribute. - readOnly: This is a booling type. If
true
, theread-only
would be part ofclass
attribute.
A standard Dimmer.
<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'});
- init: You can see Dimmer usage on the Semantic-ui web site.
- disabled: This is a booling type. If
true
, thedisabled
would be part ofclass
attribute. - active: This is a booling type. If
true
, theactive
would be part ofclass
attribute.
A standard Dropdown.
<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'});
- init: You can see Dropdown usage on the Semantic-ui web site.
- disabled: This is a booling type. If
true
, thedisabled
would be part ofclass
attribute. - active: This is a booling type. If
true
, theactive
would be part ofclass
attribute. - error: This is a booling type. If
true
, theerror
would be part ofclass
attribute.
A standard Modal.
<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');
- init: You can see Modal usage on the Semantic-ui web site.
- active: This is a booling type. If
true
, theactive
would be part ofclass
attribute.
A standard Popup. This is a Pre-Existing popup usage. The inline popup will comming.
<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>
A standard Progress.
<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});
- 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
, theactive
would be part ofclass
attribute. - success: This is a booling type. If
true
, thesuccess
would be part ofclass
attribute. - warning: This is a booling type. If
true
, thewarning
would be part ofclass
attribute. - error: This is a booling type. If
true
, theerror
would be part ofclass
attribute. - disabled: This is a booling type. If
true
, thedisabled
would be part ofclass
attribute.
A standard Rating.
<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});
- 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.
A standard Search.
<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'});
- init: You can see Search usage on the Semantic-ui web site.
- loading: This is a booling type. If
true
, theloading
would be part ofclass
attribute.
A standard Shape.
<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');
- init: You can see Shape usage on the Semantic-ui web site.
A standard Sidebar.
<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');
- init: You can see Sidebar usage on the Semantic-ui web site.
A standard Sticky.
<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'});
- init: You can see Sticky usage on the Semantic-ui web site.
A standard Tab.
<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'});
- init: You can see Tab usage on the Semantic-ui web site.
- active: This is a booling type. If
true
, theactive
would be part ofclass
attribute.
The views which interagte Semantic-Ui in react components.
A standard Advertisement.
<Ad className="medium rectangle">
<!-- Ad Code Here !-->
</Ad>
is equal to
<div class="ui ad medium rectangle">
<!-- Ad Code Here !-->
</div>
- className: The className would be part of the
class
attribute.
A standard Card.
<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>
- className: The className would be part of the
class
attribute.
A standard Comments.
<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>
- className: The className would be part of the
class
attribute.
A standard Feed.
<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>
- className: The className would be part of the
class
attribute.
A standard Items.
<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>
- className: The className would be part of the
class
attribute.
A standard Statistic.
<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>
- className: The className would be part of the
class
attribute. - loading: This is a booling type. If
true
, theloading
would be part ofclass
attribute.