當前位置: 首頁>>代碼示例>>TypeScript>>正文


TypeScript h.div方法代碼示例

本文整理匯總了TypeScript中@phosphor/virtualdom.h.div方法的典型用法代碼示例。如果您正苦於以下問題:TypeScript h.div方法的具體用法?TypeScript h.div怎麽用?TypeScript h.div使用的例子?那麽, 這裏精選的方法代碼示例或許可以為您提供幫助。您也可以進一步了解該方法所在@phosphor/virtualdom.h的用法示例。


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

示例1: it

 it('should update the text of a text node', () => {
   let host = document.createElement('div');
   VirtualDOM.render(h.div('foo'), host);
   let div = host.children[0];
   expect(div.textContent).to.equal('foo');
   VirtualDOM.render(h.div('bar'), host);
   expect(host.children[0]).to.equal(div);
   expect(div.textContent).to.equal('bar');
 });
開發者ID:afshin,項目名稱:phosphor,代碼行數:9,代碼來源:index.spec.ts

示例2: showDialog

    execute: () => {

      // Create the header of the about dialog
      let headerLogo = h.div({className: 'jp-About-header-logo'});
      let headerWordmark = h.div({className: 'jp-About-header-wordmark'});
      let release = 'Beta Release Series';
      let versionNumber = `Version ${info.version}`;
      let versionInfo = h.span({className: 'jp-About-version-info'},
        h.span({className: 'jp-About-release'}, release),
        h.span({className: 'jp-About-version'}, versionNumber)
      );
      let title = h.span({className: 'jp-About-header'},
        headerLogo,
        h.div({className: 'jp-About-header-info'},
          headerWordmark,
          versionInfo
        )
      );

      // Create the body of the about dialog
      let jupyterURL = 'https://jupyter.org/about.html';
      let contributorsURL = 'https://github.com/jupyterlab/jupyterlab/graphs/contributors';
      let externalLinks = h.span({className: 'jp-About-externalLinks'},
        h.a({
          href: contributorsURL,
          target: '_blank',
          className: 'jp-Button-flat'
        }, 'CONTRIBUTOR LIST'),
        h.a({
          href: jupyterURL,
          target: '_blank',
          className: 'jp-Button-flat'
        }, 'ABOUT PROJECT JUPYTER')
      );
      let copyright = h.span({
        className: 'jp-About-copyright'
      }, 'Š 2018 Project Jupyter');
      let body = h.div({ className: 'jp-About-body' },
        externalLinks,
        copyright
      );

      showDialog({
        title,
        body,
        buttons: [
          Dialog.createButton({
            label: 'DISMISS',
            className: 'jp-About-button jp-mod-reject jp-mod-styled'
          })
        ]
      });
    }
開發者ID:7125messi,項目名稱:jupyterlab,代碼行數:53,代碼來源:index.ts

示例3: it

      it('should connect a node to a command', () => {
        let called = false;
        const command = 'commandlinker:connect-node';
        const commands = new CommandRegistry();
        const linker = new CommandLinker({ commands });
        let node: HTMLElement;
        let vnode: VirtualNode;
        const disposable = commands.addCommand(command, {
          execute: () => {
            called = true;
          }
        });

        vnode = h.div({ dataset: linker.populateVNodeDataset(command, null) });
        node = VirtualDOM.realize(vnode);
        document.body.appendChild(node);

        expect(called).to.equal(false);
        simulate(node, 'click');
        expect(called).to.equal(true);

        document.body.removeChild(node);
        linker.dispose();
        disposable.dispose();
      });
開發者ID:AlbertHilb,項目名稱:jupyterlab,代碼行數:25,代碼來源:commandlinker.spec.ts

示例4: render

  /**
   * Render the landing plugin to virtual DOM nodes.
   */
  protected render(): VirtualNode {
    let activitiesList: VirtualNode[] = [];
    let activites = this.model.activities;
    for (let activityName of activites) {
      let imgName = activityName[0].replace(' ', '');
      let column =
      h.div({className: LANDING_COLUMN_CLASS},
        h.span({className: LANDING_ICON_CLASS + ` jp-Image${imgName}` ,
                onclick: () => {
                  this._app.commands.execute(activityName[1], void 0);
                }}
        ),
        h.span({className: LANDING_TEXT_CLASS}, activityName[0])
      );
      activitiesList.push(column);
    }

    let logo = h.span({className: JUPYTERLAB_ICON_CLASS + ' ' + LANDING_LOGO_CLASS});
    let subtitle =
    h.span({className: LANDING_SUBTITLE_CLASS},
      this.model.previewMessage
    );
    let tour =
    h.span({className: TOUR_ICON_CLASS,
      onclick: () => {
        this._app.commands.execute(AboutCommandIDs.open, void 0);
      }}
    );
    let header = h.span({
      className: LANDING_HEADER_CLASS
    }, this.model.headerText);
    let body = h.div({className: LANDING_BODY_CLASS}, activitiesList);

    let dialog = h.div({className: LANDING_DIALOG_CLASS},
      logo,
      subtitle,
      tour,
      header,
      body,
      h.div({className: LANDING_CWD_CLASS},
        h.span({className: FOLDER_ICON_CLASS + ' ' + FOLDER_CLASS}),
        h.span({className: LANDING_PATH_CLASS}, this.model.path
        )
      )
    );
    return h.div({ className: LANDING_WRAPPER_CLASS }, dialog);
  }
開發者ID:rlugojr,項目名稱:jupyterlab,代碼行數:50,代碼來源:widget.ts

示例5: render

  /**
   * Render the landing plugin to virtual DOM nodes.
   */
  protected render(): VirtualNode {
    let activitiesList: VirtualNode[] = [];
    let activites = this.model.activities;
    for (let activityName of activites) {
      let name = activityName[0];
      let command = activityName[1];
      let args = activityName[2];
      let imgName = name.replace(' ', '');
      let column = h.div({ className: LANDING_COLUMN_CLASS },
        h.span({
          className: LANDING_ICON_CLASS + ` jp-Image${imgName}` ,
          dataset: this._linker.populateVNodeDataset(command, args)
        }),
        h.span({ className: LANDING_TEXT_CLASS }, name)
      );
      activitiesList.push(column);
    }

    let logo = h.span({
      className: `${JUPYTERLAB_ICON_CLASS} ${LANDING_LOGO_CLASS}`
    });
    let subtitle = h.span(
      {className: LANDING_SUBTITLE_CLASS},
      this.model.previewMessage
    );
    let tour = h.span({
      className: TOUR_ICON_CLASS,
      dataset: this._linker.populateVNodeDataset('about-jupyterlab:open', {})
    });
    let header = h.span({
      className: LANDING_HEADER_CLASS
    }, this.model.headerText);
    let body = h.div({ className: LANDING_BODY_CLASS }, activitiesList);

    let dialog = h.div({ className: LANDING_DIALOG_CLASS },
      logo,
      subtitle,
      tour,
      header,
      body
    );
    return h.div({ className: LANDING_WRAPPER_CLASS }, dialog);
  }
開發者ID:faricacarroll,項目名稱:jupyterlab,代碼行數:46,代碼來源:widget.ts

示例6: doBuild

 builder.getStatus().then(response => {
   if (response.status === 'building') {
     return doBuild();
   }
   if (response.status !== 'needed') {
     return;
   }
   let body = h.div(
     h.p(
       'JupyterLab build is suggested:',
       h.br(),
       h.pre(response.message)
     )
   );
   showDialog({
     title: 'Build Recommended',
     body,
     buttons: [Dialog.cancelButton(), Dialog.okButton({ label: 'BUILD' })]
   }).then(result => {
     if (result.button.accept) {
       return doBuild();
     }
   });
 });
開發者ID:7125messi,項目名稱:jupyterlab,代碼行數:24,代碼來源:index.ts


注:本文中的@phosphor/virtualdom.h.div方法示例由純淨天空整理自Github/MSDocs等開源代碼及文檔管理平台,相關代碼片段篩選自各路編程大神貢獻的開源項目,源碼版權歸原作者所有,傳播和使用請參考對應項目的License;未經允許,請勿轉載。