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.

---

• Interactions

  • EodiroButton
  • EodiroInput
  • EodiroTextarea

• Blocks

  • EodiroBlockContainer
  • EodiroBlockItem

---

Interactions

EodiroButton

<template>
  <eodiro-button>Click Me</eodiro-button>
</template>

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

export default {
  components: { EodiroButton }
}

Events

• @click

EodiroInput

<template>
  <eodiro-input v-model="value" />
</template>

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

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

Events

• @keydown
• @keyup
• @keypress

EodiroTextarea

<template>
  <eodiro-textarea v-model="content" />
</template>

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

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

Events

• @keydown
• @keyup
• @keypress

Blocks

EodiroBlockContainer

This component creates a grid container for multiple EodiroBlockItem.

<eodiro-block-container>
  <eodiro-block-item></eodiro-block-item>
</eodiro-block-container>

import { EodiroBlockContainer, EodiroBlockItem } from '~/components/ui/block/EodiroBlockContainer.vue

export default {
  components: { EodiroBlockContainer, EodiroBlockItem }
}

EodiroBlockItem

Use it with EodiroBlockContainer.

<eodiro-block-container>
  <eodiro-block-item></eodiro-block-item>
</eodiro-block-container>

import { EodiroBlockContainer, EodiroBlockItem } from '~/components/ui/block/EodiroBlockContainer.vue

export default {
  components: { EodiroBlockContainer, EodiroBlockItem }
}

Slots

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

Examples

<eodiro-block-item>
  <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>
</eodiro-block-item>

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