Needless UI

คอมโพเนนต์

Button

ปุ่มคำสั่งและลิงก์ที่จัดสไตล์บนเอลิเมนต์ button และ a แบบเนทีฟ

Import

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

NuiButton

กำหนดสไตล์ปุ่มให้ <button> หรือ <a> แบบเนทีฟ

Selector
button[nuiButton], a[nuiButton]
Export เป็น
nuiButton
ชื่อชนิดค่าเริ่มต้นคำอธิบาย
variantInput'solid' | 'soft' | 'outline' | 'ghost''solid'รูปแบบพื้นสี: solid soft outline หรือ ghost
toneInput'accent' | 'neutral' | 'danger''accent'ชุดสี: accent neutral หรือ danger
sizeInput'sm' | 'md' | 'lg''md'ความสูง padding และขนาดตัวอักษร: sm md หรือ lg
disabledInputbooleanfalseปิดใช้งานปุ่ม สำหรับเอลิเมนต์ a จะตั้งค่า aria-disabled และป้องกันไม่ให้ลิงก์ทำงาน
motionInputNuiMotionสปริงที่ใช้ในการเคลื่อนไหว: snappy bouncy jelly elastic lazy mechanical หรือ none
springInputNuiSpringสปริงแบบใดก็ได้ในรูป { stiffness, damping, mass } ซึ่งจะคอมไพล์เป็น CSS ขณะรันไทม์ และใช้แทน motion
pressInputNuiPressสิ่งที่เกิดขึ้นขณะกดค้างไว้: sink squish pop wobble rubber tilt หรือ none
cornersInputNuiCornersรูปทรงของมุม: round squircle bevel scoop notch หรือ square
radiusInputNuiRadiusขนาดของมุม: none small medium large หรือ full
densityInputNuiDensityพื้นที่ที่ใช้: compact regular หรือ roomy

Input สำหรับการปรับแต่งที่ไม่ได้กำหนดค่าไว้ จะใช้ค่าตาม attribute data-nui-* ที่อยู่ใกล้ที่สุด ดูคู่มือการปรับแต่ง