Main Content

Style 属性

表或树 UI 组件的样式

自 R2019b 起

使用 Style 对象为表 UI 组件中的单元格或树 UI 组件中的节点创建可视样式。该组件必须以使用 uifigure 创建的图窗或其子容器之一为父级。您可以使用 uistyle 函数创建 Style 对象,指定其属性,然后使用 addStyle 函数将其应用于组件。您可以使用 removeStyle 函数从组件中删除样式。

添加到 UI 组件的 Style 对象在视觉效果上优先于您为组件对象设置的属性,无论您创建它们的顺序如何。例如,在以下代码中,表中显示蓝色字体颜色,即使最后对 Table 对象设置红色前景颜色。

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

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

uit.ForegroundColor = 'red';
Table UI component with blue font color

颜色

全部展开

背景颜色,指定为 RGB 三元组、十六进制颜色代码或下表中列出的颜色选项之一。

RGB 三元组和十六进制颜色代码对于指定自定义颜色非常有用。

  • RGB 三元组是包含三个元素的行向量,其元素分别指定颜色中红、绿、蓝分量的强度。强度值必须位于 [0,1] 范围内,例如 [0.4 0.6 0.7]

  • 十六进制颜色代码是字符向量或字符串标量,以井号 (#) 开头,后跟三个或六个十六进制数字,范围可以是 0F。这些值不区分大小写。因此,颜色代码 "#FF8800""#ff8800""#F80""#f80" 是等效的。

此外,还可以按名称指定一些常见的颜色。下表列出了命名颜色选项、等效 RGB 三元组和十六进制颜色代码。

颜色名称短名称RGB 三元组十六进制颜色代码外观
"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

以下是 MATLAB® 在许多类型的绘图中使用的默认颜色的 RGB 三元组和十六进制颜色代码。

RGB 三元组十六进制颜色代码外观
[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

字体颜色,指定为 RGB 三元组、十六进制颜色代码或下表中列出的选项之一。

RGB 三元组和十六进制颜色代码对于指定自定义颜色非常有用。

  • RGB 三元组是包含三个元素的行向量,其元素分别指定颜色中红、绿、蓝分量的强度。强度值必须位于 [0,1] 范围内,例如 [0.4 0.6 0.7]

  • 十六进制颜色代码是字符向量或字符串标量,以井号 (#) 开头,后跟三个或六个十六进制数字,范围可以是 0F。这些值不区分大小写。因此,颜色代码 "#FF8800""#ff8800""#F80""#f80" 是等效的。

此外,还可以按名称指定一些常见的颜色。下表列出了命名颜色选项、等效 RGB 三元组和十六进制颜色代码。

颜色名称短名称RGB 三元组十六进制颜色代码外观
"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

以下是 MATLAB 在许多类型的绘图中使用的默认颜色的 RGB 三元组和十六进制颜色代码。

RGB 三元组十六进制颜色代码外观
[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

文本

全部展开

字体名称,指定为系统支持的一种字体名称。默认字体取决于具体操作系统和区域设置。

如果指定的字体不可用,MATLAB 将使用运行 App 的系统上的可用字体中的最佳匹配项。

字体粗细,指定为下列值之一:

  • 'normal' - 特定字体定义的默认粗细

  • 'bold' - 字符轮廓比 'normal'

并非所有字体都有加粗字体。对于非加粗字体,指定 'bold' 会得到普通字体。

字体角度,指定为 'normal''italic'。并非所有字体都有倾斜字体角度。对于无斜体字体,指定 'italic' 后会使用常规字体角度。

表单元格文本的水平对齐方式,指定为下表中的值之一。

示例
'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

如果您将指定水平对齐的 Style 对象添加到表 UI 组件,它将优先于您为 Table 对象上的 ColumnFormat 属性指定的单元格格式值相关联的对齐方式。ColumnFormat 属性仍然像通常一样转换值。

注意

如果向树 UI 组件添加用于指定水平对齐的 Style 对象,HorizontalAlignment 值对组件外观不起作用。

裁剪长文本的一侧,指定为下表中的值之一。

示例
'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.

注意

如果将指定水平裁剪的 Style 对象添加到树的节点子集或者列表框或下拉 UI 组件的项目子集,则 HorizontalClipping 值对组件外观不起作用。您仍可以将样式添加到整个树、列表框或下拉 UI 组件。

文本解释器,指定为:

  • 'none' - 显示字面字符。

  • 'tex' - 使用 TeX 标记的子集解释文本。

  • 'latex' - 使用 LaTeX 标记子集解释文本。

  • 'html' - 使用 HTML 标记子集解释文本。

TeX 标记

使用 TeX 标记添加上标和下标,并在文本中包含特殊字符。

修饰符会一直作用到文本结尾,但上标和下标除外,因为它们仅修饰下一个字符或花括号中的字符。当您将解释器设置为 'tex' 时,支持的修饰符如下所示。

修饰符描述示例
^{ }上标'text^{superscript}'
_{ }下标'text_{subscript}'
\bf粗体'\bf text'
\it斜体'\it text'
\sl伪斜体(通常与斜体相同)'\sl text'
\rm常规字体'\rm text'
\fontname{specifier}字体名称 - 将 specifier 替换为字体系列的名称。您可以将此说明符与其他修饰符结合使用。'\fontname{Courier} text'
\fontsize{specifier}字体大小 - 将 specifier 替换为以磅为单位的数值标量值。'\fontsize{15} text'
\color{specifier}字体颜色 - 将 specifier 替换为以下颜色之一:redgreenyellowmagentablueblackwhitegraydarkGreenorangelightBlue'\color{magenta} text'
\color[rgb]{specifier}自定义字体颜色 - 将 specifier 替换为三元素 RGB 三元组。'\color[rgb]{0,0.5,0.5} text'

下表列出了 'tex' 解释器所支持的特殊字符。

字符序列符号字符序列符号字符序列符号

\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 标记

要使用 LaTeX 标记,请将解释器设置为 'latex'。使用 LaTeX 标记来格式化和显示数学表达式、方程和特殊字符。使用美元符号将标记的文本括起来。例如,对于行内模式,使用 '$\int_1^{20} x^2 dx$',对于显示模式,使用 '$$\int_1^{20} x^2 dx$$'

显示的文本将使用默认的 LaTeX 字体样式。FontNameFontWeightFontAngle 标签属性不起任何作用。要更改字体样式,请使用 LaTeX 标记。

MATLAB 支持大多数标准 LaTeX 数学模式命令。有关详细信息,请参阅支持的 LaTeX 命令

HTML 标记

要使用 HTML 标记,请将解释器设置为 'html'。通过 HTML 设置字体样式会覆盖任何等效的 Style 字体属性。例如,以下代码将生成红色文本。

fig = uifigure;
s1 = uistyle("Interpreter","html");
s2 = uistyle("FontColor","blue");

t = uitable(fig);
t.Data = ["<p style='color: red;'>Cell 1</p>"; "<p style='color: red;'>Cell 2</p>"];
addStyle(t,s1)
addStyle(t,s2)

解释器支持部分 HTML 标记。一般情况下,解释器支持与文本相关的标记和样式。不支持的标记和样式将被忽略。

下表列出了支持的元素和元素属性。

HTML 元素属性描述
astyle, target, href, title超链接
abbrstyle, title缩写
addressstyle联系信息
articlestyle自包含的独立内容
asidestyle与主要内容间接相关的内容
bstyle粗体文本
bdistyle, dir格式与周围文本方向不同的内容
bdostyle, dir格式与周围文本方向不同的内容
bigstyle比周围文本大一个字体大小级别的文本(在 HTML5 中已弃用)
blockquotestyle, cite扩展引用
br不适用换行符
captionstyle表标题
centerstyle水平居中的内容
citestyle创造性工作的标题
codestyle代码片段
colstyle, align, valign, span, width表中的列
colgroupstyle, align, valign, span, width表中的一组列
ddstyle描述列表中的项或值
delstyle, datetime从文档中删除的文本
detailsstyle, open文本仅在切换到 'open' 状态时才可见的交互式小组件
dlstyle描述列表
dtstyle描述列表中的项或值
emstyle强调的文本(通常以粗体显示)
fontstyle, color, size, face具有指定字体属性的文本(在 HTML5 中弃用)
footerstyle页脚
h1. h2, h3, h4, h5, h6style节标题 - <h1> 是最高级别的标题,<h6> 是最低级别的标题
headerstyle介绍性内容
hrstyle主题换行
istyle偏离周围内容的文本 - 默认以粗体方式呈现
insstyle, datetime插入文档中的文本
listyle列表中的项
markstyle标记或突出显示的文本
olstyle有序列表
pstyle段落
prestyle预设格式的文本
sstyle带删除线的文本
strikestyle带删除线的文本(在 HTML5 中弃用)
sectionstyle独立节
smallstyle比周围文本小一个字体大小级别的文本(在 HTML5 中弃用)
substyle下标
supstyle上标
strongstyle非常重要的文本
tablestyle, width, border, align, valign
tbodystyle, align, valign表正文
tdstyle, width, rowspan, colspan, align, valign表数据单元格
tfootstyle, align, valign汇总表列的表行组
thstyle, width, rowspan, colspan, align, valign表数据单元格,指定为一组单元格的标题
theadstyle, align, valign指定列标题的表行组
trstyle, rowspan, align, valign表单元格行
ttstyle等宽文本(在 HTML5 中弃用)
ustyle具有模糊注解的文本 - 默认带下划线显示
ulstyle无序列表

有关这些元素的详细信息,请参阅 https://developer.mozilla.org/en-US/docs/Web/HTML/Element

要使用 HTML 标记创建运行 MATLAB 代码的超链接,请参阅创建运行函数的超链接

您可以使用 HTML 样式属性来格式化 HTML 内容。样式属性是一串 CSS 属性及其值。

支持下列 CSS 属性:

  • 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

有关这些属性的详细信息,请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

图标

全部展开

预定义或自定义图标,指定为字符向量、字符串标量或真彩色图像数组。

预定义图标

下表列出了用于指定预定义图标的值。

图标
'question'

Question icon

'info'

Info icon

'success'

Success icon

'warning'

Warning icon

'error'

Error icon

'none'不显示任何图标。

自定义图标

可将自定义图标指定为下列值之一:

  • 字符向量或字符串标量,指定 MATLAB 路径中的 SVG、JPEG、GIF 或 PNG 图像的文件名。也可以指定图像文件的完整路径。

  • 真彩色图像数组。有关详细信息,请参阅 图像类型

表单元格图标的对齐方式,指定为下表中的值之一。表中的示例显示为 HorizontalAlignment 样式为 'center' 的表 UI 组件指定每个 IconAlignment 值的结果。

描述示例
'left'图标直接显示在文本的左侧。

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

'right'图标直接显示在文本的右侧。

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

'center'图标显示在单元格的中心,位于文本的后面。

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

'leftmargin'

无论文本位置如何,图标都显示在单元格的最左侧。

HorizontalAlignment 的值为 'left' 时,此值等效于 'left'

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

'rightmargin'

无论文本位置如何,图标都显示在单元格的最右侧。

HorizontalAlignment 的值为 'right' 时,此值等效于 'right'

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

注意

如果向树 UI 组件添加用于指定图标对齐的 Style 对象,该属性对树的外观不起作用。

版本历史记录

在 R2019b 中推出

全部展开