# Props
All props for IphonePreview components.
# Initial usage
# Example
# Source Code
<template>
<iphone-preview />
</template>
<script>
import { IphonePreview } from 'vue-push-notification-preview';
import 'vue-push-notification-preview/src/assets/devices/iphone_x.scss';
export default {
components: {
IphonePreview
}
}
</script>
# Notification Application Name
# Example
# Source Code
<template>
<iphone-preview
text-application-name="Dummy application name"
/>
</template>
<script>
import { IphonePreview } from 'vue-push-notification-preview';
import 'vue-push-notification-preview/src/assets/devices/iphone_x.scss';
export default {
components: {
IphonePreview
}
}
</script>
# Notification Time
# Example
# Source Code
<template>
<iphone-preview
text-time="25m"
/>
</template>
<script>
import { IphonePreview } from 'vue-push-notification-preview';
import 'vue-push-notification-preview/src/assets/devices/iphone_x.scss';
export default {
components: {
IphonePreview
}
}
</script>
# Notification Title
# Example
# Source Code
<template>
<iphone-preview
text-title="Phasellus at accumsan velit"
/>
</template>
<script>
import { IphonePreview } from 'vue-push-notification-preview';
import 'vue-push-notification-preview/src/assets/devices/iphone_x.scss';
export default {
components: {
IphonePreview
}
}
</script>
# Notification Body
# Example
# Source Code
<template>
<iphone-preview
text-body="Maecenas auctor mi euismod diam iaculis dictum. Donec et sem ut augue condimentum egestas."
/>
</template>
<script>
import { IphonePreview } from 'vue-push-notification-preview';
import 'vue-push-notification-preview/src/assets/devices/iphone_x.scss';
export default {
components: {
IphonePreview
}
}
</script>
# Notification Image
# Example
# Source Code
<template>
<iphone-preview
image="https://images.unsplash.com/photo-1569172122301-bc5008bc09c5?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80"
/>
</template>
<script>
import { IphonePreview } from 'vue-push-notification-preview';
import 'vue-push-notification-preview/src/assets/devices/iphone_x.scss';
export default {
components: {
IphonePreview
}
}
</script>
# Dark mode
# Example
# Source Code
<template>
<iphone-preview
appearance-mode="dark"
/>
</template>
<script>
import { IphonePreview } from 'vue-push-notification-preview';
import 'vue-push-notification-preview/src/assets/devices/iphone_x.scss';
export default {
components: {
IphonePreview
}
}
</script>
# Background Image
# Example
# Source Code
<template>
<iphone-preview
background-image="https://images.unsplash.com/photo-1569172122301-bc5008bc09c5?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80"
/>
</template>
<script>
import { IphonePreview } from 'vue-push-notification-preview';
import 'vue-push-notification-preview/src/assets/devices/iphone_x.scss';
export default {
components: {
IphonePreview
}
}
</script>
# Background Color
# Example
# Source Code
<template>
<iphone-preview
background-color="#3eaf7c"
/>
</template>
<script>
import { IphonePreview } from 'vue-push-notification-preview';
import 'vue-push-notification-preview/src/assets/devices/iphone_x.scss';
export default {
components: {
IphonePreview
}
}
</script>
# Device Height
# Example
# Source Code
<template>
<iphone-preview
:height="700"
/>
</template>
<script>
import { IphonePreview } from 'vue-push-notification-preview';
import 'vue-push-notification-preview/src/assets/devices/iphone_x.scss';
export default {
components: {
IphonePreview
}
}
</script>