vue-ya-semantic-elements v0.0.4
vue-ya-semantic-elements
Yet another semantic-ui elements component for Vue2
Setup
import YaElements from 'vue-ya-semantic-elements'
Vue.use(YaElements)
Usage
This components provide two simple way to put semantic-ui classes. Also they are fully customisable
- As props/attributes
<ya-button left primary big>Big Button</ya-button>
- With dash-linked attribute
<ya-button ui-left-primary-big>Big Button</ya-button>
Avaliable elements
ya-
button container divider flag header icon image input label list loader rails reveal segment step'
The prefix(ya-
) and list of elements are also customisable.
As props/attriutes
This could keep nice style. However those are just plain word, so not easy to distingush with casual HTML attributes.
Currently possible words are
ui primary animated labled left center right aligned justified vertical horizontal fluid inverted fitted hidden clearing button tiny mini large icon container divider
This is very small part of whole possible list, but simpley I tired while listed and checked them. :)
But I told you, you can custoise this also. And please update good lists back to here. (PROFIT!)
With dash-linked attributed
This doesn't looks as good as a previous form, but safe and secure. And still good in my eyes. Basically you can put any word since I didn't put any validator for this, but naturaly now special charactor The order of each word doesn't matter but the trigger at first is important.
you can choose one of several triggers at the same time
- Configured trigger. default is 'ui' or your own.
<ya-icon ui-add-to-calendar-big/>
will be
<i class="ui add to calendar big icon></i>
- Or tag name
<ya-icon div-add-to-calendar-big/>
I don't knw a result, but anyway it will be converted to
<div class="ui add to calendar big icon"></div>
Customazation
One can customize YaElements
globally
Vue.use(YaElements, options)
Or locally in each component
import YaElements from 'vue-ya-semantic-elements'
export default {
name: 'MyComponent',
Props: ['myprop'],
...
components: {
...YaElements(options1),
...YaElements(options2)
}
}
Default options are
baseClass: 'ui',
custom: {},
elements,
includeTrigger: false,
includeElementName: true,
prefix: 'ya',
tagMap,
tags,
trigger: 'ui',
words
Let's see one by one. All your options will override correspond default value by key name.
baseClass
: A list of classes which are always included in class.prefix
: A prefix of tagname. This should be a one single alphabetical word without space, number, underbar.elements
: Possible elements. This can be an array or a space separated string.words
: Possible words in single attribute style. This can be an array or a space separated string.trigger
: A leading word in dash-linked style. This can be an array or a space separated string.tags
: These are also leading words in dash-linked style. But additionally this word will be applied to real tag.includeTrigger
: If true, trigger word is included in the class. Duplications withbaseClass
are allowedincludeElementName: If true a element name(ex:
buttonof
` will be included in the classtagMap
: Object. This decide a html tag for a certain element. Overrided by 'tags' (and tag prop). Defaults values are mostlydiv
and
const tagMap = {
button: 'button',
icon: 'i',
flag: 'i'
}
custom
: You can put your own names.
custom: {
'my-funny-name': 'button'
}
Please tell me if I missed anything.
All list
(baseClass, elements, tags, trigger, words) can be an array or a space separated string.
:scroll: Changelog
Details changes for each release are documented in the CHANGELOG.md.
Acknowledge
This project is strongly inspired from https://github.com/vouill/vue-bulma-components also many of codes :)