匯入

import-button.ts
import { NuiButton } from '@needless-ui/angular/button';

NuiButton

為原生的 <button> 或 <a> 套用按鈕樣式。

選擇器
button[nuiButton], a[nuiButton]
匯出為
nuiButton
NuiButton: 屬性
名稱型別預設值說明
variant輸入'solid' | 'soft' | 'outline' | 'ghost''solid'填色樣式:solid、soft、outline 或 ghost。
tone輸入'accent' | 'neutral' | 'danger''accent'配色:accent、neutral 或 danger。
size輸入'sm' | 'md' | 'lg''md'高度、內距和字級:sm、md 或 lg。
disabled輸入booleanfalse停用按鈕。用於連結時會設定 aria-disabled,並阻止連結被觸發。
motion輸入NuiMotion運動時使用的彈簧:snappy、bouncy、jelly、elastic、lazy、mechanical 或 none。
spring輸入NuiSpring任意彈簧,以 { stiffness, damping, mass } 的形式指定,在執行階段編譯成 CSS。它會覆寫 motion。
press輸入NuiPress按住時的效果:sink、squish、pop、wobble、rubber、tilt 或 none。
corners輸入NuiCorners邊角的形狀:round、squircle、bevel、scoop、notch 或 square。
radius輸入NuiRadius邊角的大小:none、small、medium、large 或 full。
density輸入NuiDensity佔用的空間:compact、regular 或 roomy。

用於客製化的輸入屬性如果未設定,會沿用最近的 data-nui-* 屬性。詳見客製化指南。