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

TypeScript alloy.Input类代码示例

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

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



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

示例1: function

const field = function (name, placeholder) {
  const inputSpec = Memento.record(Input.sketch({
    placeholder,
    onSetValue (input, data) {
      // If the value changes, inform the container so that it can update whether the "x" is visible
      AlloyTriggers.emit(input, NativeEvents.input());
    },
    inputBehaviours: Behaviour.derive([
      Composing.config({
        find: Option.some
      }),
      Tabstopping.config({ }),
      Keying.config({
        mode: 'execution'
      })
    ]),
    selectOnFocus: false
  }));

  const buttonSpec = Memento.record(
    Button.sketch({
      dom: UiDomFactory.dom('<button class="${prefix}-input-container-x ${prefix}-icon-cancel-circle ${prefix}-icon"></button>'),
      action (button) {
        const input = inputSpec.get(button);
        Representing.setValue(input, '');
      }
    })
  );

  return {
    name,
    spec: Container.sketch({
      dom: UiDomFactory.dom('<div class="${prefix}-input-container"></div>'),
      components: [
        inputSpec.asSpec(),
        buttonSpec.asSpec()
      ],
      containerBehaviours: Behaviour.derive([
        Toggling.config({
          toggleClass: Styles.resolve('input-container-empty')
        }),
        Composing.config({
          find (comp) {
            return Option.some(inputSpec.get(comp));
          }
        }),
        AddEventsBehaviour.config(clearInputBehaviour, [
          // INVESTIGATE: Because this only happens on input,
          // it won't reset unless it has an initial value
          AlloyEvents.run(NativeEvents.input(), function (iContainer) {
            const input = inputSpec.get(iContainer);
            const val = Representing.getValue(input);
            const f = val.length > 0 ? Toggling.off : Toggling.on;
            f(iContainer);
          })
        ])
      ])
    })
  };
};
开发者ID:danielpunkass,项目名称:tinymce,代码行数:60,代码来源:Inputs.ts


示例2: default

export default () => {
  const helpers = setupDemo();

  const backstage: UiFactoryBackstage = helpers.extras.backstage;
  const sharedBackstage: UiFactoryBackstageShared = {
    getSink: helpers.extras.backstage.shared.getSink,
    providers: helpers.extras.backstage.shared.providers,
    interpreter: (x) => x
  };

  const autocompleteSpec = renderAutocomplete({
    name: 'alpha',
    initialValue: '',
    label: Option.some('Alpha'),
    getItems: (value) => {
      return Arr.map([
        {
          text: 'Cat'
        },
        {
          text: 'Dog'
        }
      ], (d) => makeItem(d.text));
    }
  }, backstage);

  const iframeSpec = renderIFrame({
    type: 'iframe',
    name: 'iframe',
    label: Option.some('Iframe'),
    sandboxed: true
  }, sharedBackstage.providers);

  const inputSpec = renderInput({
    name: 'input',
    label: Option.some('Beta'),
    placeholder: Option.none(),
    validation: Option.some({
      validator: (s) => s === 'bad' ? 'Bad' : true
    })
  }, sharedBackstage.providers);

  const textareaSpec = renderTextarea({
    name: 'textarea',
    label: Option.some('Gamma'),
    placeholder: Option.none(),
    validation: Option.some({
      validator: (s) => s === 'so bad' ? 'So bad' : true
    })
  }, sharedBackstage.providers);

  const makeItem = (text: string): Menu.MenuItemApi => {
    return {
      type: 'menuitem',
      value: Id.generate('item'),
      text,
      onAction: () => console.log('clicked: ' + text)
    };
  };

  const labelSpec = renderLabel({
    label: 'A label wraps components in a group',
    type: 'label',
    items: [
      renderCheckbox({
        label: 'check box item 1',
        name: 'one'
      }, sharedBackstage.providers) as any,
      renderCheckbox({
        label: 'check box item 2',
        name: 'two'
      }, sharedBackstage.providers) as any,
      renderInput({
        label: Option.some('Sample input'),
        placeholder: Option.none(),
        name: 'exampleinputfieldname',
        validation: Option.none()
      }, sharedBackstage.providers) as any
    ]
  }, sharedBackstage);

  const labelGridSpec = renderLabel({
    label: 'A label wraps a grid compontent',
    type: 'label',
    items: [
      renderGrid({
        type: 'grid',
        columns: 2,
        items: [
          renderButton({
            name: 'gridspecbutton',
            text: 'Click Me!',
            primary: false
          }, () => {
            console.log('clicked on the button in the grid wrapped by a label');
          }, sharedBackstage.providers) as any,
          renderCheckbox({
            label: 'check box item 1',
            name: 'one'
          }, sharedBackstage.providers) as any,
//.........这里部分代码省略.........
开发者ID:tinymce,项目名称:tinymce,代码行数:101,代码来源:DialogComponentsDemo.ts


示例3: generate

const renderContextForm = (ctx: Toolbar.ContextForm, backstage: UiFactoryBackstage) => {
  // Cannot use the FormField.sketch, because the DOM structure doesn't have a wrapping group
  const inputAttributes = ctx.label.fold(
    () => ({ }),
    (label) => ({ 'aria-label': label })
  );

  const memInput = Memento.record(
    Input.sketch({
      inputClasses: [ 'tox-toolbar-textfield', 'tox-toolbar-nav-js' ],
      data: ctx.initValue(),
      inputAttributes,
      selectOnFocus: true,
      inputBehaviours: Behaviour.derive([
        Keying.config({
          mode: 'special',
          onEnter: (input) => {
            return commands.findPrimary(input).map((primary) => {
              AlloyTriggers.emitExecute(primary);
              return true;
            });
          },
          // These two lines need to be tested. They are about left and right bypassing
          // any keyboard handling, and allowing left and right to be processed by the input
          // Maybe this should go in an alloy sketch for Input?
          onLeft: (comp, se) => {
            se.cut();
            return Option.none();
          },
          onRight: (comp, se) => {
            se.cut();
            return Option.none();
          }
        })
      ])
    })
  );

  const commands = generate(memInput, ctx.commands, backstage.shared.providers);

  return renderToolbar({
    uid: Id.generate('context-toolbar'),
    initGroups: [
      {
        title: Option.none(),
        items: [ memInput.asSpec() ]
      },
      {
        title: Option.none(),
        items: commands.asSpecs() as AlloySpec[]
      }
    ],
    onEscape: Option.none,
    cyclicKeying: true,
    backstage,
    getSink: () => Result.error('')
  });
};
开发者ID:tinymce,项目名称:tinymce,代码行数:58,代码来源:ContextForm.ts



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


鲜花

握手

雷人

路过

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

请发表评论

全部评论

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