Main Content

本页的翻译已过时。点击此处可查看最新英文版本。

HTML 属性

控制 HTML UI 组件的外观和行为

借助 HTML UI 组件,您可以显示原始 HTML 文本,或将 HTML、JavaScript® 或 CSS 嵌入到您的 App 以及对接到第三方 JavaScript 库。HTML 属性控制着 HTML UI 组件的外观和行为。使用圆点表示法引用特定的对象和属性。

fig = uifigure;
h = uihtml(fig); 
h.Position = [100 100 150 100];
h.HTMLSource = '<p style="font-family:sans-serif">This is <mark>marked</mark> text.</p>';

HTML

全部展开

HTML 标记或文件,指定为字符向量或字符串标量,包含 HTML 标记或 HTML 文件的路径。所有 HTML 标记和文件必须采用正确格式。如果指定的字符向量或字符串标量以 .html 结尾,则它假定为 HTML 文件的路径。

在嵌入 HTML 标记时,您不需要指定 <html><body> 标签。如果使用 uifigure 函数创建的 MATLAB® 图窗所使用的 Chromium 浏览器支持您指定的标记,则它将会呈现。如果您的代码需要更多结构,则可以考虑改用 HTML 文件。

如果将 HTMLSource 属性设置为 HTML 文件的路径,该文件必须位于本地文件系统可以访问的位置。如果您正在使用支持文件,如 JavaScript、CSS、库或图像,请将这些文件放在本地文件系统可以访问的位置,在 HTML 文件中引用它们,并将 HTMLSource 属性设置为该 HTML 文件的路径。支持文件不能位于与 HTML 文件相邻或更上层的相对目录中。

示例: h = uihtml('HTMLSource','CustomCharts.html') 指定 HTML 文件。

示例: h = uihtml('HTMLSource','<p>This is <span style="color:red">red</span> text.</p>') 指定标记。

MATLAB 数据,指定为任何 MATLAB 数据类型。当 HTMLSource 的值是定义 JavaScript 对象的 HTML 文件的路径时,请使用此参数。然后,这些数据可以在 MATLAB HTML UI 组件和 JavaScript 对象之间同步。

要在 MATLAB 和您正在 App 中嵌入的第三方内容之间同步 Data 属性的值,请在一个 HTML 文件中创建一个 setup 函数,它将名为 htmlComponent 的 JavaScript 对象连接到 MATLAB 中的 HTML UI 组件。然后,将 HTMLSource 属性值设置为该文件的路径。

Data 属性值的更改只会单向触发回调事件。具体而言,

  • 当在 MATLAB 中设置 Data 属性时,htmlComponent JavaScript 对象的 Data 属性也会更新并触发 'DataChanged' 事件的 JavaScript 事件侦听程序。

  • 当在 JavaScript 中设置 htmlComponent.Data 时,MATLAB 中的 HTML UI 组件的 Data 属性也会更新并触发 DataChangedFcn 回调。

如果您有嵌套元胞数组、结构体数组或 MATLAB 表数组数据等数据,您可能需要有关数据如何在 MATLAB 和 JavaScript 之间转换的更多信息。当在 MATLAB 中设置 HTML UI 组件的 Data 属性时,数据将使用 jsonencode 函数进行转换,与 JavaScript 同步,使用 JSON.parse() 进行解析,最后设置为 htmlComponent JavaScript 对象的 Data 属性。通过 JSON.stringify()jsondecode 函数,也可以进行反向转换。Data 属性是唯一与 JavaScript 同步的属性。

有关它支持的数据类型的详细信息,请参考 jsonencode 函数。如果 jsonencode 函数不支持您的数据类型,请使用数据类型转换函数(如 num2str)将您的数据转换为支持的类型。然后,将其设置为 Data 属性的值。

有关如何编写支持数据同步的 HTML 文件以及 htmlComponent JavaScript 对象的属性的详细信息,请参阅Create HTML File That Can Trigger or Respond to Data Changes

交互性

全部展开

可见性状态,指定为 'on''off',或者指定为数值或逻辑值 1 (true) 或 0 (false)。值 'on' 等效于 true'off' 等效于 false。因此,您可以使用此属性的值作为逻辑值。该值存储为 matlab.lang.OnOffSwitchState 类型的 on/off 逻辑值。

  • 'on' - 显示对象。

  • 'off' - 隐藏对象而不删除它。您仍然可以访问不可见 UI 组件的属性。

要使您的 App 更快地启动,请将不需要在启动时出现的所有 UI 组件的 Visible 属性设置为 'off'

工具提示,指定为字符向量、字符向量元胞数组、字符串数组或一维分类数组。如果使用此属性,则在运行时当用户将指针悬停在组件上时,将显示消息。即使禁用组件,工具提示也会显示。要显示多行文本,请指定字符向量元胞数组或字符串数组。数组中的每个元素变为一行文本。如果将此属性指定为分类数组,MATLAB 将使用数组中的值,而不是完整的类别集。

上下文菜单,指定为使用 uicontextmenu 函数创建的 ContextMenu 对象。使用此属性可在您右键点击组件时显示上下文菜单。

注意

当设置了 HTMLSource 属性时,此属性不起作用。

位置

全部展开

HTML UI 组件相对于父容器的位置和大小,指定为 [left bottom width height] 形式的四元素向量。此表介绍该向量中的每个元素。

元素说明
left父容器的内部左边缘与 HTML UI 组件的外部左边缘之间的距离
bottom父容器的内部下边缘与 HTML UI 组件的外部下边缘之间的距离
widthHTML UI 组件的左右外部边缘之间的距离
heightHTML UI 组件的上下外部边缘之间的距离

Position 值相对于父容器的可绘制区域。可绘制区域是指容器边框内的区域,不包括装饰元素(如菜单栏或标题)所占的区域。

所有测量值都以像素为单位。

HTML UI 组件的内部位置和大小,指定为 [left bottom width height] 形式的四元素向量。所有测量值都以像素为单位。此属性值等同于 Position 属性值。

此属性为只读

HTML UI 组件的外部位置和大小,以 [left bottom width height] 形式的四元素向量形式返回。所有测量值都以像素为单位。此属性值等同于 Position 属性值。

布局选项,指定为 GridLayoutOptions 对象。此属性为网格布局容器的子级组件指定选项。如果组件不是网格布局容器的子级(例如,它是图窗或面板的子级),则此属性为空且不起作用。但是,如果组件是网格布局容器的子级,则可以通过在 GridLayoutOptions 对象上设置 RowColumn 属性,将组件放置在网格的所需行和列中。

例如,以下代码将一个 HTML UI 组件放置在其父网格的第三行第二列中。

g = uigridlayout([4 3]);
h = uihtml(g);
h.HTMLSource = '<body style="background-color:powderblue;"><p>Hello World!</p></body>';
h.Layout.Row = 3;
h.Layout.Column = 2;

要使 HTML UI 组件占据连续的行或列,请将 RowColumn 属性指定为二元素向量。例如,以下 HTML UI 组件占据第 2 到第 3 列。

h.Layout.Column = [2 3];

回调

全部展开

在数据更改时执行的回调,指定为下列值之一:

  • 函数句柄。

  • 第一个元素是函数句柄的元胞数组。元胞数组中的后续元素是传递到回调函数的参数。

  • 包含有效 MATLAB 表达式的字符向量(不推荐)。MATLAB 在基础工作区计算此表达式。

htmlComponent JavaScript 对象中的 Data 属性的值发生变化时,将更新 MATLAB HTML UI 组件的 Data 属性,并执行此回调。

此回调函数可以访问关于 JavaScript 对象中数据更改的特定信息。MATLAB 将 DataChangedData 对象中的信息作为第二个参数传递给回调函数。在 App 设计工具中,该参数名为 event。您可以使用圆点表示法查询 DataChangedData 对象属性。例如,event.PreviousData 返回上次更新或更改前 Data 的先前值。DataChangedData 对象不可用于指定为字符向量的回调函数。

下表列出了 DataChangedData 对象的属性。

属性说明
Data上次 DataChanged 事件产生的最新数据
PreviousData上次 DataChanged 事件前的数据
Source

执行回调的 MATLAB HTML UI 组件

EventName'DataChanged'

有关编写回调的详细信息,请参阅在 App 设计工具中编写回调

对象创建函数,指定为下列值之一:

  • 函数句柄。

  • 第一个元素是函数句柄的元胞数组。元胞数组中的后续元素是传递到回调函数的参数。

  • 包含有效 MATLAB 表达式的字符向量(不推荐)。MATLAB 在基础工作区计算此表达式。

有关将回调指定为函数句柄、元胞数组或字符向量的详细信息,请参阅在 App 设计工具中编写回调

此属性指定要在 MATLAB 创建对象时执行的回调函数。MATLAB 将在执行 CreateFcn 回调之前初始化所有属性值。如果不指定 CreateFcn 属性,则 MATLAB 执行默认的创建函数。

对现有组件设置 CreateFcn 属性没有任何作用。

如果将此属性指定为函数句柄或元胞数组,则可以使用回调函数的第一个参数访问正在创建的对象。否则,使用 gcbo 函数访问该对象。

对象删除函数,指定为下列值之一:

  • 函数句柄。

  • 第一个元素是函数句柄的元胞数组。元胞数组中的后续元素是传递到回调函数的参数。

  • 包含有效 MATLAB 表达式的字符向量(不推荐)。MATLAB 在基础工作区计算此表达式。

有关将回调指定为函数句柄、元胞数组或字符向量的详细信息,请参阅在 App 设计工具中编写回调

此属性指定在 MATLAB 删除对象时要执行的回调函数。MATLAB 在销毁对象的属性之前执行 DeleteFcn 回调。如果不指定 DeleteFcn 属性,则 MATLAB 执行默认的删除函数。

如果将此属性指定为函数句柄或元胞数组,则可以使用回调函数的第一个参数访问要删除的对象。否则,使用 gcbo 函数访问该对象。

回调执行控件

全部展开

回调中断,指定为 'on''off',或者指定为数值或逻辑值 1 (true) 或 0 (false)。值 'on' 等效于 true'off' 等效于 false。因此,您可以使用此属性的值作为逻辑值。该值存储为 matlab.lang.OnOffSwitchState 类型的 on/off 逻辑值。

此属性确定是否可以中断运行中回调。有以下两种回调状态要考虑:

  • 运行中回调是当前正在执行的回调。

  • 中断回调是试图中断运行中回调的回调。

每当 MATLAB 调用回调时,回调都会试图中断正在运行的回调(如果存在)。运行中回调所属对象的 Interruptible 属性决定着是否允许中断。

  • 'on' 允许其他回调中断对象的回调。中断发生在 MATLAB 处理队列的下一个位置,例如当存在 drawnowfigureuifiguregetframewaitforpause 命令时。

    • 如果运行中回调包含以上命令之一,则 MATLAB 将在该时刻停止执行回调并执行中断回调。当中断回调完成时,MATLAB 将恢复执行运行中回调。

    • 如果运行中回调不包含以上命令之一,则 MATLAB 执行完当前回调,不会出现任何中断。

  • 'off' 阻止所有中断尝试。由中断回调所属的对象的 BusyAction 属性决定是放弃该中断回调还是将其放入队列中。

注意

回调的中断和执行在以下情况下会有不同的表现:

  • 如果中断回调是 DeleteFcnCloseRequestFcnSizeChangedFcn 回调,则无论是否存在 Interruptible 属性值都会发生中断。

  • 如果运行中回调当前正在执行 waitfor 函数,则无论是否存在 Interruptible 属性值都会发生中断。

  • Timer 对象根据排定时间执行,而不管 Interruptible 属性值如何。

发生中断时,MATLAB 不保存属性状态或显示内容。例如,gcagcf 命令返回的对象可能会在另一个回调执行时发生改变。

回调排队,指定为 'queue''cancel'BusyAction 属性决定 MATLAB 如何处理中断回调的执行。有以下两种回调状态要考虑:

  • 运行中回调是当前正在执行的回调。

  • 中断回调是试图中断运行中回调的回调。

无论何时 MATLAB 调用回调,该回调都会试图中断运行中回调。运行中回调所属对象的 Interruptible 属性决定着是否允许中断。如果不允许中断,则中断回调所属对象的属性 BusyAction 将决定是放弃该回调还是将回调放入队列中。以下是 BusyAction 属性的可能值:

  • 'queue' - 将中断回调放入队列中,以便在运行中回调执行完毕后进行处理。

  • 'cancel' - 不执行中断回调。

此属性为只读

删除状态,以 matlab.lang.OnOffSwitchState 类型的 on/off 逻辑值形式返回。

DeleteFcn 回调开始执行时,MATLAB 会将 BeingDeleted 属性设置为 'on'BeingDeleted 属性将一直保持 'on' 设置状态,直到组件对象不再存在为止。

在查询或修改对象之前,请先检查其 BeingDeleted 属性的值,以确认它不是待删除项。

父级/子级

全部展开

父容器,指定为使用 uifigure 函数创建的 Figure 对象或其子容器之一:TabPanelButtonGroupGridLayout。如果未指定容器,MATLAB 将调用 uifigure 函数以创建一个新 Figure 对象来充当父容器。

对象句柄的可见性,指定为 'on''callback''off'

此属性控制对象在其父级的子级列表中的可见性。当对象未显示在其父级的子级列表中时,通过搜索对象层次结构或查询属性来获取对象的函数不会返回该对象。这些函数包括 getfindobjclfclose。对象即使在不可见时也有效。如果可以访问某个对象,则可以设置和获取其属性,并将其传递给针对对象进行运算的任意函数。

HandleVisibility 值说明
'on'对象始终可见。
'callback'对象对于回调或回调调用的函数可见,但对于命令行调用的函数不可见。此选项阻止通过命令行访问对象,但允许回调函数访问它。
'off'对象始终不可见。该选项用于防止另一函数无意中对 UI 进行更改。将 HandleVisibility 设置为 'off' 可在执行该函数时暂时隐藏对象。

标识符

全部展开

此属性为只读

图形对象的类型,以 'uihtml' 形式返回。

对象标识符,指定为字符向量或字符串标量。您可以指定唯一的 Tag 值作为对象的标识符。如果需要访问您代码中其他位置的对象,可以使用 findobj 函数基于 Tag 值搜索对象。

用户数据,指定为任何 MATLAB 数组。例如,您可以指定标量、向量、矩阵、元胞数组、字符数组、表或结构体。使用此属性存储对象上的任意数据。

如果您在 App 设计工具中工作,请在该 App 中创建公共或私有属性以共享数据,而不是使用 UserData 属性。有关详细信息,请参阅在用 App 设计工具创建的 App 内共享数据

在 R2019b 中推出