UI Components

eodiro UI Components is a set of reusable Vue components to be used instead of original HTML tags. It gives you much faster, unified and flexible development experience.

Be aware that components where their names are the same as HTML default elements tags cannot be used inside HTML template(not recommended). For example, <Button /> is different from <button />. <button /> creates an HTML default button element.

---

• Basic

  • Button

• Form

  • Input
  • Textarea

• Layouts

  • Grid

• Blocks

  • ArrowBlock
  • Accordion

---

Basic

Button

NOTE

• Labels should not wrap to multilines or exceed the width of minimum size of button.
• So try to make labels as short as possible while conveying a comprehensive meaning.
• If you plan to add an icon to a button, also it should not exceed the button's height.

<Button>Click Me</Button>

import { Button } from '~/components/ui'

export default {
  components: { Button }
}

Attributes

Attribute	Values	Description
full	Boolean	Set this attribute to make a button fit to parent's width. full and full="true" is the same.

Events

• @click

Form

Input

<Input v-model="myInputValue" />

import { Input } from '~/components/ui'

export default {
  components: { Input },
  data() {
    myInputValue: ''
  }
}

Bindings

• v-model

Events

• @keydown
• @keyup
• @keypress

Textarea

<Textarea v-model="content" />

import { Textarea } from '~/components/ui'

export default {
  components: { Textarea },
  data() {
    content: ''
  }
}

Bindings

• v-model

Events

• @keydown
• @keyup
• @keypress

Layouts

Grid

This component creates a grid container. Children items will be automatically wrapped down to next lines when they reach the minimum width.

<Grid></Grid>

import { Grid } from '~/components/ui

export default {
  components: { Grid }
}

Attributes

Attribute	Values	Description
proportion	"small" | "medium" | "large"	Decides grid minimum size. Passing nothing equals to "medium".

Blocks

ArrowBlock

It creates general right-arrowed menu block item.

<ArrowBlock></ArrowBlock>

import { ArrowBlock } from '~/components/ui

export default {
  components: { ArrowBlock }
}

Attributes

Attribute	Values	Description
noArrow	Boolean	Set this attribute to remove an arrow. Then you can use it as a normal block.

Slots

• icon: You can add an icon to a block item.
• content

Examples

<ArrowBlock>
  <template v-slot:icon>
    <!-- you should include a classname 'icon' -->
    <span class="icon my-icon"></span>
  </template>

  <template v-slot:content>
    My Block Item
  </template>
</ArrowBlock>

.my-icon {
  background-image: '~assets/icon.svg';
}

Accordion

It is a collapsable(foldable) block element.

<Accordion></Accordion>

import { Accordion } from '~/components/ui

export default {
  components: { Accordion }
}

Slots

• face
• content

Examples

<Accordion>
  <template v-slot:face>
    <h3>Always shown</h3>
  </template>

  <template v-slot:content>
    <p>Accordion content</p>
  </template>
</Accordion>