uipanel

Create panel container

Syntax

p = uipanel

p = uipanel(parent)

p = uipanel(___,Name,Value)

Description

p = uipanel creates a panel in the current figure and returns the Panel object. If there is no figure available, MATLAB^® calls the figure function to create one.

p = uipanel(parent) creates a panel in the specified parent container. The parent container can be a figure created with either the figure or uifigure function or a child container.

example

p = uipanel(___,Name,Value) specifies panel properties using one or more name-value arguments. Use this option with any of the input argument combinations in the previous syntaxes. Property values for panels vary slightly depending on whether the app is created with the figure or uifigure function.

example

Examples

collapse all

Create Panel

Open Live Script

Create a panel in a UI figure.

fig = uifigure;
p = uipanel(fig);

Figure contains an object of type uipanel.

Add UI Components to Panel

Open Live Script

Create a panel in a UI figure, and add a button to the panel.

fig = uifigure;
p = uipanel(fig);
btn = uibutton(p);

Figure contains an object of type uipanel.

Set and Access Panel Property Values

Open Live Script

Create a panel in a UI figure, and customize its appearance by specifying property values.

fig = uifigure;
p = uipanel(fig, ...
    "Title","Data", ...
    "BackgroundColor","white");

Figure contains an object of type uipanel.

Determine the panel location and size.

s = p.Position

s = 1×4

    20    20   260   221

Update the width and height of the panel by modifying the third and fourth elements of the panel Position property.

p.Position(3:4) = [150 380];

Figure contains an object of type uipanel.

Create Scrollable Panel

The Scrollable property enables scrolling within a panel that has components outside its borders. Scrolling is only possible when the panel is in a figure created with the uifigure function. App Designer uses this type of figure for creating apps.

Create a panel in a UI figure. Add six UI components to the panel. The first two components are not visible because they lie outside the upper border of the panel.

fig = uifigure;
p = uipanel(fig,"Position",[20 20 196 135]);
ef1 = uieditfield(p,"Text","Position",[11 165 140 22],"Value","First Name");
ef2 = uieditfield(p,"Text","Position",[11 140 140 22],"Value","Last Name");
ef3 = uieditfield(p,"Text","Position",[11 115 140 22],"Value","Address");
dd = uidropdown(p,"Position",[11 90 140 22],"Items",["Male","Female"]);
cb = uicheckbox(p,"Position",[11 65 140 22],"Text","Member");
btn = uibutton(p,"Position",[11 40 140 22],"Text","Send");

UI figure window with a panel with four UI components. Only one edit field is visible.

Enable scrolling in the panel by setting the Scrollable property to "on". By default, the scroll bar is scrolled to the top of the panel.

p.Scrollable = "on";

UI figure window with a scrollable panel. The panel has a scroll bar on its right. The bar is scrolled to the top, and all three edit fields are visible in the panel.

Input Arguments

collapse all

`parent` — Parent container
`Figure` object (default) | `Panel` object | `Tab` object | `ButtonGroup` object | `GridLayout` object

Parent container, specified as a figure created with either the figure or uifigure function, or a child container:

Panels, tabs, and button groups can be containers in either type of figure.
Grid layouts can be containers only in figures created with the uifigure function.

Name-Value Arguments

Specify optional pairs of arguments as Name1=Value1,...,NameN=ValueN, where Name is the argument name and Value is the corresponding value. Name-value arguments must appear after other arguments, but the order of the pairs does not matter.

Example: uipanel(Title="Options") specifies that the panel title is Options.

Before R2021a, use commas to separate each name and value, and enclose Name in quotes.

Example: uipanel("Title","Options") specifies that the panel title is Options.

Note

The properties listed here are a subset of the available properties. For the full list, see Panel.

`Title` — Title
character vector | string scalar | categorical array

Title, specified as a character vector, string scalar, or categorical array. If you specify this property as a categorical array, MATLAB displays only the first element in the array.

MATLAB does not interpret a vertical slash ('|') character as a line break, it displays as a vertical slash in the title.

If you want to specify a Unicode^® character, pass the Unicode decimal code to the char function. For example, ['Multiples of ' char(960)] displays as Multiples of π.

`BackgroundColor` — Background color
`[0.94 0.94 0.94]` (default) | RGB triplet | hexadecimal color code | `'r'` | `'g'` | `'b'` | ...

Background color, specified as an RGB triplet, a hexadecimal color code, or one of the color options listed in the table.

RGB triplets and hexadecimal color codes are useful for specifying custom colors.

An RGB triplet is a three-element row vector whose elements specify the intensities of the red, green, and blue components of the color. The intensities must be in the range [0,1]; for example,[0.4 0.6 0.7].
A hexadecimal color code is a character vector or a string scalar that starts with a hash symbol (#) followed by three or six hexadecimal digits, which can range from 0 to F. The values are not case sensitive. Thus, the color codes "#FF8800", "#ff8800", "#F80", and "#f80" are equivalent.

Alternatively, you can specify some common colors by name. This table lists the named color options, the equivalent RGB triplets, and hexadecimal color codes.

Color Name	Short Name	RGB Triplet	Hexadecimal Color Code
`"red"`	`"r"`	`[1 0 0]`	`"#FF0000"`
`"green"`	`"g"`	`[0 1 0]`	`"#00FF00"`
`"blue"`	`"b"`	`[0 0 1]`	`"#0000FF"`
`"cyan"`	`"c"`	`[0 1 1]`	`"#00FFFF"`
`"magenta"`	`"m"`	`[1 0 1]`	`"#FF00FF"`
`"yellow"`	`"y"`	`[1 1 0]`	`"#FFFF00"`
`"black"`	`"k"`	`[0 0 0]`	`"#000000"`
`"white"`	`"w"`	`[1 1 1]`	`"#FFFFFF"`

Here are the RGB triplets and hexadecimal color codes for the default colors MATLAB uses in many types of plots.

RGB Triplet	Hexadecimal Color Code	Appearance
`[0 0.4470 0.7410]`	`"#0072BD"`
`[0.8500 0.3250 0.0980]`	`"#D95319"`
`[0.9290 0.6940 0.1250]`	`"#EDB120"`
`[0.4940 0.1840 0.5560]`	`"#7E2F8E"`
`[0.4660 0.6740 0.1880]`	`"#77AC30"`
`[0.3010 0.7450 0.9330]`	`"#4DBEEE"`
`[0.6350 0.0780 0.1840]`	`"#A2142F"`

`Position` — Location and size of panel, including borders and title
`[left bottom width height]`

Location and size of the panel, including borders and title, specified as a four-element vector of the form [left bottom width height]. This table describes each element in the vector.

Element	Description
`left`	Distance from the inner left edge of the parent container to the outer left edge of the panel
`bottom`	Distance from the inner bottom edge of the parent container to the outer bottom edge of the panel
`width`	Distance between the right and left outer edges of the panel
`height`	Distance between the top and bottom outer edges of the panel

All measurements are in units specified by the Units property.

The Position values are relative to the drawable area of the parent container. The drawable area is the area inside the borders of the container and does not include the area occupied by decorations such as a menu bar or title.

Note

If the panel is parented to a grid layout manager, the value of the Position property is not immediately updated. To use the Position value to resize the panel children relative to the panel size, use a SizeChangedFcn callback.

`Units` — Units of measurement
`'pixels'` | `'normalized'` | `'inches'` | `'centimeters'` | `'points'` | `'characters'`

Units of measurement, specified as one of the values in this table.

Units Value	Description
`'pixels'` (default in `uifigure`-based apps)	Distances in pixels are independent of your system resolution on Windows^® and Macintosh systems: On Windows systems, a pixel is 1/96th of an inch. On Macintosh systems, a pixel is 1/72nd of an inch. On Linux^® systems, the size of a pixel is determined by your system resolution.
`'normalized'` (default in `figure`-based apps)	These units are normalized with respect to the parent container. The lower-left corner of the container maps to `(0,0)` and the upper-right corner maps to `(1,1)`.
`'inches'`	Inches.
`'centimeters'`	Centimeters.
`'points'`	Points. One point equals 1/72nd of an inch.
`'characters'`	These units are based on the default uicontrol font of the graphics root object: Character width = width of the letter `x`. Character height = distance between the baselines of two lines of text. To access the default uicontrol font, use `get(groot,'defaultuicontrolFontName')` or `set(groot,'defaultuicontrolFontName')`.

The recommended value is 'pixels', because most MATLAB app building functionality measures distances in pixels. You can create an object that rescales based on the size of the parent container by parenting the object to a grid layout manager created using the uigridlayout function. For more information, see Lay Out Apps Programmatically.

Tips

If you set the Visible property of a panel object to "off", then any child objects it contains (such as buttons, button groups, or axes) become invisible along with the parent panel. However, the Visible property value of each child object remains unaffected.

Version History

Introduced before R2006a

expand all

R2023a: Change panel border color using `BorderColor` property, not `HighlightColor`

You can change the border color of a panel in both uifigure-based and figure-based apps by using the BorderColor property.

The BorderColor property is recommended over the HighlightColor property, which is supported only in figure-based apps. However, there are no plans to remove support for HighlightColor.

R2022b: Change panel border width in `uifigure`-based apps

In apps created in App Designer and using the uifigure function, use the BorderWidth property to change the border width of the panel.

R2020b: Turn interaction off and on

To control whether a panel responds to user interaction, use the Enable property. When the Enable property is set to 'on', you can interact with the panel and with UI components within it as long as they are enabled. When the Enable property is set to 'off', you cannot interact with the panel or its content.

The Enable property is supported only for panels in App Designer and uifigure-based apps.

uipanel

Syntax

Description

Examples

Create Panel

Add UI Components to Panel

Set and Access Panel Property Values

Create Scrollable Panel

Input Arguments

`parent` — Parent container
`Figure` object (default) | `Panel` object | `Tab` object | `ButtonGroup` object | `GridLayout` object

Name-Value Arguments

`Title` — Title
character vector | string scalar | categorical array

`BackgroundColor` — Background color
`[0.94 0.94 0.94]` (default) | RGB triplet | hexadecimal color code | `'r'` | `'g'` | `'b'` | ...

`Position` — Location and size of panel, including borders and title
`[left bottom width height]`

`Units` — Units of measurement
`'pixels'` | `'normalized'` | `'inches'` | `'centimeters'` | `'points'` | `'characters'`

Tips

Version History

R2023a: Change panel border color using `BorderColor` property, not `HighlightColor`

R2022b: Change panel border width in `uifigure`-based apps

R2020b: Turn interaction off and on

See Also

Properties

uipanel

Syntax

Description

Examples

Create Panel

Add UI Components to Panel

Set and Access Panel Property Values

Create Scrollable Panel

Input Arguments

parent — Parent container Figure object (default) | Panel object | Tab object | ButtonGroup object | GridLayout object

Name-Value Arguments

Title — Title character vector | string scalar | categorical array

BackgroundColor — Background color [0.94 0.94 0.94] (default) | RGB triplet | hexadecimal color code | 'r' | 'g' | 'b' | ...

Position — Location and size of panel, including borders and title [left bottom width height]

Units — Units of measurement 'pixels' | 'normalized' | 'inches' | 'centimeters' | 'points' | 'characters'

Tips

Version History

R2023a: Change panel border color using BorderColor property, not HighlightColor

R2022b: Change panel border width in uifigure-based apps

R2020b: Turn interaction off and on

See Also

Properties

`parent` — Parent container
`Figure` object (default) | `Panel` object | `Tab` object | `ButtonGroup` object | `GridLayout` object

`Title` — Title
character vector | string scalar | categorical array

`BackgroundColor` — Background color
`[0.94 0.94 0.94]` (default) | RGB triplet | hexadecimal color code | `'r'` | `'g'` | `'b'` | ...

`Position` — Location and size of panel, including borders and title
`[left bottom width height]`

`Units` — Units of measurement
`'pixels'` | `'normalized'` | `'inches'` | `'centimeters'` | `'points'` | `'characters'`

R2023a: Change panel border color using `BorderColor` property, not `HighlightColor`

R2022b: Change panel border width in `uifigure`-based apps