Angular Bootstrap Mask

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 React 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.

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".

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".

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.

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help 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 UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast