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

TypeScript alloy.SketchSpec类代码示例

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

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



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

示例1: renderButton

export const renderDialogButton = (spec: ButtonFoo, providersBackstage: UiFactoryBackstageProviders): SketchSpec => {
  const action = getAction(spec.name, 'custom');
  return renderButton(spec, action, providersBackstage, [
    RepresentingConfigs.memory(''),
    ComposingConfigs.self()
  ]);
};
开发者ID:tinymce,项目名称:tinymce,代码行数:7,代码来源:Button.ts


示例2: renderCommon

export const renderButton = (spec: ButtonFoo, action, providersBackstage: UiFactoryBackstageProviders, extraBehaviours = []): SketchSpec => {
  const translatedText = providersBackstage.translate(spec.text);

  const icon = spec.icon ? spec.icon.map((iconName) => renderIconFromPack(iconName, providersBackstage.icons)) : Option.none();
  const components = icon.isSome() ? componentRenderPipeline([ icon ]) : [];

  const innerHtml = icon.isSome() ? {} : {
    innerHtml: translatedText
  };

  const classes = [
    ...spec.primary ? ['tox-button'] : ['tox-button', 'tox-button--secondary'],
    ...icon.isSome() ? ['tox-button--icon'] : []
  ];

  const dom = {
    tag: 'button',
    classes,
    ...innerHtml,
    attributes: {
      title: translatedText // TODO: tooltips AP-213
    }
  };
  return renderCommon(spec, action, extraBehaviours, dom, components);
};
开发者ID:tinymce,项目名称:tinymce,代码行数:25,代码来源:Button.ts


示例3: makeGroup

const renderComponents = (_data, state) => {
  // default group is 'end'
  const footerButtons = state.map((s) => s.footerButtons).getOr([ ]);
  const buttonGroups = Arr.partition(footerButtons, (button) => button.align === 'start');

  const makeGroup = (edge, buttons): SketchSpec => Container.sketch({
    dom: {
      tag: 'div',
      classes: [ `tox-dialog__footer-${edge}` ]
    },
    components: Arr.map(buttons, (button) => button.memento.asSpec())
  });

  const startButtons = makeGroup('start', buttonGroups.pass);
  const endButtons = makeGroup('end', buttonGroups.fail);
  return [ startButtons, endButtons ];
};
开发者ID:tinymce,项目名称:tinymce,代码行数:17,代码来源:SilverDialogFooter.ts


示例4: renderFormFieldWith

const renderFormField = (pLabel: Option<AlloySpec>, pField: AlloySpec): SketchSpec => {
  return renderFormFieldWith(pLabel, pField, [ ]);
};
开发者ID:tinymce,项目名称:tinymce,代码行数:3,代码来源:FieldLabeller.ts


示例5: setButtonEnabled

const renderSideBar = (providersBackstage: UiFactoryBackstageProviders) => {
  const updateButtonUndoStates = (anyInSystem: AlloyComponent, undoEnabled: boolean, redoEnabled: boolean): void => {
    memUndo.getOpt(anyInSystem).each((undo) => {
      setButtonEnabled(undo, undoEnabled);
    });
    memRedo.getOpt(anyInSystem).each((redo) => {
      setButtonEnabled(redo, redoEnabled);
    });
  };

  const memUndo = Memento.record(
    createButton('Undo', 'undo', true, (button) => {
      AlloyTriggers.emitWith(button, ImageToolsEvents.internal.undo(), {
        direction: 1
      });
    }, providersBackstage)
  );

  const memRedo = Memento.record(
    createButton('Redo', 'redo', true, (button) => {
      AlloyTriggers.emitWith(button, ImageToolsEvents.internal.redo(), {
        direction: 1
      });
    }, providersBackstage)
  );

  const container = Container.sketch({
    dom: {
      tag: 'div',
      classes: [ 'tox-image-tools__toolbar', 'tox-image-tools__sidebar']
    },
    components: [
      memUndo.asSpec(),
      memRedo.asSpec(),
      createButton('Zoom in', 'zoom-in', false, (button) => {
        AlloyTriggers.emitWith(button, ImageToolsEvents.internal.zoom(), {
          direction: 1
        });
      }, providersBackstage),
      createButton('Zoom out', 'zoom-out', false, (button) => {
        AlloyTriggers.emitWith(button, ImageToolsEvents.internal.zoom(), {
          direction: -1
        });
      }, providersBackstage)
    ]
  });

  return {
    container,
    updateButtonUndoStates
  };
};
开发者ID:tinymce,项目名称:tinymce,代码行数:52,代码来源:SideBar.ts



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


鲜花

握手

雷人

路过

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

请发表评论

全部评论

专题导读
上一篇:
TypeScript alloy.Slider类代码示例发布时间:2022-05-28
下一篇:
TypeScript alloy.SimulatedEvent类代码示例发布时间: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