Miss any of our Open RFC calls?Watch the recordings here! »

semantic-ui-vue2-albinodrought

2.5.7 • Public • Published

Semantic UI's Components

Components and mixins to use with Vue 2

Installation

$ npm install semantic-ui-vue2-albinodrought

Include Semantic UI's CSS in your HTML. See official docs.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.7/semantic.min.css">

Usage

Imports

Import the global mixin to use all the components. See example below.

Components

Import individual components.

  • Grid – component
  • Row – component
  • Column – component
  • Checkbox – component
  • Dropdown – component
  • Input – component
  • Label – component
  • Form – component
  • Field – component
import {ComponentName} from 'semantic-ui-vue2'
 
export default {
    components: {
        'component-name': ComponentName,
                …
    },
    …
}

Collections

Mixins to import related components at once

  • Gridui-grid, ui-row, ui-column
  • Formui-form, ui-field
import {Collections} from 'semantic-ui-vue2'
 
export default {
    mixins: [Collections.CollectionName]
    …
}

Example

App.vue:

<template lang="html">
    <ui-grid container>
        <ui-row>
            <ui-column>
                Lorem ipsum dolor sit amet
            </ui-column>
        </ui-row>
    </ui-grid>
</template>
 
<script>
import {Mixin} from 'semantic-ui-vue2'
 
export default {
    mixins: [Mixin]
}
</script> 

Result:

<div class="ui grid container">
    <div class="row">
        <div class="column">
            Lorem ipsum dolor sit amet
        </div>
    </div>
</div>

Install

npm i semantic-ui-vue2-albinodrought

DownloadsWeekly Downloads

2

Version

2.5.7

License

ISC

Last publish

Collaborators

  • avatar