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, uistyle("BackgroundColor","g") creates a style with a background color of green.

Examples

collapse all

Change the background color of the cells in 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 some sample table data that lists paths to files and their load status.

DataFiles = ["C:/Documents/MyProject/MyData/file1.mat"; ...
    "C:/Documents/MyProject/MyData/file2.mat"; ...
    "C:/Documents/MyProject/MyData/file3.mat"];
LoadStatus = ["Success";"Success";"Failure"];
T = table(DataFiles,LoadStatus);

Display the table data in a table UI component in a UI figure.

fig = uifigure("Position",[500 500 400 350]);
t = uitable(fig,"Data",T,"ColumnWidth",{'2x','1x'});

Create three styles: one that specifies that long text is clipped on the left, one with an icon to indicate success, and one with an icon to indicate an error. The two icon styles additionally specify that the icon is aligned at the far right margin of the table cell.

sClip = uistyle("HorizontalClipping","left");
sPass = uistyle("Icon","success","IconAlignment","rightmargin");
sFail = uistyle("Icon","error","IconAlignment","rightmargin");

Apply the three styles to different parts of the table UI component. Apply the first style to the first column so that the sample file names are visible, and apply the second and third styles to cells in the second column to provide a visual indication of the file load status.

addStyle(t,sClip,"column",1)
addStyle(t,sPass,"cell",[1 2;2 2])
addStyle(t,sFail,"cell",[3 2])

Table UI component with columns "DataFiles" and "LoadStatus". The text in the DataFiles column is clipped on the left with an ellipsis. Each cell in the LoadStatus column has an icon indicating the status at the far right margin of the cell.

Create a tree UI component in a UI figure. Add tree nodes that display equations of two types of polar plots. Use LaTeX markup to specify the tree node text. Then, expand all nodes in the tree.

fig = uifigure("Position",[500 500 300 350]);
tr = uitree(fig,"Position",[10 10 200 250]);
n1 = uitreenode(tr,Text="Circles");
n2 = uitreenode(tr,Text="Rose Curves");
n11 = uitreenode(n1,Text="$$r=a\cos(\theta)$$");
n12 = uitreenode(n1,Text="$$r=a\sin(\theta)$$");
n21 = uitreenode(n2,Text="$$r=a\cos(n\theta)$$");
n22 = uitreenode(n2,Text="$$r=a\sin(n\theta)$$");

expand(tr)

Create a style that specifies that text is interpreted as LaTeX markup. Apply this style to all nodes in the tree that are children of a top-level node.

s = uistyle("Interpreter","latex");
addStyle(tr,s,"level",2);

Tree UI component with top-level nodes with text "Circles" and "Rose Curves". Each top-level node has two child nodes whose text is a formatted polar equation.

Create some sample table data with pages in the MATLAB® documentation. For each page, specify a link to the page and some runnable MATLAB code using HTML markup.

Page = ["<a href='https://www.mathworks.com/help/matlab/gui-development.html'>App Building</a>"; ...
    "<a href='https://www.mathworks.com/help/matlab/graphics.html'>Graphics</a>"; ...
    "<a href='https://www.mathworks.com/help/matlab/mathematics.html'>Mathematics</a>"];
Example = ["<a href='matlab:uibutton'>Run Code</a>";
    "<a href='matlab:plot(1:10)'>Run Code</a>";
    "<a href='matlab:disp(pi)'>Run Code</a>"];
T = table(Page,Example);

Display the table data in a table UI component in a UI figure.

fig = uifigure("Position",[500 500 350 350]);
tbl = uitable(fig,"Data",T);

Create a style that specifies that text is interpreted as HTML markup. Apply this style to the entire UI table.

s = uistyle("Interpreter","html");
addStyle(tbl,s);

Table UI component with columns "Page" and "Example". The Page column contains formatted links to a MATLAB documentation page, and the Example column contains formatted links with text "Run Code" that execute a MATLAB command when clicked.

Click the links in the Page column to open the documentation in a web browser. Click the links in the Examples column to run the example code in MATLAB.

For more information about creating links that execute commands, see Create Hyperlinks that Run Functions.

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");

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 an icon.

dirStyle = uistyle("FontWeight","bold");
mStyle = uistyle("FontAngle","italic");
imgStyle = uistyle("Icon","peppers.png");

Apply the bold style to the top-level nodes to distinguish the nodes that represent folders. Apply the italic style to the children of the App 1 and App 2 nodes to distinguish the nodes that represent MATLAB program files. Finally, apply the icon style to the node that represents an image file to show a preview of the image.

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

Tree UI component. The "App 1", "App 2", and "Images" nodes are bold, the nodes with file names that end in .m are italic, and the image file name has an icon of the image to its left.

Input Arguments

collapse all

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: s = uistyle(BackgroundColor='blue')

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

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'

Table cell with text aligned with the left cell border

'right'

Table cell with text aligned with the right cell border

'center'

Table cell with text centered in the cell

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.

Side on which long text is clipped, specified as one of the values in the table.

ValueExample
'left'

Table cell with long text. The text is cut off on the left with an ellipsis.

'right'

Table cell with long text. The text is cut off on the right with an ellipsis.

Note

If you add a Style object that specifies horizontal clipping to a node or level of a tree UI component, the property has no effect on the tree appearance.

Predefined or custom icon, specified as a character vector, string scalar, or truecolor image array.

Predefined Icon

This table lists the values to specify the predefined icons.

ValueIcon
'question'

Question icon

'info'

Info icon

'success'

Success icon

'warning'

Warning icon

'error'

Error icon

'none'No icon displays.

Custom Icon

Specify a custom icon as one of these values:

  • A character vector or string scalar that specifies the file name of an SVG, JPEG, GIF, or PNG image that is on the MATLAB path. Alternatively, you can specify a full path to the image file.

  • A truecolor image array. See Image Types for more information.

Alignment of table cell icon, specified as one of the values in the table. The examples in the table show the result of specifying each IconAlignment value for a table UI component with a HorizontalAlignment style of 'center'.

ValueDescriptionExample
'left'The icon is displayed directly to the left of the text.

Table cell with centered text and a green check mark icon directly to the left of the text

'right'The icon is displayed directly to the right of the text.

Table cell with centered text and a green check mark icon directly to the right of the text

'center'The icon is displayed in the center of the cell, behind the text.

Table cell with centered text and a green check mark icon centered behind the text

'leftmargin'

The icon is displayed on the far left of the cell, regardless of the text position.

This value is equivalent to 'left' when the value of HorizontalAlignment is 'left'.

Table cell with centered text and a green check mark icon on the far left side of the cell

'rightmargin'

The icon is displayed on the far right of the cell, regardless of the text position.

This value is equivalent to 'right' when the value of HorizontalAlignment is 'right'.

Table cell with centered text and a green check mark icon on the far right side of the cell

Note

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

Text interpreter, specified as:

  • 'none' — Display literal characters.

  • 'tex'— Interpret text using a subset of TeX markup.

  • 'latex'— Interpret text using a subset of LaTeX markup.

  • 'html'— Interpret text using a subset of HTML markup.

TeX Markup

Use TeX markup to add superscripts and subscripts and to include special characters in the text.

Modifiers remain in effect until the end of the text. Superscripts and subscripts are an exception because they modify only the next character or the characters within the curly braces. When you set the interpreter to 'tex', the supported modifiers are as follows.

ModifierDescriptionExample
^{ }Superscript'text^{superscript}'
_{ }Subscript'text_{subscript}'
\bfBold font'\bf text'
\itItalic font'\it text'
\slOblique font (usually the same as italic font)'\sl text'
\rmNormal font'\rm text'
\fontname{specifier}Font name — Replace specifier with the name of a font family. You can use this in combination with other modifiers.'\fontname{Courier} text'
\fontsize{specifier}Font size —Replace specifier with a numeric scalar value in point units.'\fontsize{15} text'
\color{specifier}Font color — Replace specifier with one of these colors: red, green, yellow, magenta, blue, black, white, gray, darkGreen, orange, or lightBlue.'\color{magenta} text'
\color[rgb]{specifier}Custom font color — Replace specifier with a three-element RGB triplet.'\color[rgb]{0,0.5,0.5} text'

This table lists the supported special characters for the 'tex' interpreter.

Character SequenceSymbolCharacter SequenceSymbolCharacter SequenceSymbol

\alpha

α

\upsilon

υ

\sim

~

\angle

\phi

ϕ

\leq

\ast

*

\chi

χ

\infty

\beta

β

\psi

ψ

\clubsuit

\gamma

γ

\omega

ω

\diamondsuit

\delta

δ

\Gamma

Γ

\heartsuit

\epsilon

ϵ

\Delta

Δ

\spadesuit

\zeta

ζ

\Theta

Θ

\leftrightarrow

\eta

η

\Lambda

Λ

\leftarrow

\theta

θ

\Xi

Ξ

\Leftarrow

\vartheta

ϑ

\Pi

Π

\uparrow

\iota

ι

\Sigma

Σ

\rightarrow

\kappa

κ

\Upsilon

ϒ

\Rightarrow

\lambda

λ

\Phi

Φ

\downarrow

\mu

µ

\Psi

Ψ

\circ

º

\nu

ν

\Omega

Ω

\pm

±

\xi

ξ

\forall

\geq

\pi

π

\exists

\propto

\rho

ρ

\ni

\partial

\sigma

σ

\cong

\bullet

\varsigma

ς

\approx

\div

÷

\tau

τ

\Re

\neq

\equiv

\oplus

\aleph

\Im

\cup

\wp

\otimes

\subseteq

\oslash

\cap

\in

\supseteq

\supset

\lceil

\subset

\int

\cdot

·

\o

ο

\rfloor

\neg

¬

\nabla

\lfloor

\times

x

\ldots

...

\perp

\surd

\prime

´

\wedge

\varpi

ϖ

\0

\rceil

\rangle

\mid

|

\vee

\langle

\copyright

©

LaTeX Markup

To use LaTeX markup, set the interpreter to 'latex'. Use LaTeX markup to format and display mathematical expressions, equations, and special characters. Use dollar symbols around the marked up text. For example, use '$\int_1^{20} x^2 dx$' for inline mode or '$$\int_1^{20} x^2 dx$$' for display mode.

The displayed text uses the default LaTeX font style. The FontName, FontWeight, and FontAngle label properties do not have an effect. To change the font style, use LaTeX markup.

MATLAB supports most standard LaTeX math mode commands. For more information, see Supported LaTeX Commands.

HTML Markup

To use HTML markup, set the interpreter to 'html'. Setting font styles via HTML overrides any equivalent Label font properties. For example, the following code results in red text.

lbl = uilabel('Interpreter','html');
lbl.Text = '<p style="color: red;">Text</p>');
lbl.FontColor = 'blue';

The interpreter supports a subset of HTML markup. As a general guideline, the interpreter supports text-related tags and styles. Unsupported tags and styles are ignored.

This table lists the supported elements and element attributes.

HTML ElementAttributesDescription
astyle, target, href, titleHyperlink
abbrstyle, titleAbbreviation or acronym
addressstyleContact information
articlestyleSelf-contained, independent content
asidestyleContent indirectly related to the main content
bstyleBold text
bdistyle, dirContent formatted in a different direction from surrounding text
bdostyle, dirContent formatted in a different direction from surrounding text
bigstyleText one font size level larger than surrounding text (obsolete in HTML5)
blockquotestyle, citeExtended quotation
brn/aLine break
captionstyleCaption or title of a table
centerstyleContent centered horizontally
citestyleTitle of a creative work
codestyleFragment of code
colstyle, align, valign, span, widthColumn within a table
colgroupstyle, align, valign, span, widthGroup of columns within a table
ddstyleTerm or value in a description list
delstyle, datetimeText that was deleted from a document
detailsstyle, openInteractive widget with text visible only when toggled to 'open' state
dlstyleDescription list
dtstyleTerm or value in a description list
emstyleEmphasized text (typically displayed in italic)
fontstyle, color, size, faceText with specified font properties (obsolete in HTML5)
footerstyleFooter
h1. h2, h3, h4, h5, h6styleSection heading — <h1> is the highest level of heading and <h6> is the lowest
headerstyleIntroductory content
hrstyleThematic break
istyleText offset from the surrounding content — by default rendered as italic
insstyle, datetimeText inserted into a document
listyleItem in a list
markstyleMarked or highlighted text
olstyleOrdered list
pstyleParagraph
prestylePreformatted text
sstyleText with a strikethrough
strikestyleText with a strikethrough (obsolete in HTML5)
sectionstyleStandalone section
smallstyleText one font size level smaller than surrounding text (obsolete in HTML5)
substyleSubscript
supstyleSuperscript
strongstyleText with strong importance
tablestyle, width, border, align, valignTable
tbodystyle, align, valignTable body
tdstyle, width, rowspan, colspan, align, valignTable data cell
tfootstyle, align, valignSet of table rows that summarize the table columns
thstyle, width, rowspan, colspan, align, valignTable data cell specified as a header of a group of cells
theadstyle, align, valignSet of table rows that specify the column heads
trstyle, rowspan, align, valignRow of table cells
ttstyleMonospace text (obsolete in HTML5)
ustyleText with an unarticulated annotation — by default rendered as an underline
ulstyleUnordered list

For more information about these elements, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element.

You can use HTML style attributes to format HTML content. A style attribute is a string of CSS attributes and their values.

These CSS attributes are supported:

  • background-color

  • border-bottom

  • border-bottom-color

  • border-bottom-left-radius

  • border-bottom-right-radius

  • border-bottom-style

  • border-bottom-width

  • border-left

  • border-left-color

  • border-left-style

  • border-left-width

  • border-radius

  • border-right

  • border-right-color

  • border-right-style

  • border-right-width

  • border-spacing

  • border-style

  • border-top

  • border-top-color

  • border-top-left-radius

  • border-top-right-radius

  • border-top-style

  • border-top-width

  • border-width

  • color

  • direction

  • font-family

  • font-size

  • font-style

  • font-weight

  • height

  • hidden

  • line-height

  • margin

  • margin-bottom

  • margin-left

  • margin-right

  • margin-top

  • max-height

  • max-width

  • min-height

  • min-width

  • overflow

  • overflow-wrap

  • overflow-x

  • overflow-y

  • padding

  • padding-bottom

  • padding-left

  • padding-right

  • padding-top

  • text-align

  • text-anchor

  • text-decoration

  • text-indent

  • text-overflow

  • text-shadow

  • text-transform

  • title

  • translate

  • white-space

  • width

For more information about these attributes, see https://developer.mozilla.org/en-US/docs/Web/CSS/Reference.

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';

Table UI component with blue text

Version History

Introduced in R2019b

expand all