3-slice control surface
SOURCE ASSET
Left cap
固定像素,不横向拉伸
Center
仅中段伸缩,承载文字
Right cap
保留边角和金属高光
Responsive reconstruction
CAP
STRETCHABLE FILL
CAP
+
创建预设
TextButton / IconButton
CSS + NINE-PATCH PRIMARY
ninepatch_resource.img
Implementation / CSS
原生渐变与描边 · 可编辑
Rest
+
创建角色
Hover
+
创建角色
Pressed
+
创建角色
Disabled
购买
Implementation / CSS Replica
CSS gradient + inner glow · primary
Rest
+
创建角色
Hover
+
创建角色
Pressed
+
创建角色
Disabled
购买
CSS / Tone family
derived states · hover / press interactive
Default · 4–7
确认
Green · 12–15
应用
Orange Red · 20–23
取消
Disabled · captured
确认
Corner Radius = 0
Shadow = None
Size = Compact · Default · Large
LeadingIcon = Boolean
Label = Text
Hover = Lighter 1 Tone
Pressed = Hover Tone + Y 1px