Mask

应用 CSS 遮罩将内容裁剪为各种形状。

导入

import { Mask } from 'asterui'

示例

基础形状

对图片应用不同的遮罩形状。

</>

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

所有形状

所有 15 种可用的遮罩形状。

</>

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

半遮罩

仅显示遮罩内容的一半。

</>

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

属性	描述	类型	默认值
shape	遮罩的形状	'squircle' | 'heart' | 'hexagon' | 'hexagon-2' | 'decagon' | 'pentagon' | 'diamond' | 'square' | 'circle' | 'star' | 'star-2' | 'triangle' | 'triangle-2' | 'triangle-3' | 'triangle-4'	-
half	仅显示遮罩的一半	'half-1' | 'half-2'	-
children	要遮罩的内容（通常是图片）	React.ReactNode	-
className	额外的 CSS 类名	string	-

无障碍

• 使用语义化的 div 元素
• 确保遮罩图片有适当的 alt 文本
• 将 HTML 属性传递给容器