-
Notifications
You must be signed in to change notification settings - Fork 198
Button
The Button, like its uGUI counterpart, acts as a clickable control, usually containing text. The 'ButtonLayer' (default name) object hosts the uGUI Button component and the MaterialUI ButtonConfig component. The ButtonConfig component creates an InkblotsControl component at runtime and configures its settings to match that of the ButtonConfig.
Button examples:
Ink Blot Enabled - Does clicking the button create InkBlots?
Auto Ink Blot Size - If enabled, the Ink Blot Size will be set to the width (or height, if that is larger) of the button.
Ink Blot Size - The size of the InkBlots.
Ink Blot Speed - The speed of the InkBlots' animation.
Ink Blot Color - The color of the InkBlots. Note that the alpha level of this color is ingored.
Ink Blot Start Alpha - The alpha level of the InkBlots when first created.
Ink Blot End Alpha - The alpha level of the InkBlot when the initial animation has finished after creation, but before it has been released (on pointer up or exit button).
Highlight On Click - Does the button highlight upon pointer click? Note: Overrides current 'Button' component's transition options.
Highlight On Hover - Does the button highlight upon pointer hover? Note: Overrides current 'Button' component's transition options.
Shadows - The shadows attached to the button. Only applies to 'Raised' Buttons or buttons with shadows. Usually does not need to be changed.
Shadow Normal Size - The 'depth' of the button, or size of the shadows when not hovered/clicked. Only applies to 'Raised' Buttons or buttons with shadows.
Shadow Hover Size - The 'depth' of the Button, or size of the shadows when hovered/clicked. Only applies to 'Raised' Buttons or Buttons with shadows.
To change Button contents:
The contents of a button (Text, or an icon for Round Buttons) are located as a child of the 'Button Layer' (default name) component.
Auto-resizing the Button based on the Text contents:
It's fairly annoying to have to manually calculate and change the button's dimensions every time, so a 'Snap Button To Text' component is attached (by default) to the top-most object of the Button control. Simply press the 'Snap' button to snap the Button to its Text content. Custom padding around the button can be defined, but is set to the Material Design values by default.
Manually resizing the Button:
If you want to manually resize the button, simply edit the RectTransform's width and height values of the top-most object of the Button control. You can also use the drag handles in the Scene View. Then, the Button's contents (usually Text or icon) can be resized separately.