@47deg/codetab 中文文档教程

Question

Codetab

组件

Installation

Load it from a CDN

• Put a script tag similar to this <script src='https://unpkg.com/@47deg/codetab/dist/codetab/codetab.js'></script> in the head of your index.html.
• Then you can use the element anywhere in your template, JSX, html etc.

Host your own instance

• Run npm install @47deg/codetab --save.
• Put a script tag similar to this <script src='node_modules/@47deg/codetab/dist/codetab.js'></script> in the head of your index.html.
• Then you can use the element anywhere in your template, JSX, html etc.

In JS environment app

• Run npm install @47deg/codetab --save.
• Add an import to the npm packages import @47deg/codetab;.
• Then you can use the element anywhere in your template, JSX, html etc.

Usage

=” 一旦加载到您的网站上，您就可以像这样简单地使用它：

<fortyseven-codetab data-languages='["Scala", "Kotlin", "Swift", "Haskell]'>
  <code>
    Scala code snippet
  </code>
  <code>
    Kotlin code snippet
  </code>
  <code>
    Swift code snippet
  </code>
  <code>
    Haskell code snippet
  </code>
</fortyseven-codetab>

Codetab 将根据您选择的选项卡一次显示一个元素。 Web 组件将尊重与这些元素相关联的样式，因此任何代码突出显示都会发生，这是您网站样式的责任。

Contributing or modifying this web component

Codetab 是使用 Stencil 构建的，Stencil 是一种使用 Web 组件构建快速 Web 应用程序的编译器。

Stencil 组件只是 Web 组件，因此它们可以在任何主要框架或根本没有框架的情况下工作。 要开始使用它，请将此 repo 克隆到一个新目录：

git clone https://github.com/47degrees/codetab.git codetab
cd codetab

并运行：

npm install
npm start

要构建用于生产的组件，请运行：

npm run build

要运行组件的单元测试，请运行：

npm test

需要帮助吗？ 在此处查看我们的文档。