QG4/docs/en/qgc-dev-guide/user_interface_design/controls.md

# User Interface Controls

QGC provides a base set of controls for building user interface. In general they tend to be thin layers above the base QML Controls supported by Qt which respect the QGC color palette.

```
import QGroundControl.Controls 1.0
```

## Qt Controls

The following controls are QGC variants of standard Qt QML Controls. They provide the same functionality as the corresponding Qt controls except for the fact that they are drawn using the QGC palette.

- QGCButton
- QGCCheckBox
- QGCColoredImage
- QGCComboBox
- QGCFlickable
- QGCLabel
- QGCMovableItem
- QGCRadioButton
- QGCSlider
- QGCTextField

## QGC Controls

These custom controls are exclusive to QGC and are used to create standard UI elements.

- DropButton - RoundButton which drops out a panel of options when clicked. Example is Sync button in Plan view.
- ExclusiveGroupItem - Used as a base Item for custom controls which supports the QML ExclusiveGroup concept.
- QGCView - Base control for all top level views in the system. Provides support for FactPanels and displaying QGCViewDialogs and QGCViewMessages.
- QGCViewDialog - Dialog which pops out from the right side of a QGCView. You can specific the accept/reject buttons for the dialog as well as the dialog contents. Example usage is when you click on a parameter and it brings up the value editor dialog.
- QGCViewMessage - A simplified version of QGCViewDialog which allows you to specify buttons and a simple text message.
- QGCViewPanel - The main view contents inside of a QGCView.
- RoundButton - A round button control which uses an image as its inner contents.
- SetupPage - The base control for all Setup vehicle component pages. Provides a title, description and component page contents area.
User Guide and DevGuide source migration to Stable v4_3 (#10882) * User guide migration to QGC source * Add google analytics - but need [GA4] Find your Google tag ID * Update (most) notes to use vitepress note syntax * Convert remaining notes, tips, warnings * Prettier all the files * Lower case and compress all images * Lower case filenames * docs_deploy1 * Disable platform builds on commit to docs (only) * Test deployment script 1 (#10893) * docs_deploy1 * Disable platform builds on commit to docs (only) * docs_deploy2 * lower case waypoint file * Lower case console.jpg * Add duplicate index as fallback * Get path from process * fix upload * Disable running workflows for changes in the actions * Attempt update via github workflow * Attempt workflow update * A bit more deployment debugging * MOdify yaml to use personal access token * Lower case the support.md * Fix up pattern * Add UI design - ignored by github * Fix up plugins name * Fix up toolbar * Fix up the Support path * Fix up support link to go to the NEW target * Only build this on commit * Add docs stablev4 3 (#10894) * docs_deploy1 * Disable platform builds on commit to docs (only) * docs_deploy2 * lower case waypoint file * Lower case console.jpg * Add duplicate index as fallback * Get path from process * fix upload * Disable running workflows for changes in the actions * Attempt update via github workflow * Attempt workflow update * A bit more deployment debugging * MOdify yaml to use personal access token * Lower case the support.md * Fix up pattern * Add UI design - ignored by github * Fix up plugins name * Fix up toolbar * Fix up the Support path * Fix up support link to go to the NEW target * Only build this on commit * Remove unused files 1 year ago			`# User Interface Controls`

			`QGC provides a base set of controls for building user interface. In general they tend to be thin layers above the base QML Controls supported by Qt which respect the QGC color palette.`

			```
			`import QGroundControl.Controls 1.0`
			```

			`## Qt Controls`

			`The following controls are QGC variants of standard Qt QML Controls. They provide the same functionality as the corresponding Qt controls except for the fact that they are drawn using the QGC palette.`

			`- QGCButton`
			`- QGCCheckBox`
			`- QGCColoredImage`
			`- QGCComboBox`
			`- QGCFlickable`
			`- QGCLabel`
			`- QGCMovableItem`
			`- QGCRadioButton`
			`- QGCSlider`
			`- QGCTextField`

			`## QGC Controls`

			`These custom controls are exclusive to QGC and are used to create standard UI elements.`

			`- DropButton - RoundButton which drops out a panel of options when clicked. Example is Sync button in Plan view.`
			`- ExclusiveGroupItem - Used as a base Item for custom controls which supports the QML ExclusiveGroup concept.`
			`- QGCView - Base control for all top level views in the system. Provides support for FactPanels and displaying QGCViewDialogs and QGCViewMessages.`
			`- QGCViewDialog - Dialog which pops out from the right side of a QGCView. You can specific the accept/reject buttons for the dialog as well as the dialog contents. Example usage is when you click on a parameter and it brings up the value editor dialog.`
			`- QGCViewMessage - A simplified version of QGCViewDialog which allows you to specify buttons and a simple text message.`
			`- QGCViewPanel - The main view contents inside of a QGCView.`
			`- RoundButton - A round button control which uses an image as its inner contents.`
			`- SetupPage - The base control for all Setup vehicle component pages. Provides a title, description and component page contents area.`