TypeScript UiDomFactory.dom函數代碼示例

本文整理匯總了TypeScript中tinymce/themes/mobile/util/UiDomFactory.dom函數的典型用法代碼示例。如果您正苦於以下問題：TypeScript dom函數的具體用法？TypeScript dom怎麽用？TypeScript dom使用的例子？那麽, 這裏精選的函數代碼示例或許可以為您提供幫助。

在下文中一共展示了dom函數的3個代碼示例，這些例子默認根據受歡迎程度排序。您可以為喜歡或者感覺有用的代碼點讚，您的評價將有助於係統推薦出更棒的TypeScript代碼示例。

示例1: function

export default function () {
  const ephoxUi = SelectorFind.first('#ephox-ui').getOrDie();

  const form = SerialisedDialog.sketch({
    onExecute () { },
    getInitialValue () {
      return Option.some({
        alpha: 'Alpha',
        beta: '',
        gamma: '',
        delta: ''
      });
    },
    fields: [
      Inputs.field('alpha', 'placeholder-alpha'),
      Inputs.field('beta', 'placeholder-beta'),
      Inputs.field('gamma', 'placeholder-gamma'),
      Inputs.field('delta', 'placeholder-delta')
    ]
  });

  const gui = Gui.create();
  Attachment.attachSystem(ephoxUi, gui);

  const container = GuiFactory.build({
    dom: UiDomFactory.dom('<div class="${prefix}-outer-container ${prefix}-fullscreen-maximized"></div>'),
    components: [
      {
        dom: UiDomFactory.dom('<div class="${prefix}-toolstrip"></div>'),
        components: [
          {
            dom: UiDomFactory.dom('<div class="${prefix}-toolbar ${prefix}-context-toolbar"></div>'),
            components: [
              {
                dom: UiDomFactory.dom('<div class="${prefix}-toolbar-group"></div>'),
                components: [
                  form
                ]
              }
            ]
          }
        ]
      }
    ]
  });

  gui.add(container);
}

開發者ID:danielpunkass，項目名稱:tinymce，代碼行數:48，代碼來源:FormDemo.ts

示例2: function

export default function () {
  const ephoxUi = SelectorFind.first('#ephox-ui').getOrDie();

  const menu = StylesMenu.sketch({
    formats: {
      menus: {
        Beta: [
          { title: 'Beta-1', isSelected: Fun.constant(false), getPreview: Fun.constant('') },
          { title: 'Beta-2', isSelected: Fun.constant(false), getPreview: Fun.constant('') },
          { title: 'Beta-3', isSelected: Fun.constant(false), getPreview: Fun.constant('') }
        ]
      },
      expansions: {
        Beta: 'Beta'
      },
      items: [
        { title: 'Alpha', isSelected: Fun.constant(false), getPreview: Fun.constant('') },
        { title: 'Beta', isSelected: Fun.constant(false), getPreview: Fun.constant('') },
        { title: 'Gamma', isSelected: Fun.constant(true), getPreview: Fun.constant('') }
      ]
    },
    handle (format) {
      // tslint:disable-next-line:no-console
      console.log('firing', format);
    }
  });

  const gui = Gui.create();
  Attachment.attachSystem(ephoxUi, gui);

  const container = GuiFactory.build({
    dom: UiDomFactory.dom('<div class="${prefix}-outer-container ${prefix}-fullscreen-maximized"></div>'),
    components: [
      {
        dom: UiDomFactory.dom('<div class="${prefix}-dropup" style="height: 500px;"></div>'),
        components: [
          menu
        ]
      }
    ]
  });

  gui.add(container);
}

開發者ID:abstask，項目名稱:tinymce，代碼行數:44，代碼來源:StylesMenuDemo.ts

示例3: function

export default function () {
  const ephoxUi = SelectorFind.first('#ephox-ui').getOrDie();

  const fontSlider = Container.sketch({
    dom: UiDomFactory.dom('<div class="${prefix}-toolbar ${prefix}-context-toolbar"></div>'),
    components: [
      {
        dom: UiDomFactory.dom('<div class="${prefix}-toolbar-group"></div>'),
        components: FontSizeSlider.makeItems({
          onChange: Fun.noop,
          getInitialValue: Fun.constant(2)
        })
      }
    ]
  });

  const colorSlider = Container.sketch({
    dom: UiDomFactory.dom('<div class="${prefix}-toolbar ${prefix}-context-toolbar"></div>'),
    components: [
      {
        dom: UiDomFactory.dom('<div class="${prefix}-toolbar-group"></div>'),
        components: ColorSlider.makeItems({
          onChange: Fun.noop,
          getInitialValue: Fun.constant(-1)
        })
      }
    ]
  });

  const gui = Gui.create();
  Attachment.attachSystem(ephoxUi, gui);

  const container = GuiFactory.build({
    dom: UiDomFactory.dom('<div class="{prefix}-outer-container ${prefix}-fullscreen-maximized"></div>'),
    components: [
      {
        dom: UiDomFactory.dom('<div class="${prefix}-toolstrip"></div>'),
        components: [ fontSlider ]
      },
      {
        dom: UiDomFactory.dom('<div class="${prefix}-toolstrip"></div>'),
        components: [ colorSlider ]
      }
    ]
  });

  gui.add(container);
}

開發者ID:danielpunkass，項目名稱:tinymce，代碼行數:48，代碼來源:SlidersDemo.ts

注：本文中的tinymce/themes/mobile/util/UiDomFactory.dom函數示例由純淨天空整理自Github/MSDocs等開源代碼及文檔管理平台，相關代碼片段篩選自各路編程大神貢獻的開源項目，源碼版權歸原作者所有，傳播和使用請參考對應項目的License；未經允許，請勿轉載。