Create a slide toggle custom control
Version: 2023.2+
This example demonstrates how to create a “switch-like” variation of a toggle.
Example overview
The example creates a custom control: a toggle that users can flip with the mouse, the keyboard, a gamepad, and other devices. It comes with a label that can describe what the toggle represents.
You can find the completed files that this example creates in this GitHub repository.
先决条件
This guide is for developers familiar with the Unity Editor, UI Toolkit, and C# scripting. Before you start, get familiar with the following:
Create the slide toggle class
Create the slide toggle class with a C# script.
- Create a Unity project with the 3D template. A 3D template has a better visual effect for this example. However, you can use any template.
- Create a folder named
slide-toggleto store your files. - In the
slide-togglefolder, create a C# script namedSlideToggle.cs. - Open
SlideToggle.csin a text editor and replace its content with the following:
Style the slide toggle
Style the slide toggle with a USS file.
- In the
slide-togglefolder, create a USS file namedSlideToggle.uss. - Open
SlideToggle.ussin a text editor and replace its contents with the following:
Add a slide toggle to a UXML file with the UI Builder
- In the
slide-togglefolder, create a UI Document file namedSlideToggleUsage.uxml. - Open
SlideToggleUsage.uxmlin the UI Builder. - In the UI Builder, select Library > Project > MyUILibrary.
- Drag a SlideToggle into the Hierarchy window.
- In the Inspector, enter a label text for your toggle in the Label field.
- In the StyleSheets section, add
SlideToggle.ussas the existing USS. - Save and close the UI Builder.
Test the slide toggle
- In the SampleScene, create a UI Document GameObject.
- Select the UI Document, and drag
SlideToggleUsage.uxmlinto the Source Asset field in the Inspector. - Enter play mode. You can click on the toggle, press Enter, press Return, or press Space and get it to flip back and forth.