图标按钮组件 MaterialButton - Icon Button link
link- 2种变体：
default和toggle - 5个大小：
xs,s,m,l, 还有xl - 2种形状：
round和square - 4种颜色：
filled,tonal,outlined, 还有text - 3种宽度：
normal,narrow和wide - 智能渲染：根据是否提供
href属性，自动切换渲染为<a>或<button>标签。 - 自动属性透传：可以像使用原生
<a>或<button>标签一样传递属性和监听事件。 - 内置交互反馈：提供 Material 风格的状态反馈。
组件属性 link
link| 属性名 | 类型 | 默认值 | 可选值 | 说明 | |
|---|---|---|---|---|---|
pattern | string | "icon-button" | 按钮形态（不可省略） | ||
variant | "default" | "default", "toggle" | 按钮变体类型 | ||
size | "s" | "xs", "s", "m", "l", "xl" | 按钮大小 | ||
shape | "round" | "round", "square" | 按钮形状 | ||
color | "filled" | "elevated", "filled", "tonal", "outlined", "text" | 按钮颜色 | ||
width | "normal" | "normal", "narrow", "wide" | 按钮宽度 | ||
href | - | - | 链接地址 | ||
target | - | - | 链接打开方式 | ||
state | "none" | "hover", "focus", "focus-visible", "active", "none" | 交互状态 | ||
disable | boolean | false | true, false | 是否禁用 | |
组件示例
vue
<MaterialButton pattern="icon-button" variant="" size="" shape="" color="" width="" href="" target="" state="" :disabled="">ICON_NAME</MaterialButton>