在前端开发中,经常会需要展示一些组件的 demo 和示例,而 @npm-polymer/iron-demo-helpers 就是一个方便开发者快速创建 demo 的 npm 包,本文将介绍如何使用该 npm 包。
安装 iron-demo-helpers
在使用该 npm 包之前,需要先安装它,可以使用 npm 或者 yarn 进行安装。
--- ------- ------ ------------------------------
或者
---- --- ------------------------------
使用 iron-demo-helpers
安装完成之后,就可以在项目中引入该 npm 包了,下面介绍如何使用。
使用 <demo-snippet> 标签
在需要展示 demo 的位置,可以使用 <demo-snippet>
标签,通过配置它的 html
、css
和 js
属性,即可将对应代码展示出来。
------------- --------------- ------------ ---------------- --------------------------
<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>
的属性和用法如下:
#default
- 说明:要创建的 demo 页面内容。
- 类型:模板字符串。
- 默认值:无。
- 用法:在
<demo-pages>
标签内部,使用<template>
和<script>
标签来包含 demo 页面的 HTML 和 JavaScript 内容。
更多高级用法
@npm-polymer/iron-demo-helpers 还提供了一些高级用法,详细信息可以参考官方文档。
示例代码
--------- ----- ----- ---------- ------ ----- ---------------- ------------------------ ---------- ------- ------------- --------------------------------------------------------------------------- ------- ------ --------------------- ------- ------------ ---------- ------ --------------------------------- ---- --------- ------------- --------------- ------------ ---------------- -------------------------- ------ ------------------------------- ---- ---- ------- ------------- ----------------------------- ---------------- --------------- ----------------- ----------------- -------------- ------------------ --------- --------------- ------------------- ------------- -------------- ------------ ---------- --------- ----------- ----------- -------- ------------------ --------- --------- ------------- ----------- ------------- ------- -------
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60055fec81e8991b448ddafb