# Examples
# Basic Modal
# Usage
<template>
<div class="wrapper">
<button class="open" @click="openModal">
Open
</button>
</div>
</template>
<script>
import BasicComponent from '../src/components/BasicComponent'
export default {
methods: {
openModal() {
this.$FModal.show({ component: BasicComponent })
}
},
}
</script>
# BasicComponent
<template>
<div style="font-size: 1.5rem; padding: 1rem;">
Aliqua qui deserunt pariatur ullamco ex dolore mollit consequat eu ut id.
Amet elit nostrud aliqua laborum eiusmod anim reprehenderit excepteur
laboris nisi cupidatat ipsum nulla consequat.
</div>
</template>
# Close Button
# Usage
<template>
<div class="wrapper">
<button class="open" @click="openModal">
Open
</button>
</div>
</template>
<script>
import CloseButtonComponent from '../src/components/CloseButtonComponent'
export default {
methods: {
openModal() {
this.$FModal.show({ component: CloseButtonComponent })
}
}
}
</script>
# CloseButtonComponent
<template>
<div>
<div class="close">
<div class="close-title">Close Button</div>
<button @click="closeModal">×</button>
</div>
<div class="content">
Aliqua qui deserunt pariatur ullamco ex dolore mollit consequat eu ut id.
Amet elit nostrud aliqua laborum eiusmod anim reprehenderit excepteur
laboris nisi cupidatat ipsum nulla consequat.
</div>
</div>
</template>
<script>
export default {
methods: {
closeModal: function () {
this.$FModal.hide();
},
},
};
</script>
<style scoped>
.content {
padding: 15px 15px 15px 15px;
}
.close {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.close-title {
margin-left: 15px;
padding: 15px 0px;
font-size: 2rem;
font-weight: bold;
}
.close button {
margin-right: 15px;
font-size: 2.5rem;
}
* {
font-size: 1.5rem;
}
</style>
# Centered
# Usage
<template>
<div class="wrapper">
<button class="open" @click="openModal">
Open
</button>
</div>
</template>
<script>
import BasicComponent from '../src/components/BasicComponent'
export default {
methods: {
openModal() {
this.$FModal.show(
{
component: BasicComponent,
width: 300,
maxHeight: '100%',
placement: 'center center'
}
)
}
}
}
</script>
# Component Props
# Usage
<template>
<div>
<button @click="openModal">
Open
</button>
</div>
</template>
<script>
import PropsComponent from '../src/components/PropsComponent'
export default {
methods: {
openModal() {
this.$FModal.show(
{
component: PropsComponent
},
{
text: 'Hello Props',
color: '#7c8',
contentPadding: 30
}
)
}
}
}
</script>
# PropsComponent
<template>
<div :style="{ color, padding: `${contentPadding}px`, fontWeight: 'bold' }">
{{ text }}
</div>
</template>
<script>
export default {
props: {
text: {
type: String
},
color: {
type: String
},
contentPadding: {
type: Number
}
}
}
</script>
<style scoped>
* {
font-size: 1.5rem;
}
</style>
# Custom Styling
# Usage
<template>
<div>
<button @click="openModal">
Open
</button>
</div>
</template>
<script>
import BasicComponent from '../src/components/BasicComponent'
export default {
methods: {
openModal() {
this.$FModal.show(
{
component: BasicComponent,
overlayStyles: {
backgroundColor: 'rgba(72, 128, 48, 0.4)'
},
contentStyles: {
border: '4px solid grey',
borderBottomLeftRadius: '25px',
borderBottomRightRadius: '25px'
}
}
)
}
}
}
</script>
# BasicComponent
<template>
<div style="font-size: 1.5rem; padding: 1rem;">
Aliqua qui deserunt pariatur ullamco ex dolore mollit consequat eu ut id.
Amet elit nostrud aliqua laborum eiusmod anim reprehenderit excepteur
laboris nisi cupidatat ipsum nulla consequat.
</div>
</template>
# Image
# Usage
<template>
<div>
<button @click="openModal">
Open
</button>
</div>
</template>
<script>
import ImageComponent from '../src/components/ImageComponent'
export default {
methods: {
openModal() {
this.$FModal.show(
{
component: ImageComponent,
}
)
}
}
}
</script>
# ImageComponent
<template>
<div>
<img class="image" width="100%" src="https://source.unsplash.com/800x300" @load="onLoad">
<div v-if="!imageLoaded" class="loading-indicator" :style="{ backgroundImage: `url(${$withBase('/loading.gif')})`}"></div>
<div class="like-button">♡</div>
<div class="image-title">{{ new Date().toDateString() }}</div>
<div class="image-description">
Lorem, ipsum dolor sit amet
</div>
<div class="content">
Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos. Unsplash.
</div>
</div>
</template>
<script>
export default {
data: function() {
return {
imageLoaded: false
}
},
methods: {
onLoad(){
this.imageLoaded = true
}
}
}
</script>
<style scoped>
.image {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.like-button {
position: absolute;
right: 10px;
top: 10px;
padding: 1px 10px;
border-radius: 8px;
background-color: rgba(240, 240, 240, 0.8);
font-size: 1.2rem;
}
.loading-indicator {
background-size: cover;
background-position: center;
height: 139px;
}
.image-title {
padding: 10px 10px 5px 10px;
font-weight: bold;
font-size: 2rem;
}
.image-description {
padding: 0px 10px 10px 10px;
color: rgba(128, 128, 128, 0.8);
font-weight: 400;
font-size: 1.2rem;
}
.content {
padding: 10px;
font-size: 1.3rem;
}
</style>
← Playground API →