Main Content

uistyle

Create style for table or tree UI component

Description

example

s = uistyle creates an empty style for a table or tree UI component and returns the Style object. Use Style objects to create color and font styles for cells in table UI components or nodes in tree UI components. Use this syntax to create a style that you want to add properties to later.

example

s = uistyle(Name,Value) specifies Style property values by using one or more name-value arguments. For example, 'BackgroundColor','g' sets the background color to green.

Examples

collapse all

Change the background color for a table column by creating a style and applying it to the table.

Create a figure with a table UI component in it and populate the table with numeric data.

fig = uifigure;
fig.Position = [500 500 520 220];
uit = uitable(fig);
uit.Data = rand(5);
uit.Position = [20 30 480 135];

Table UI component with some random data.

Then, create a style with a specific background color and add the style to the second column of the table using the addStyle function.

s = uistyle('BackgroundColor','red');
addStyle(uit,s,'column',2)

Table UI component. The cells in the second column have a red background.

Create multiple styles and add them to different parts of a table UI component.

Create a figure with a table UI component in it and display numeric data in the table. Find the row and column subscripts for elements in the table with a value less than zero so you can style these cells later.

fig = uifigure;
fig.Position = [500 500 720 230];

uit = uitable(fig);
uit.Data = randi([-20,20],7);
uit.Position = [20 30 680 185];

[row,col] = find(uit.Data < 0);

Create two background color styles and one style that specifies font color and weight. Add a cyan background color to columns 1, 3, and 5. Emphasize the cells with negative values by making their font red and bold. Then, style rows 3 and 4 with a green background color. Finally, reuse the cyan background color style and add it to column 7. For cells where multiple styles of the same type are added, the style that is added last is the one that displays in the cell.

s1 = uistyle;
s1.BackgroundColor = 'cyan';
addStyle(uit,s1,'column',[1 3 5])

s2 = uistyle;
s2.FontColor = 'red';
s2.FontWeight = 'bold';
addStyle(uit,s2,'cell',[row,col])

s3 = uistyle;
s3.BackgroundColor = 'green';
addStyle(uit,s3,'row',[3 4])

addStyle(uit,s1,'column',7)

Table UI component with 7 columns and 7 rows. The negative-valued data is displayed in bold red text. Cells in rows 3 and 4 and between columns 1 and 6 are green. The remaining cells in columns 1, 3, and 5 are cyan. All of the cells in column 7 are cyan.

Style nodes in a tree that showcases a file structure to visually distinguish different file types.

Create a tree UI component. Each top-level node represents a folder. Each child node represents a file in that folder. Expand the tree to see all the nodes.

fig = uifigure('Position',[300 300 350 400]);
t = uitree(fig);

% Parent nodes
n1 = uitreenode(t,'Text','App 1');
n2 = uitreenode(t,'Text','App 2');
n3 = uitreenode(t,'Text','Images');

% Child nodes
n11 = uitreenode(n1,'Text','myapp1.m');
n21 = uitreenode(n2,'Text','myapp2.m');
n22 = uitreenode(n2,'Text','app2callback.m');
n31 = uitreenode(n3,'Text','peppers.png');
n32 = uitreenode(n3,'Text','corn.tif');

expand(t)

Tree with three top-level nodes with text "App 1", "App 2", and "Images", and nested nodes with file names.

Create three styles: one with a bold font weight, one with an italic font angle, and one with a blue font color.

dirStyle = uistyle('FontWeight','bold');
imgStyle = uistyle('FontAngle','italic');
mStyle = uistyle('FontColor','blue');

Apply the bold style to the top-level nodes to distinguish the nodes that represent folders. Apply the blue style to the children of the App 1 and App 2 nodes to distinguish the nodes that represent MATLAB® program files. Finally, apply the italic style to the nodes that represent image files.

addStyle(t,dirStyle,'level',1); 
addStyle(t,mStyle,'node',[n1.Children;n2.Children]);
addStyle(t,imgStyle,'node',[n31 n32]);

Tree UI component. The "App 1", "App 2", and "Images" nodes are bold, the nodes with file names that end in .m are blue, and the image file names are italic.

Add a single style to both a check box tree and a table UI component to create a cohesive app appearance.

Create a figure window, and then add a check box tree and a table in a grid layout manager. Populate both components with some sample data.

fig = uifigure('Position',[300 300 450 330]);
gl = uigridlayout(fig,[1 2]);
gl.ColumnWidth = {'1x','2x'};

tr = uitree(gl,'checkbox');
n1 = uitreenode(tr,'Text','Reptiles');
n11 = uitreenode(n1,'Text','Snake');
n12 = uitreenode(n1,'Text','Dinosaur');
n2 = uitreenode(tr,'Text','Amphibians');
n21 = uitreenode(n2,'Text','Turtle');
expand(tr)

tbl = uitable(gl,'Data',randi(100,[20 3]));

Figure with a check box tree and a table.

Create a style that specifies the font color, name, and weight. Apply this style to the entire tree and the entire table.

s = uistyle('FontColor',[0.1 0.5 0.06], ...
  'FontName','Calibri', ...
  'FontWeight','bold');
addStyle(tr,s)
addStyle(tbl,s)

Figure with a tree and a table. Both components use a bold, green Calibri font.

Input Arguments

collapse all

Name-Value Arguments

Specify optional comma-separated pairs of Name,Value arguments. Name is the argument name and Value is the corresponding value. Name must appear inside quotes. You can specify several name and value pair arguments in any order as Name1,Value1,...,NameN,ValueN.

Example: s = uistyle('BackgroundColor','blue')

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 NameShort NameRGB TripletHexadecimal Color CodeAppearance
'red''r'[1 0 0]'#FF0000'

Sample of the color red

'green''g'[0 1 0]'#00FF00'

Sample of the color green

'blue''b'[0 0 1]'#0000FF'

Sample of the color blue

'cyan' 'c'[0 1 1]'#00FFFF'

Sample of the color cyan

'magenta''m'[1 0 1]'#FF00FF'

Sample of the color magenta

'yellow''y'[1 1 0]'#FFFF00'

Sample of the color yellow

'black''k'[0 0 0]'#000000'

Sample of the color black

'white''w'[1 1 1]'#FFFFFF'

Sample of the color white

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

RGB TripletHexadecimal Color CodeAppearance
[0 0.4470 0.7410]'#0072BD'

Sample of RGB triplet [0 0.4470 0.7410], which appears as dark blue

[0.8500 0.3250 0.0980]'#D95319'

Sample of RGB triplet [0.8500 0.3250 0.0980], which appears as dark orange

[0.9290 0.6940 0.1250]'#EDB120'

Sample of RGB triplet [0.9290 0.6940 0.1250], which appears as dark yellow

[0.4940 0.1840 0.5560]'#7E2F8E'

Sample of RGB triplet [0.4940 0.1840 0.5560], which appears as dark purple

[0.4660 0.6740 0.1880]'#77AC30'

Sample of RGB triplet [0.4660 0.6740 0.1880], which appears as medium green

[0.3010 0.7450 0.9330]'#4DBEEE'

Sample of RGB triplet [0.3010 0.7450 0.9330], which appears as light blue

[0.6350 0.0780 0.1840]'#A2142F'

Sample of RGB triplet [0.6350 0.0780 0.1840], which appears as dark red

Font color, specified as an RGB triplet, a hexadecimal color code, or one of the 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 NameShort NameRGB TripletHexadecimal Color CodeAppearance
'red''r'[1 0 0]'#FF0000'

Sample of the color red

'green''g'[0 1 0]'#00FF00'

Sample of the color green

'blue''b'[0 0 1]'#0000FF'

Sample of the color blue

'cyan' 'c'[0 1 1]'#00FFFF'

Sample of the color cyan

'magenta''m'[1 0 1]'#FF00FF'

Sample of the color magenta

'yellow''y'[1 1 0]'#FFFF00'

Sample of the color yellow

'black''k'[0 0 0]'#000000'

Sample of the color black

'white''w'[1 1 1]'#FFFFFF'

Sample of the color white

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

RGB TripletHexadecimal Color CodeAppearance
[0 0.4470 0.7410]'#0072BD'

Sample of RGB triplet [0 0.4470 0.7410], which appears as dark blue

[0.8500 0.3250 0.0980]'#D95319'

Sample of RGB triplet [0.8500 0.3250 0.0980], which appears as dark orange

[0.9290 0.6940 0.1250]'#EDB120'

Sample of RGB triplet [0.9290 0.6940 0.1250], which appears as dark yellow

[0.4940 0.1840 0.5560]'#7E2F8E'

Sample of RGB triplet [0.4940 0.1840 0.5560], which appears as dark purple

[0.4660 0.6740 0.1880]'#77AC30'

Sample of RGB triplet [0.4660 0.6740 0.1880], which appears as medium green

[0.3010 0.7450 0.9330]'#4DBEEE'

Sample of RGB triplet [0.3010 0.7450 0.9330], which appears as light blue

[0.6350 0.0780 0.1840]'#A2142F'

Sample of RGB triplet [0.6350 0.0780 0.1840], which appears as dark red

Font weight, specified as one of these values:

  • 'normal' — Default weight as defined by the particular font

  • 'bold' — Thicker character outlines than 'normal'

Not all fonts have a bold font weight. For fonts that do not, specifying 'bold' results in the normal font weight.

Font angle, specified as 'normal' or 'italic'. Not all fonts have an italic font angle. For fonts that do not, specifying 'italic' results in the normal font angle.

Font name, specified as a system-supported font name. The default font depends on the specific operating system and locale.

If the specified font is not available, then MATLAB uses the best match among the fonts available on the system where the app is running.

Horizontal alignment of table cell text, specified as one of the values in the table.

ValueExample
'left'

'right'

'center'

If you add a Style object that specifies horizontal alignment to a table UI component, it takes precedence over the justifications associated with cell format values that you specify for the ColumnFormat property on the Table object. The ColumnFormat property still converts values as it normally would.

Note

If you add a Style object that specifies horizontal alignment to a tree UI component, the property has no effect on the tree appearance.

Algorithms

Style objects that you add to a UI component take visual precedence over properties that you set on the component object, no matter the order in which you created them. For example, in this code, the blue font color is displayed in the table even though red foreground color was set on the Table object last.

uit = uitable(uifigure,'Data',rand(100,10)); 

s = uistyle; 
s.FontColor = 'blue'; 
addStyle(uit,s); 

uit.ForegroundColor = 'red';

Introduced in R2019b