首页 > 生活常识 >

侧边栏怎么设置(「前端干货」教你点击直接打开侧边栏)

100次浏览     发布时间:2024-10-03 08:31:14    
实例操作

首先,我们先常规地在编辑器的ribbon上插入一个按钮。

按钮插入完毕后,我们来创建一个侧边栏模板。这个侧边栏模板其实是一个template对象,大家可以通过getTemplate去取一些常见的模板,观察它的结构。

比较常用的元素有:templateName和content。其中content是一个数组,里面可以包含不同原子类型的对象。关于原子类型后面我们会为大家介绍更多相关内容,大家在这里可以简单将原子组件理解为新增template的基本单位。

由于内容容量很多,我们这里只截取部分为大家介绍。content里面的第一个对应一般就是侧边栏的标题,我们可以指定一个类型为TextBlock的原子类型,然后通过css样式给这个标题添加样式。text就对应标题的文本。在第二个对象中我们指定了一个容器类型名为“Container”,里面包含一些子组件,可以设置其margin边距、width宽度等,除此之外还可以设置bindingPath,有点类似数据绑定,这个参数是可以选择是否动态展示数据的前提。

将template创建完成后,接下来我们需要注册该模板。

template除了有UI外,还需要有对应的command,我们也需要去定义命令对象。有一个需要注意的属性是visibleContext,这个用于控制模板的显示和关闭,比较关键。然后就是处理侧边栏的状态的getState了,在这里,我们可以去对侧边栏的内容做更改。如下面的text1和text2就是前面提到的bindingPath,当我们点击到指定的单元格时,侧边栏就会显示对应值。

再接着,将这个ui和command规整为一个侧边栏对象中。

并且添加到我们的config里面。

最后再回到前面定义的按钮的对象中将控制侧边栏显隐的代码加上,这样就全部大功告成啦。

相关文章
管理者的基本素质和方法(平易近人,管理者必备的素质要求)

网站内容来自网络,如有侵权请联系我们,立即删除!
Copyright © 内百科 鲁ICP备2023048205号-2