跳到主要内容

构建ribbon菜单类型的应用窗口

Ribbon菜单是一种用户界面设计模式，通过将功能分组并以标签页的形式展示，提供了直观的操作体验。当应用程序具有大量功能时，Ribbon菜单可以通过分组和分类使功能更加有条理，避免传统下拉菜单过于杂乱。

这个示例介绍了如何创建功能丰富的Ribbon菜单页。通常，一个Ribbon 菜单页由多个Ribbon Panel组成，每个Panel代表不同的功能组或类别。一个应用程序中可以包含多个Ribbon 菜单页，一般在Ribbon栏顶部切换显示不同的菜单。

引入WUI的Component模块​

Component模块具备Ribbon Page功能，Framework模块具备Ribbon Window功能，因此您需要将这两个模块引入到您的应用程序中。

import { Orientation, ToggleButton, Button, ComboBox, TableWidget } from 'wui.basic';
import { RibbonPanel, RibbonPage } from 'wui.component';
import { RibbonWindow } from 'wui.framework';
import "./theme";

下面我们按照颗粒度从小到大的顺序，依次创建Ribbon Panel、Ribbon Page、Ribbon Bar、Ribbon Window。

Ribbon Panel​

Ribbon Panel中允许包含各种类型的控件，比如button, combobox, label, textedit等。下面我们从创建一个名为File 的Ribbon Pannel开始，一步步为它添加控件，丰富它的功能。

创建Ribbon Panel​

const filePanel = new RibbonPanel();
filePanel.title = 'File';

添加button控件​

以刚刚创建的filePanel作为parent创建一个按钮控件，并将它显示的模式设置为：'LargeIcon'，'Vertical'。

const newButton = new Button(filePanel, 'New', getImage('Launch-New_32'));
newButton.mode = Button.LargeIcon | Button.Text | Button.Vertical;

添加Ribbon Group​

WUI支持为Ribbon Panel添加控件组对象Ribbon Group，并指定该组内空间的排列方式为Vertical或者Horizontal。下面我们创建一个控件组，并为其添加三个新的按钮，使它们垂直排列。

const fileButtonGroup = filePanel.addGroup(Orientation.Vertical);
new Button(fileButtonGroup, 'Open', getImage('AppMenu-Open_32'));
new Button(fileButtonGroup, 'Save', getImage('AppMenu-Save_32'));
new Button(fileButtonGroup, 'Close', getImage('App_Menu_Close'));

以上就是创建一个Panel对象的过程，您可以继续创建其他Panel：viewPanel, settingPanel。

Ribbon Page​

Ribbon Page是Ribbon Panel的组织容器，为ribbon页中添加多个Panel，它们会从左到右依次排列。当界面窗口的宽度不够时，右边的Panel会自动收起来，不显示其内部控件，但可以点击panel的下拉箭头，使它的内部控件在Ribbon栏下方的位置显示出来。


// startRibbon
const startRibbon = new RibbonPage();
startRibbon.add(filePanel, getRibbonImage('file'));
startRibbon.add(viewPanel, getRibbonImage('view'));
startRibbon.add(viewPanel1, getRibbonImage('view'));

上面代码为我们创建了一个RibbonPage对象，我们还可以继续创建其他的Ribbon Page。

Ribbon Bar和Ribbon Window​

我们首先初始化一个Ribbon Window对象，它本质上就是一个界面窗口的布局，接着我们为该窗口的Ribbon栏Ribbon Bar添加在之前已经定义好的Ribbon菜单页。

// ribbonWindow
const ribbonWindow = new RibbonWindow();
ribbonWindow.titleBar.title = "Simulation app";
// ribbonBar
const ribbonbar = ribbonWindow.ribbonBar;
ribbonbar.add(startRibbon, 'Start');
ribbonbar.add(optionsRibbon, 'Options');
ribbonbar.updateSize();

当窗口大小调整时，Ribbon栏的大小会进行更新。这涉及到重新计算 Ribbon 条的宽度，并调整其布局和样式。

window.addEventListener('resize', (): void => {
    ribbonbar.updateSize();
});

通过以上步骤，我们就可以成功创建一个功能丰富、布局整齐的菜单栏窗口，提供更好的交互体验。