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.

---

• 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>