Mask

Mask crops the content of the element to common shapes.

Examples

Squircle

The mask can crop the shape of squircle.

Code

<script setup lang="ts">
import { BaseMask } from '@point-hub/papp'
</script>

<template>
  <component :is="BaseMask" shape="squircle" src="https://placehold.co/150" />
</template>

Diamond

The mask can crop the shape of diamond.

Code

<script setup lang="ts">
import { BaseMask } from '@point-hub/papp'
</script>

<template>
  <component :is="BaseMask" shape="diamond" src="https://placehold.co/150" />
</template>

Reuleaux Triangle

The mask can crop the shape of reuleaux triangle.

Code

<script setup lang="ts">
import { BaseMask } from '@point-hub/papp'
</script>

<template>
  <component :is="BaseMask" shape="reuleaux-triangle" src="https://placehold.co/150" />
</template>

Heart

The mask can crop the shape of heart.

Code

<script setup lang="ts">
import { BaseMask } from '@point-hub/papp'
</script>

<template>
  <component :is="BaseMask" shape="heart" src="https://placehold.co/150" />
</template>

Octagon

The mask can crop the shape of octagon.

Code

<script setup lang="ts">
import { BaseMask } from '@point-hub/papp'
</script>

<template>
  <component :is="BaseMask" shape="octagon" src="https://placehold.co/150" />
</template>

Hexagon

The mask can crop the shape of hexagon.

Code

<script setup lang="ts">
import { BaseMask } from '@point-hub/papp'
</script>

<template>
  <component :is="BaseMask" shape="hexagon" src="https://placehold.co/150" />
  <component :is="BaseMask" shape="hexagon-2" src="https://placehold.co/150" />
</template>

Star

The mask can crop the shape of star.

Code

<script setup lang="ts">
import { BaseMask } from '@point-hub/papp'
</script>

<template>
  <component :is="BaseMask" shape="star" src="https://placehold.co/150" />
  <component :is="BaseMask" shape="star-2" src="https://placehold.co/150" />
</template>

Mask API

Types

export type BaseMaskShapeType =
  | 'squircle'
  | 'diamond'
  | 'reuleaux-triangle'
  | 'hexagon'
  | 'hexagon-2'
  | 'heart'
  | 'octagon'
  | 'star'
  | 'star-2'

Props

Name	Type	Default	Description
src	string		Image source is required.
shape	BaseMaskShapeType		Image masking shape.