• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

TypeScript alloy.Toolbar类代码示例

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文整理汇总了TypeScript中@ephox/alloy.Toolbar的典型用法代码示例。如果您正苦于以下问题:TypeScript Toolbar类的具体用法?TypeScript Toolbar怎么用?TypeScript Toolbar使用的例子?那么恭喜您, 这里精选的类代码示例或许可以为您提供帮助。



在下文中一共展示了Toolbar类的7个代码示例,这些例子默认根据受欢迎程度排序。您可以为喜欢或者感觉有用的代码点赞,您的评价将有助于我们的系统推荐出更棒的TypeScript代码示例。

示例1: getToolbarbehaviours

const renderToolbar = (toolbarSpec: ToolbarSpec) => {
  const modeName: any = toolbarSpec.cyclicKeying ? 'cyclic' : 'acyclic';

  return AlloyToolbar.sketch({
    uid: toolbarSpec.uid,
    dom: {
      tag: 'div',
      classes: ['tox-toolbar']
    },
    components: [
      AlloyToolbar.parts().groups({})
    ],

    toolbarBehaviours: getToolbarbehaviours(toolbarSpec, modeName, Option.none())
  });
};
开发者ID:tinymce,项目名称:tinymce,代码行数:16,代码来源:CommonToolbar.ts


示例2:

 Step.sync(() => {
   const groups = Arr.map([
     {
       title: Option.none(), items: Arr.map([ 'A', 'B' ], makeButton)
     },
     {
       title: Option.none(), items: Arr.map([ 'C' ], makeButton)
     }
   ], renderToolbarGroup);
   Toolbar.setGroups(toolbar, groups);
   Keying.focusIn(toolbar);
 })
开发者ID:tinymce,项目名称:tinymce,代码行数:12,代码来源:ToolbarTest.ts


示例3: function

 const resetGroups = function () {
   Toolbar.setGroups(toolbar, initGroups.get());
   Toggling.off(toolbar);
 };
开发者ID:abstask,项目名称:tinymce,代码行数:4,代码来源:ScrollingToolbar.ts


示例4:

 const onAttached = AlloyEvents.runOnAttached(function (component) {
   const groups = Arr.map(toolbarSpec.initGroups, renderToolbarGroup);
   AlloyToolbar.setGroups(component, groups);
 });
开发者ID:tinymce,项目名称:tinymce,代码行数:4,代码来源:CommonToolbar.ts


示例5: renderToolbarGroupCommon

const renderMoreToolbar = (toolbarSpec: ToolbarSpec) => {
  const modeName: any = toolbarSpec.cyclicKeying ? 'cyclic' : 'acyclic';

  const memOverflow = Memento.record(
    AlloyToolbar.sketch({
      dom: {
        tag: 'div',
        classes: ['tox-toolbar__overflow']
      },
      toolbarBehaviours: Behaviour.derive([
        Keying.config({
        // THIS IS USED FOR FLOATING AND NOT SLIDING
        mode: 'cyclic',
          onEscape: () => {
            AlloyTriggers.emit(toolbarSpec.moreDrawerData.lazyToolbar(), 'alloy.toolbar.toggle');
            Keying.focusIn(toolbarSpec.moreDrawerData.lazyMoreButton());
            return Option.some(true);
          }
        })
      ])
    })
  );

  const getOverflow = (toolbar) => {
    return toolbarSpec.getSink().toOption().bind((sink) => {
      return memOverflow.getOpt(sink).bind(
        (overflow) => {
          return SplitAlloyToolbar.getMoreButton(toolbar).bind((_moreButton) => {
            if (overflow.getSystem().isConnected()) {
              // you have the build thing, so just return it
              Positioning.position(sink, toolbarSpec.backstage.shared.anchors.toolbarOverflow(), overflow);
              return Option.some(overflow);
            } else {
              return Option.none();
            }
          });
        }
      );
    });
  };

  const primary = SplitAlloyToolbar.parts().primary({
    dom: {
      tag: 'div',
      classes: ['tox-toolbar__primary']
    }
  });

  const splitToolbarComponents = toolbarSpec.moreDrawerData.floating ? [
    primary
  ] : [
    primary,
    SplitAlloyToolbar.parts().overflow({
      dom: {
        tag: 'div',
        classes: [ 'tox-toolbar__overflow' ]
      }
    })
  ];

  return SplitAlloyToolbar.sketch({
    uid: toolbarSpec.uid,
    dom: {
      tag: 'div',
      classes: ['tox-toolbar-overlord']
    },
    floating: toolbarSpec.moreDrawerData.floating,
    overflow: getOverflow,
    parts: {
      // This already knows it is a toolbar group
      'overflow-group': renderToolbarGroupCommon({
        title: Option.none(),
        items: []
      }),
      'overflow-button': renderIconButtonSpec({
        name: 'more',
        icon: Option.some('more-drawer'),
        disabled: false,
        tooltip: Option.some('More...')
      }, Option.none(), toolbarSpec.backstage.shared.providers)
    },
    components: splitToolbarComponents,
    markers: {
      openClass: 'tox-toolbar__overflow--open',
      closedClass: 'tox-toolbar__overflow--closed',
      growingClass: 'tox-toolbar__overflow--growing',
      shrinkingClass: 'tox-toolbar__overflow--shrinking',
      overflowToggledClass: ToolbarButtonClasses.Ticked
    },
    splitToolbarBehaviours: getToolbarbehaviours(toolbarSpec, modeName, Option.some(memOverflow))
  });
};
开发者ID:tinymce,项目名称:tinymce,代码行数:92,代码来源:CommonToolbar.ts


示例6:

 Composite.parts.getPart(comp, detail, 'toolbar').each(function (toolbar) {
   AlloyToolbar.setGroups(toolbar, groups);
 });
开发者ID:tinymce,项目名称:tinymce,代码行数:3,代码来源:OuterContainer.ts


示例7: function

export default function () {
  const makeGroup = function (gSpec) {
    const scrollClass = gSpec.scrollable === true ? '${prefix}-toolbar-scrollable-group' : '';
    return {
      dom: UiDomFactory.dom('<div aria-label="' + gSpec.label + '" class="${prefix}-toolbar-group ' + scrollClass + '"></div>'),

      tgroupBehaviours: Behaviour.derive([
        AddEventsBehaviour.config('adhoc-scrollable-toolbar', gSpec.scrollable === true ? [
          AlloyEvents.runOnInit(function (component, simulatedEvent) {
            Css.set(component.element(), 'overflow-x', 'auto');
            Scrollables.markAsHorizontal(component.element());
            Scrollable.register(component.element());
          })
        ] : [ ])
      ]),

      components: [
        Container.sketch({
          components: [
            ToolbarGroup.parts().items({ })
          ]
        })
      ],
      markers: {
        // TODO: Now that alloy isn't marking the items with the old
        // itemClass here, this navigation probably doesn't work. But
        // it's mobile. However, bluetooth keyboards will need to be fixed
        // Essentially, all items put in the toolbar will need to be given
        // this class if they are to be part of keyboard navigation
        itemSelector: '.' + Styles.resolve('toolbar-group-item')
      },

      items: gSpec.items
    };
  };

  const toolbar = GuiFactory.build(
    Toolbar.sketch(
      {
        dom: UiDomFactory.dom('<div class="${prefix}-toolbar"></div>'),
        components: [
          Toolbar.parts().groups({ })
        ],
        toolbarBehaviours: Behaviour.derive([
          Toggling.config({
            toggleClass: Styles.resolve('context-toolbar'),
            toggleOnExecute: false,
            aria: {
              mode: 'none'
            }
          }),
          Keying.config({
            mode: 'cyclic'
          })
        ]),
        shell: true
      }
    )
  ) as AlloyComponent;

  const wrapper = GuiFactory.build(
    Container.sketch({
      dom: {
        classes: [ Styles.resolve('toolstrip') ]
      },
      components: [
        GuiFactory.premade(toolbar)
      ],
      containerBehaviours: Behaviour.derive([
        Toggling.config({
          toggleClass: Styles.resolve('android-selection-context-toolbar'),
          toggleOnExecute: false
        })
      ])
    })
  ) as AlloyComponent;

  const resetGroups = function () {
    Toolbar.setGroups(toolbar, initGroups.get());
    Toggling.off(toolbar);
  };

  const initGroups = Cell([ ]);

  const setGroups = function (gs) {
    initGroups.set(gs);
    resetGroups();
  };

  const createGroups = function (gs) {
    return Arr.map(gs, Fun.compose(ToolbarGroup.sketch, makeGroup));
  };

  const refresh = function () {
    // Toolbar.refresh is undefined
    // Toolbar.refresh(toolbar);
  };

  const setContextToolbar = function (gs) {
    Toggling.on(toolbar);
//.........这里部分代码省略.........
开发者ID:tinymce,项目名称:tinymce,代码行数:101,代码来源:ScrollingToolbar.ts



注:本文中的@ephox/alloy.Toolbar类示例由纯净天空整理自Github/MSDocs等源码及文档管理平台,相关代码片段筛选自各路编程大神贡献的开源项目,源码版权归原作者所有,传播和使用请参考对应项目的License;未经允许,请勿转载。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript alloy.ToolbarGroup类代码示例发布时间:2022-05-28
下一篇:
TypeScript alloy.Toggling类代码示例发布时间:2022-05-28
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap