Mask

Aplique máscaras CSS para cortar conteúdo em várias formas.

Importação

import { Mask } from 'asterui'

Exemplos

Formas Básicas

Aplique diferentes formas de máscara a imagens.

</>

import { Mask, Space } from 'asterui'

function App() {
  return (
      <Space wrap>
        <Mask shape="squircle">
          <img src="https://picsum.photos/seed/squircle/200" alt="squircle" className="w-24 h-24" />
        </Mask>
        <Mask shape="heart">
          <img src="https://picsum.photos/seed/heart/200" alt="heart" className="w-24 h-24" />
        </Mask>
        <Mask shape="hexagon">
          <img src="https://picsum.photos/seed/hexagon/200" alt="hexagon" className="w-24 h-24" />
        </Mask>
        <Mask shape="star">
          <img src="https://picsum.photos/seed/star/200" alt="star" className="w-24 h-24" />
        </Mask>
      </Space>
    )
}

export default App

Todas as Formas

Todas as 15 formas de máscara disponíveis.

</>

squircle

heart

hexagon

hexagon-2

decagon

pentagon

diamond

square

circle

star

star-2

triangle

triangle-2

triangle-3

triangle-4

import { Mask, Space } from 'asterui'

function App() {
  const shapes = [
    'squircle', 'heart', 'hexagon', 'hexagon-2', 'decagon',
    'pentagon', 'diamond', 'square', 'circle', 'star',
    'star-2', 'triangle', 'triangle-2', 'triangle-3', 'triangle-4'
  ] as const
  
  return (
      <Space wrap size="lg">
        {shapes.map((shape) => (
          <div key={shape} className="text-center">
            <Mask shape={shape}>
              <img src={`https://picsum.photos/seed/${shape}/100`} alt={shape} className="w-20 h-20" />
            </Mask>
            <div className="text-xs mt-1 text-base-content/70">{shape}</div>
          </div>
        ))}
      </Space>
    )
}

export default App

Máscaras Meio

Mostre apenas metade do conteúdo mascarado.

</>

half-1

half-2

import { Mask, Space } from 'asterui'

function App() {
  return (
      <Space size="lg">
        <div className="text-center">
          <Mask shape="circle" half="half-1">
            <img src="https://picsum.photos/seed/half1/100" alt="half-1" className="w-20 h-20" />
          </Mask>
          <div className="text-xs mt-1 text-base-content/70">half-1</div>
        </div>
        <div className="text-center">
          <Mask shape="circle" half="half-2">
            <img src="https://picsum.photos/seed/half2/100" alt="half-2" className="w-20 h-20" />
          </Mask>
          <div className="text-xs mt-1 text-base-content/70">half-2</div>
        </div>
      </Space>
    )
}

export default App

API

Mask

Propriedade	Descrição	Tipo	Padrão
shape	Forma da máscara	'squircle' | 'heart' | 'hexagon' | 'hexagon-2' | 'decagon' | 'pentagon' | 'diamond' | 'square' | 'circle' | 'star' | 'star-2' | 'triangle' | 'triangle-2' | 'triangle-3' | 'triangle-4'	-
half	Mostrar apenas metade da máscara	'half-1' | 'half-2'	-
children	Conteúdo a mascarar (tipicamente uma imagem)	React.ReactNode	-
className	Classes CSS adicionais	string	-

Acessibilidade

• Usa elemento div semântico
• Garanta que imagens mascaradas tenham texto alternativo apropriado
• Passa através atributos HTML para o container