Skip to content

Latest commit

 

History

History
552 lines (376 loc) · 12.6 KB

Modules.md

File metadata and controls

552 lines (376 loc) · 12.6 KB

Modules

The modules which integrate 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

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.

Embed

A standard Embed.

Example

<Embed className="exampleembed" source="youtube" sourceId="pfdu_gTry8E" placeholder="/images/bear-waving.jpg" init={true}></Embed>

is equal to

<div class="ui embed exampleembed" data-source="youtube" data-id="pfdu_gTry8E" data-placeholder="/images/bear-waving.jpg"></div>

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

$('.ui.embed').embed();

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

ex.

<Embed init={{source: 'youtube', id: 'pfdu_gTry8E', placeholder: '/images/bear-waving.jpg'}}></Embed>

will transfer {source: 'youtube', id: 'pfdu_gTry8E', placeholder: '/images/bear-waving.jpg'} to init function.

$('.ui.embed').embed({source: 'youtube', id: 'pfdu_gTry8E', placeholder: '/images/bear-waving.jpg'});

Properties

  • init: You can see Embed usage on the Semantic-ui web site.
  • source: This is a string type. Use to be a embed data-source state. You can see Embed usage for more detail.
  • sourceId: This is a string type. Use to be a embed data-id state. You can see Embed usage for more detail.
  • placeholder: This is a string type. Use to be a embed data-placeholder state. You can see Embed usage for more detail.
  • url: This is a string type. Use to be a embed data-url state. You can see Embed usage for more detail.
  • icon: This is a string type. Use to be a embed data-icon state. You can see Embed usage for more detail.

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

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.
  • loading: This is a booling type. If true, the loading would be part of class attribute.