Vue Bootstrap Masks
Vue Masks - Bootstrap 4 & Material Design
Bootstrap masks alter the visibility of an element by either partially or fully hiding it. Masks are used to make content more visible in the picture.
Pattern
pattern = 8
<template>
<mdb-view src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/8-col/img (132).jpg" alt="Image of ballons flying over canyons with mask pattern one">
<mdb-mask pattern="8" text="pattern = 8" />
</mdb-view>
</template>
<script>
import { mdbView, mdbMask } from "mdbvue";
export default {
name: "MaskPage",
components: {
mdbView,
mdbMask
}
}
</script>
Overlay
strong overlay
<template>
<mdb-view src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/8-col/img (132).jpg" alt="Sample image">
<mdb-mask overlay="green-strong" text="strong overlay" />
</mdb-view>
</template>
<script>
import { mdbView, mdbMask } from "mdbvue";
export default {
name: "MaskPage",
components: {
mdbView,
mdbMask
}
}
</script>
Patterns
no mask
pattern = 1
pattern = 2
pattern = 3
pattern = 4
pattern = 5
pattern = 6
pattern = 7
pattern = 8
pattern = 9
Usage
Step 1: Create a wrapper containing component mdb-view
.
<template>
<mdb-view>
[...]
</mdb-view>
</template>
<script>
import { mdbView } from "mdbvue";
export default {
name: "MaskPage",
components: {
mdbView
}
}
</script>
Step 2: Set a path to the image.
<template>
<mdb-view src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" alt="">
[...]
</mdb-view>
</template>
<script>
import { mdbView } from "mdbvue";
export default {
name: "MaskPage",
components: {
mdbView
}
}
</script>
Step 3: Add a component mdb-mask
to cover the image with the pattern.
<template>
<mdb-view src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" alt="">
<mdb-mask />
</mdb-view>
</template>
<script>
import { mdbView, mdbMask } from "mdbvue";
export default {
name: "MaskPage",
components: {
mdbView,
mdbMask
}
}
</script>
Step 4: Choose a pattern prop from the examples above.
<template>
<mdb-view src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" alt="">
<mdb-mask pattern="1" />
</mdb-view>
</template>
<script>
import { mdbView, mdbMask } from "mdbvue";
export default {
name: "MaskPage",
components: {
mdbView,
mdbMask
}
}
</script>
Step 5: If you want to add some text, you can use a prop flex-center
to center it.
<template>
<mdb-view src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" alt="">
<mdb-mask pattern="1" flex-center text="pattern=1" />
</mdb-view>
</template>
<script>
import { mdbView, mdbMask } from "mdbvue";
export default {
name: "MaskPage",
components: {
mdbView,
mdbMask
}
}
</script>
Overlays
slight overlay
light overlay
strong overlay
Usage
Instruction and markup are the same like for the patterns. It means you add an overlay prop
(black-strong
in the example below) to the mdb-mask
.
See the full list of the overlay colors and intensity
<template>
<mdb-view src="https://mdbootstrap.com/img/Photos/Others/nature-sm.jpg" alt="">
<mdb-mask flex-center overlay="black-strong" text="strong overlay" />
</mdb-view>
</template>
<script>
import { mdbView, mdbMask } from "mdbvue";
export default {
name: "MaskPage",
components: {
mdbView,
mdbMask
}
}
</script>
Overlay colors and intensity
Choose one of the overlay props from the list below to set a desired intensity and color of your mask.
blue-light
red-light
pink-light
purple-light
indigo-light
cyan-light
teal-light
green-light
lime-light
yellow-light
orange-light
brown-light
grey-light
blue-grey-light
black-light
stylish-light
white-light
blue-strong
red-strong
pink-strong
purple-strong
indigo-strong
cyan-strong
teal-strong
green-strong
lime-strong
yellow-strong
orange-strong
brown-strong
grey-strong
blue-grey-strong
black-strong
stylish-strong
white-strong
blue-slight
red-slight
pink-slight
purple-slight
indigo-slight
cyan-slight
teal-slight
green-slight
lime-slight
yellow-slight
orange-slight
brown-slight
grey-slight
blue-grey-slight
black-slight
stylish-slight
white-slight
Warning: file_get_contents(common/gs.html): failed to open stream: No such file or directory in /var/www/html/legacy/vue/5.8.3/index.php on line 143