Iframe v1.0

The <e-iframe> component is a versatile component that can be used for displaying webpages.

Usage

An e-iframe has 2 attributes that must be provided, the url and size props are required

<e-iframe
    url=''
    size=''
/>

Attributes

url | Type: String | required
size | Type: String [small, medium, large] | required

Examples

Below a few interactive examples of e-iframes in different sizes can be found.

size='small' (H: 175px, W: 100%)

<e-iframe
    url='https://www.youtube.com/embed/dQw4w9WgXcQ'
    size='small'
/>

size='medium' (H: 369px, W: 100%)

<e-iframe
    url='https://www.youtube.com/embed/dQw4w9WgXcQ'
    size='medium'
/>

size='large' (H: 900px, W: 100%)

<e-iframe
    url='https://www.youtube.com/embed/dQw4w9WgXcQ'
    size='large'
/>

Source Code

e-iframe.vue

<script setup lang="ts">
export type Props = {
  url: string;
  size: string;
};
defineProps<Props>();
</script>

<template>
  <div class="e-iframe">
    <iframe
      class="iframe-content"
      :class="size"
      :src="url"
    >
    </iframe>
  </div>
</template>

<style scoped lang="scss">
.e-iframe {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  width: 100%;

  .iframe-content {
    border: 0;
    border-radius: 15px;
    box-shadow: var(--box-shadow);

    &.small {
      height: 175px;
    }

    &.medium {
      height: 369px;
    }

    &.large {
      height: 900px;
    }
  }
}
</style>