@adaws/flip-card 中文文档教程

Question

Flip Card Component

基于 Dan Harding 的代码注释的卡片组件。 flip-card 元素可用于在页面上创建卡片式组件，包括正面和背面。 用户可以点击卡片的左下角查看是否翻转，露出另一面。

Installation

从 npm 安装组件：

npm install --save flip-card

或者，如果您不使用 npm，则可以在 bundle/flip-card.js 获得捆绑组件。 然而，这包括汇总的整个 Lit-Element 库（总计约 22KB）。

Usage

将模块导入您的 .html 文件：

<script type="module" src="path/to/flip-card.js"></script>

或 .js 文件：

import('path/to/flip-card.js');

然后像使用任何其他 HTML 标记一样使用它：

<flip-card></flip-card>

可以通过向元素添加子元素并为其 slot 属性指定以下名称之一来编辑卡片上的内容：

Slot Name	Description
front-content	The content for the front of the card
back-content	The content for the back of the card

插槽内容可以像页面上的任何其他元素一样，仅使用 css 设置样式。

Attributes

Attrbiute Name	Type	Description
facedown	boolean	Show the back side of the card.

Styling

卡片可以通过设置 css 变量来设置样式。 可以设置的变量有：

Variable	Description
accent	Set the colour of the card border and flip button background. Defaults to rgb(255, 212, 45)
flipButtonColour	Set the colour of the flip button icon. Defaults to #000000

以下 css 将页面上所有翻页卡片的强调色设置为绿色：

flip-card {
  --accent: green;
}

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Credits

基于 Dan Harding 的 >Code-it Notes,
由 Alex Dawson 实施，

License

根据 The Unlicense 获得许可