缩略图
@astryxdesign/core v0.7.1 · Thumbnail
属性
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
src | string | - | 图片地址。加载失败时,这一张回退到占位图。 |
alt | string | - | 图片的替代文字。 |
label | string | - | 无障碍名称,不画出来。提示和移除按钮都会用到。 |
isLoading | boolean | false | 没有 src 时是骨架。有图片时在上面盖加载指示。 |
isDisabled | boolean | false | 把缩略图调淡,并忽略点击和移除。 |
showRemoveOn | 'always' | 'hover' | 'hover' | 移除按钮何时可见。hover 在键盘焦点时也会出现,粗指针设备上则一直可见。 |
事件
| 名称 | 参数 | 时机 |
|---|---|---|
click | MouseEvent | 预览被激活,且没有禁用、也没有在加载。 |
remove | MouseEvent | 使用移除按钮。只有监听了这个事件才会渲染按钮。 |
主题
方块是 64px,圆角用元素圆角,底色是中性色。边框 1px,画在内侧。占位图标 24px。移除按钮 20×20,距上沿和结束沿一个间距台阶,背景是遮罩色,图标是深色底上的浅色。粗指针会把点击区域向外扩 2px。禁用时不透明度为 0.5。