Mask

Aplica máscaras CSS para recortar contenido en varias formas.

Importar

import { Mask } from 'asterui'

Ejemplos

Formas Básicas

Aplica diferentes formas de máscara a imágenes.

</>

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 las Formas

Las 15 formas de máscara disponibles.

</>

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 de Mitad

Muestra solo la mitad del contenido enmascarado.

</>

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

Propiedad	Descripción	Tipo	Predeterminado
shape	Forma de la máscara	'squircle' | 'heart' | 'hexagon' | 'hexagon-2' | 'decagon' | 'pentagon' | 'diamond' | 'square' | 'circle' | 'star' | 'star-2' | 'triangle' | 'triangle-2' | 'triangle-3' | 'triangle-4'	-
half	Mostrar solo la mitad de la máscara	'half-1' | 'half-2'	-
children	Contenido a enmascarar (típicamente una imagen)	React.ReactNode	-
className	Clases CSS adicionales	string	-

Accesibilidad

• Usa elemento div semántico
• Asegura que las imágenes enmascaradas tengan texto alt apropiado
• Pasa a través de atributos HTML al contenedor