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

  • MenuBlock
  • Accordion

---

Basic

Button

Button's height is 3rem. So if you wish to add an icon, its height should not exceed the height.

<Button>Click Me</Button>

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

export default {
  components: { Button }
}

Events

• @click

Form

Input

<Input v-model="value" />

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

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

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.

<Grid></Grid>

import { Grid } from '~/components/ui

export default {
  components: { Grid }
}

Blocks

MenuBlock

It creates general right-arrowed menu block item.

<MenuBlock></MenuBlock>

import { MenuBlock } from '~/components/ui

export default {
  components: { MenuBlock }
}

Slots

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

Examples

<MenuBlock>
  <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>
</MenuBlock>

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