Mask

Appliquez des masques CSS pour recadrer le contenu en diverses formes.

Import

import { Mask } from 'asterui'

Exemples

Formes basiques

Appliquez différentes formes de masque aux images.

</>

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

Toutes les formes

Les 15 formes de masque 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

Demi-masques

Affichez seulement la moitié du contenu masqué.

</>

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

Propriété	Description	Type	Par défaut
shape	Forme du masque	'squircle' | 'heart' | 'hexagon' | 'hexagon-2' | 'decagon' | 'pentagon' | 'diamond' | 'square' | 'circle' | 'star' | 'star-2' | 'triangle' | 'triangle-2' | 'triangle-3' | 'triangle-4'	-
half	Afficher seulement la moitié du masque	'half-1' | 'half-2'	-
children	Contenu à masquer (généralement une image)	React.ReactNode	-
className	Classes CSS supplémentaires	string	-

Accessibilité

• Utilise un élément div sémantique
• Assurez-vous que les images masquées ont un texte alternatif approprié
• Transmet les attributs HTML au conteneur