Covet.pics 部件

独立 Covet.pics 网络组件使用 Stencil 构建.

开始

将此重播为新目录 :

git clone https://github.com/SpaceSquirrelApps/covet-pics-widget.git covet-pics-widget
cd covet-pics-widget

运行 :

npm install
npm start

为了建造生产部件,运行:

npm run build

要对组件进行单元测试,请运行:

npm test

需要帮忙吗? 检查 Stencil 文件 这里。 。 。 .

构成部分概览

库维特- pics- widget 游戏

此组件将抓取从 Covet.pics API 和 剖析 设置中嵌入的画廊数据,以确定画廊布局( )grid, (中文(简体) ), slider, (中文(简体) ), collage)和其他设置,如颜色,大小,垫等. 然后,它将提供适当的组成部分

贪婪- 图片- 壁画- 网格

这是一个有选项的网格布局来渲染"高亮"的图像. 支持两种主要布局模式(grid 或者说 collage),并可以通过地产进行切换 layout。网格中的项目为 <covet-pics-gallery-item>。 。 。 .

初始化时, 元素也会创建 <covet-pics-popup> 刚刚注射过 </body>。这样做是为了让弹出始终出现在任何页面元素上.

码头- 图片- 壁画- 滑坡器

这是滑行器(也叫幻灯片放映)布局. 与 <covet-pics-gallery-grid>,幻灯片中的项目是 <covet-pics-gallery-item> 并创建幻灯片 <covet-pics-popup> 和注射之前 </body>。 。 。 .

贪婪- pives- gallery- 流行

这是一个弹出组件,与 <covet-pics-gallery-grid> 打开 <covet-pics-gallery-slider>。 。 。 .

贪婪 - 图片 - 游戏 - 项目

儿童因素 <covet-pics-gallery-grid> 或者说 <covet-pics-gallery-slider>

使用 Covet.pics 部件

脚本标签

• 向国家预防机制公布
• 设置类似此的脚本标签 <script src='https://unpkg.com/@covet-pics/covet-pics-widget@latest/dist/covet-pics-widget/covet-pics-widget.js'></script> 在索引.html的首页
• 然后可以在模板中任意使用元素,JSX,html等.
• 典型的用法是制作画廊。 为此,你需要知道 Gallery Embed ID 然后你只能嵌入 covet-pics-widget 而该组件将负责装入所有必要元素,例如,嵌入的代码标记将看起来像:

<body>

  ...

  <covet-pics-widget gallery-embed-id="XYZ"></covet-pics-widget>

  ...

</body>

在组件被加载后, 标记可以看起来像这样( 如果它是网格布局 ) :

<body>

  ...

  <covet-pics-widget gallery-embed-id="XYZ">
    <covet-pics-gallery-grid>
      <covet-pics-gallery-item>...</covet-pics-gallery-item>
      <covet-pics-gallery-item>...</covet-pics-gallery-item>
      <covet-pics-gallery-item>...</covet-pics-gallery-item>
      <covet-pics-gallery-item>...</covet-pics-gallery-item>
      <covet-pics-gallery-item>...</covet-pics-gallery-item>
      <covet-pics-gallery-item>...</covet-pics-gallery-item>
    </covet-pics-gallery-grid>
  </covet-pics-widget>

  ...

  <covet-pics-popup>
    ...
  </covet-pics-popup>

</body>

节点模块

• 运行 npm install covet-pics-widget --save
• 设置类似此的脚本标签 <script src='node_modules/covet-pics-widget/dist/covet-pics-widget.js'></script> 在索引.html的首页
• 然后可以在模板、JSX、html等中任意使用元素

测试

• 要更新快照运行 : npm test -u 或者说 yarn test -u 或者说 npm run test --updateSnapshot

光盘N

我们使用jsDelivr.com,完整URL:https://cdn.jsdelivr.net/npm/@covet-pics/covet-pics-widget@latest/dist/covet-pic-widget/covet-pics-widget.esm.js

每个新版本发布后, 请在 js Spell 上清除缓存 : https://www.jsdelivr.com/tools/purge (中文(简体) )