npm 包 @npm-polymer/iron-demo-helpers 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，经常会需要展示一些组件的 demo 和示例，而 @npm-polymer/iron-demo-helpers 就是一个方便开发者快速创建 demo 的 npm 包，本文将介绍如何使用该 npm 包。

安装 iron-demo-helpers

在使用该 npm 包之前，需要先安装它，可以使用 npm 或者 yarn 进行安装。

npm install --save @npm-polymer/iron-demo-helpers

或者

yarn add @npm-polymer/iron-demo-helpers

使用 iron-demo-helpers

安装完成之后，就可以在项目中引入该 npm 包了，下面介绍如何使用。

使用 <demo-snippet> 标签

在需要展示 demo 的位置，可以使用 <demo-snippet> 标签，通过配置它的 html、css 和 js 属性，即可将对应代码展示出来。

<demo-snippet html="<h1>Hello World!</h1>" js="alert('Hello World!');"></demo-snippet>

<demo-snippet> 的属性和用法如下：

html

说明：要展示的 HTML 代码。
类型：字符串。
默认值：无。
用法：在 html 属性中指定要展示的 HTML 代码，支持所有的 HTML 元素和属性。

css

说明：要展示的 CSS 代码。
类型：字符串。
默认值：无。
用法：在 css 属性中指定要展示的 CSS 代码，支持所有的 CSS 属性和值。

js

说明：要展示的 JavaScript 代码。
类型：字符串。
默认值：无。
用法：在 js 属性中指定要展示的 JavaScript 代码，支持所有的 JavaScript 语法和 API。

使用 iron-demo-helpers 创建 demo 页面

使用 <demo-snippet> 标签可以方便地展示 demo，但是在实际项目中，经常需要创建一个 demo 页面，可以使用 @npm-polymer/iron-demo-helpers 提供的 <demo-pages> 标签来实现。

<demo-pages>
  <template>
    <h1>Hello World!</h1>
  </template>
  <script>
    console.log('Hello World!');
  </script>
</demo-pages>

<demo-pages> 的属性和用法如下：

#default

说明：要创建的 demo 页面内容。
类型：模板字符串。
默认值：无。
用法：在 <demo-pages> 标签内部，使用 <template> 和 <script> 标签来包含 demo 页面的 HTML 和 JavaScript 内容。

示例代码

-- -------------------- ---- -------
--------- -----
----- ----------
  ------
    ----- ----------------
    ------------------------ ----------
    ------- ------------- ---------------------------------------------------------------------------
  -------
  ------
    --------------------- -------
    ------------
      ----------
        ------ --------------------------------- ---- ---------
        ------------- --------------- ------------ ---------------- --------------------------
        ------ ------------------------------- ---- ---- -------
        -------------
        -----------------------------
  ----------------
    --------------- -----------------
  -----------------
  --------------
    ------------------ ---------
  ---------------
-------------------
        -------------
        --------------
        ------------
          ----------
            --------- -----------
          -----------
          --------
            ------------------ ---------
          ---------
        -------------
      -----------
    -------------
  -------
-------

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055fec81e8991b448ddafb

npm 包 @npm-polymer/iron-demo-helpers 使用教程