Interactive 互動效果

設定滑鼠移入時套用的動態效果。

用法

<div sl-card sl-interactive="lift">卡片</div>
<button sl-button sl-interactive="press">按鈕</button>

原始碼

<div sl-card>滑鼠移入</div>

sl-interactive-growliftshadowpressdim互動效果

- 表示不寫這個屬性，用預設值；元件標記欄位的 - 是寫裸屬性

滑鼠移入後方可看出差異：

原始碼

<div sl-card style="width: 7rem">滑鼠移入</div>
<div sl-card sl-interactive="grow" style="width: 7rem">滑鼠移入</div>
<div sl-card sl-interactive="lift" style="width: 7rem">滑鼠移入</div>
<div sl-card sl-interactive="shadow" style="width: 7rem">滑鼠移入</div>
<div sl-card sl-interactive="press" style="width: 7rem">滑鼠移入</div>
<div sl-card sl-interactive="dim" style="width: 7rem">滑鼠移入</div>

選項

選項	效果
grow（未帶值時）	放大至 1.03 倍
lift	上移 4px，並加上陰影
shadow	只加陰影
press	縮小至 0.97 倍
dim	降低亮度

未帶值，或值不在表中時，一律視為 grow。

元件停用後不觸發效果。sl-button 可用 disabled 或 aria-disabled="true"。

其餘元件只能使用 aria-disabled="true"。

適用元件

sl-button 為特例，未標示時即為 grow：

元件	未標示時
sl-card	無效果
sl-button	grow
sl-chip	無效果
sl-notice	無效果。陰影疊在浮框外，不覆蓋框線