Mask

Contrast Bootstrap Mask

Contrast Angular Bootstrap Masks alter the visibility of an element by either partially or fully hiding it. Contrast Design Angular Masks are used to make content more visible in the picture.

Importing the Contrast Angular Bootstrap Mask Module

To use the Contrast Angular Bootstrap Mask component in your project you need to import MaskModule.

import {MaskModule } from 'cdbangular';

We use two Contrast components CDBMask and CDBView. The content that we are trying to hide or partially hide stays in the CDBView component. Then the CDBMask is the overlay or pattern over the content.

Mask Patterns

The Contrast Angular Bootstrap Mask component, the CDBMask, allows you to pass in a pattern parameter ( ranging from pattern1 to pattern4) into the pattern prop to use a pattern over your content.

Angular Bootstrap Mask Patterns

HTML

html

<CDBView>
    <img src="../../../assets/../../../assets/img/food.jpg" class="img-fluid" alt="" style="width: 100%" />
    <CDBMask pattern="pattern1" class="flex-center" ></CDBMask>
</CDBView>
<CDBView>
    <img src="../../../assets/img/food.jpg" class="img-fluid" alt="" style="width: 100%" />
    <CDBMask pattern="pattern2" class="flex-center" ></CDBMask>
</CDBView>
<CDBView>
    <img src="../../../assets/img/food.jpg" class="img-fluid" alt="" style="width: 100%" />
    <CDBMask pattern="pattern3" class="flex-center" ></CDBMask>
</CDBView>
<CDBView>
    <img src="../../../assets/img/food.jpg" class="img-fluid" alt="" style="width: 100%" />
    <CDBMask pattern="pattern4" class="flex-center" ></CDBMask>
</CDBView>

Mask Light Overlay

Use the' overlay' prop to use a light background color as your overlay over your content. Set the value to the color you would like, appending the word Light at the end. For example overlay= "blueLight".

Angular Bootstrap Mask Light Overlay

HTML

html

<CDBView>
    <img src="../../../assets/img/food.jpg" class="img-fluid" alt="" style="width: 100%" />
    <CDBMask overlay="blueLight" class="flex-center" ></CDBMask>
</CDBView>
<CDBView>
    <img src="../../../assets/img/food.jpg" class="img-fluid" alt="" style="width: 100%" />
    <CDBMask overlay="redLight" class="flex-center" ></CDBMask>
</CDBView>

Mask Strong Overlay

Use the' overlay' prop to use a thick background color as your overlay over your content. Set the value to the color you would like, appending the word Strong at the end. For example overlay= "blueStrong".

Angular Bootstrap Mask Strong Overlay

HTML

html

<CDBView>
    <img src="../../../assets/img/food.jpg" class="img-fluid" alt="" style="width: 100%" />
    <CDBMask overlay="blueStrong" class="flex-center" ></CDBMask>
</CDBView>
<CDBView>
    <img src="../../../assets/img/food.jpg" class="img-fluid" alt="" style="width: 100%" />
    <CDBMask overlay="redStrong" class="flex-center" ></CDBMask>
</CDBView>

API Reference: Contrast Angular Bootstrap Mask Props

This section will build on your information about the props you get to use with the Contrast Angular Bootstrap Mask component. You will find out what these props do, their default values, and how you would use them in your code.

The table below lists other prop options of the CDBMask component.

Name	Type	Description	Example
class	String	Adds custom classes	class="myClass"
overlay	String	Creates overlay in passed color	overlay="grey-light"
pattern	String or Number	Creates pattern with chosen style	pattern="1"

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

Notification

Pane