fancy-components
Version:
An UI components Library with Web Components
348 lines (251 loc) β’ 12.3 kB
Markdown
<div align="center">
<h1>
fancy-components
</h1>
<sup>
<br />
<pre>An UI components library with Web Components</pre>
<br />
Translations: <a href="https://fancy-components.gitee.io/home-page">π¨π³ δΈζζζ‘£</a>
</sup>
# Documentation
[https://fancy-components.github.io](https://fancy-components.github.io)
</div>
# Installation
## npm
```bash
npm i fancy-components
```
## yarn
```bash
yarn add fancy-components
```
## pnpm
```bash
pnpm i fancy-components
```
# Quick Start
```html
<fc-arrow-btn>Button</fc-arrow-btn>
<script>
import { FcArrowBtn } from 'fancy-components'
/* eslint-disable no-new */
new FcArrowBtn()
</script>
<style>
fc-arrow-btn {
--color: black;
}
</style>
```
# API
---
<br>
<h3>FcBubbles</h3>
<br>
<table>
<tr><th colspan="4" style="text-align: center">FcBubbles CSS Properties</th></tr>
<tr><th>CSS Property</th><th>meaning</th><th>Optional Values</th><th>Default</th></tr>
<tr><td>--color</td><td>main color</td><td>normal css color value</td><td>#1cd</td></tr>
<tr><td>--width</td><td>width</td><td>normal css length value</td><td>fit-content</td></tr>
<tr><td>--height</td><td>height</td><td>normal css length value</td><td>fit-content</td></tr>
</table>
<br>
<table>
<tr><th colspan="4" style="text-align: center">FcBubbles Attributes (and properties)</th></tr>
<tr><th>Attribute</th><th>meaning</th><th>Type</th><th>Default</th></tr>
<tr><td>active</td><td>control animation</td><td>'true' | 'false'</td><td>'false'</td></tr>
<tr><td>click</td><td>use click to control animation</td><td>exist this attribute or non-existent</td><td>non-existent</td></tr>
</table>
<br>
---
<br>
<h3>FcWaveFilter</h3>
<br>
<table>
<tr><th colspan="4" style="text-align: center">FcWaveFilter CSS Properties</th></tr>
<tr><th>CSS Property</th><th>meaning</th><th>Optional Values</th><th>Default</th></tr>
<tr><td>--color</td><td>wave color</td><td>normal css color value</td><td>black</td></tr>
<tr><td>--width</td><td>width</td><td>normal css length value</td><td>fit-content</td></tr>
<tr><td>--height</td><td>height</td><td>normal css length value</td><td>fit-content</td></tr>
</table>
<br>
<table>
<tr><th colspan="4" style="text-align: center">FcWaveFilter Attributes (and properties)</th></tr>
<tr><th>Attribute</th><th>meaning</th><th>Type</th><th>Default</th></tr>
<tr><td>color</td><td>wave color</td><td>string (normal css color value)</td><td>'black'</td></tr>
<tr><td>dur</td><td>animate duration</td><td>number (greater than 0)</td><td>3</td></tr>
<tr><td>amplitude</td><td>wave amplitude</td><td>number</td><td>1</td></tr>
<tr><td>delay</td><td>animation delay</td><td>number (greater than 0)</td><td>0</td></tr>
<tr><td>mode</td><td>animation mode</td><td>'alpha' | 'luminance' | 'img' | 'slideshow'</td><td>'alpha'</td></tr>
</table>
<br>
---
<br>
<h3>FcWarpBtn</h3>
<br>
<table>
<tr><th colspan="4" style="text-align: center">FcWarpBtn CSS Properties</th></tr>
<tr><th>CSS Property</th><th>meaning</th><th>Optional Values</th><th>Default</th></tr>
<tr><td>--color</td><td>main color</td><td>normal css color value</td><td>#1cd</td></tr>
<tr><td>--width</td><td>width</td><td>normal css length value</td><td>200px</td></tr>
<tr><td>--height</td><td>height</td><td>normal css length value</td><td>40px</td></tr>
<tr><td>--shadow-color</td><td>shadow color</td><td>normal css length value</td><td>rgba(0, 0, 0, .5)</td></tr>
</table>
<br>
<table>
<tr><th colspan="4" style="text-align: center">FcWarpBtn Attributes (and properties)</th></tr>
<tr><th>Attribute</th><th>meaning</th><th>Type</th><th>Default</th></tr>
<tr><td>text-align (textAlign property)</td><td>text align</td><td>'left' | 'center' | 'right'</td><td>'right'</td></tr>
</table>
<br>
---
<br>
<h3>Fc3DBtn</h3>
<br>
<table>
<tr><th colspan="4" style="text-align: center">Fc3DBtn CSS Properties</th></tr>
<tr><th>CSS Property</th><th>meaning</th><th>Optional Values</th><th>Default</th></tr>
<tr><td>--color</td><td>main color</td><td>normal css color value</td><td>#1cd</td></tr>
<tr><td>--width</td><td>width</td><td>normal css length value</td><td>100px</td></tr>
<tr><td>--height</td><td>height</td><td>normal css length value</td><td>36px</td></tr>
<tr><td>--cover-color</td><td>cover color</td><td>normal css length value</td><td>#0005</td></tr>
<tr><td>--shadow-color</td><td>shadow color</td><td>normal css length value</td><td>#0008</td></tr>
<tr><td>--inset-shadow-color</td><td>inset shadow color</td><td>normal css length value</td><td>#fffc</td></tr>
<tr><td>--inset-shadow-color-active</td><td>(when active) inset shadow color</td><td>normal css length value</td><td>var(--inset-shadow-color)</td></tr>
</table>
<br>
<table>
<tr><th colspan="4" style="text-align: center">Fc3DBtn Attributes (and properties)</th></tr>
<tr><th>Attribute</th><th>meaning</th><th>Type</th><th>Default</th></tr>
<tr><td>text-align (textAlign property)</td><td>text align</td><td>'left' | 'center' | 'right'</td><td>'right'</td></tr>
</table>
<br>
---
<br>
<h3>FcArrowBtn</h3>
<br>
<table>
<tr><th colspan="4" style="text-align: center">FcArrowBtn CSS Properties</th></tr>
<tr><th>CSS Property</th><th>meaning</th><th>Optional Values</th><th>Default</th></tr>
<tr><td>--color</td><td>main color</td><td>normal css color value</td><td>#1cd</td></tr>
<tr><td>--width</td><td>width</td><td>normal css length value</td><td>100px</td></tr>
<tr><td>--height</td><td>height</td><td>normal css length value</td><td>30px</td></tr>
</table>
<br>
<table>
<tr><th colspan="4" style="text-align: center">FcArrowBtn Attributes (and properties)</th></tr>
<tr><th>Attribute</th><th>meaning</th><th>Type</th><th>Default</th></tr>
<tr><td>right</td><td>arrow to right</td><td>exist this attribute or non-existent</td><td>non-existent</td></tr>
</table>
<br>
---
<br>
<h3>FcUnderlineBtn</h3>
<br>
<table>
<tr><th colspan="4" style="text-align: center">FcUnderlineBtn CSS Properties</th></tr>
<tr><th>CSS Property</th><th>meaning</th><th>Optional Values</th><th>Default</th></tr>
<tr><td>--color</td><td>main color</td><td>normal css color value</td><td>#1cd</td></tr>
<tr><td>--width</td><td>width</td><td>normal css length value</td><td>100px</td></tr>
<tr><td>--height</td><td>height</td><td>normal css length value</td><td>30px</td></tr>
</table>
<br>
---
<br>
<h3>FcPixelBtn</h3>
<br>
<table>
<tr><th colspan="4" style="text-align: center">FcPixelBtn CSS Properties</th></tr>
<tr><th>CSS Property</th><th>meaning</th><th>Optional Values</th><th>Default</th></tr>
<tr><td>--color</td><td>main color</td><td>normal css color value</td><td>#1cd</td></tr>
<tr><td>--width</td><td>width</td><td>normal css length value</td><td>100px</td></tr>
<tr><td>--height</td><td>height</td><td>normal css length value</td><td>40px</td></tr>
</table>
<br>
---
<br>
<h3>FcDblWarpBtn</h3>
<br>
<table>
<tr><th colspan="4" style="text-align: center">FcDblWarpBtn CSS Properties</th></tr>
<tr><th>CSS Property</th><th>meaning</th><th>Optional Values</th><th>Default</th></tr>
<tr><td>--color</td><td>main color</td><td>normal css color value</td><td>#1cd</td></tr>
<tr><td>--width</td><td>width</td><td>normal css length value</td><td>180px</td></tr>
<tr><td>--height</td><td>height</td><td>normal css length value</td><td>40px</td></tr>
<tr><td>--shadow-color</td><td>shadow color</td><td>normal css color value</td><td>#0005</td></tr>
</table>
<br>
---
<br>
<h3>FcParenthesesBtn</h3>
<br>
<table>
<tr><th colspan="4" style="text-align: center">FcParenthesesBtn CSS Properties</th></tr>
<tr><th>CSS Property</th><th>meaning</th><th>Optional Values</th><th>Default</th></tr>
<tr><td>--color</td><td>main color</td><td>normal css color value</td><td>#1cd</td></tr>
<tr><td>--width</td><td>width</td><td>normal css length value</td><td>80px</td></tr>
<tr><td>--height</td><td>height</td><td>normal css length value</td><td>30px</td></tr>
</table>
<br>
---
<br>
<h3>FcRoundBtn</h3>
<br>
<table>
<tr><th colspan="4" style="text-align: center">FcRoundBtn CSS Properties</th></tr>
<tr><th>CSS Property</th><th>meaning</th><th>Optional Values</th><th>Default</th></tr>
<tr><td>--color</td><td>main color</td><td>normal css color value</td><td>#1cd</td></tr>
<tr><td>--width</td><td>width</td><td>normal css length value</td><td>100px</td></tr>
<tr><td>--height</td><td>height</td><td>normal css length value</td><td>40px</td></tr>
</table>
<br>
---
<br>
<h3>FcTypingInput</h3>
<br>
<table>
<tr><th colspan="4" style="text-align: center">FcTypingInput CSS Properties</th></tr>
<tr><th>CSS Property</th><th>meaning</th><th>Optional Values</th><th>Default</th></tr>
<tr><td>--color</td><td>main color</td><td>normal css color value</td><td>#caf</td></tr>
<tr><td>--width</td><td>width</td><td>normal css length value</td><td>220px</td></tr>
<tr><td>--height</td><td>height</td><td>normal css length value</td><td>40px</td></tr>
<tr><td>--border-color</td><td>border color</td><td>normal css color value</td><td>#caf</td></tr>
<tr><td>--border-color-focus</td><td>(when focus) border color</td><td>normal css color value</td><td>var(--color)</td></tr>
<tr><td>--border-color-hover</td><td>(when hover) border color</td><td>normal css color value</td><td>var(--border-color-hover)</td></tr>
<tr><td>--border-radius</td><td>border radius</td><td>normal css length value</td><td>4px</td></tr>
<tr><td>--box-shadow-focus</td><td>(when focus) box shadow</td><td>normal css box-shadow value</td><td>0 0 6px var(--border-color-focus)</td></tr>
<tr><td>--circle-color</td><td>circle color</td><td>normal css color value</td><td>#0003</td></tr>
<tr><td>--circle-color-hover</td><td>(when hover) circle color</td><td>normal css color value</td><td>var(--circle-color)</td></tr>
<tr><td>--placeholder-color</td><td>placeholder color</td><td>normal css color value</td><td>#0005</td></tr>
<tr><td>--placeholder-color-focus</td><td>(when focus) placeholder color</td><td>normal css color value</td><td>var(--border-color-focus)</td></tr>
<tr><td>--placeholder-animate-color</td><td>placeholder animate color</td><td>normal css color value</td><td>red</td></tr>
<tr><td>--placeholder-animate-title-color</td><td>placeholder animate title color</td><td>normal css color value</td><td>#00ff6b</td></tr>
<tr><td>--placeholder-shadow</td><td>placeholder shadow</td><td>normal css text-shadow value</td><td>none</td></tr>
<tr><td>--stripe-color</td><td>(when disabled) stripe color</td><td>normal css color value</td><td>#0003</td></tr>
<tr><td>--stripe-degree</td><td>(when disabled) stripe degree</td><td>number</td><td>45</td></tr>
<tr><td>--disabled-filter</td><td>(when disabled) filter</td><td>normal css filter value</td><td>opacity(80%) grayscale(100%)</td></tr>
</table>
<br>
<table>
<tr><th colspan="4" style="text-align: center">FcTypingInput Attributes (and properties)</th></tr>
<tr><th>Attribute</th><th>meaning</th><th>Type</th><th>Default</th></tr>
<tr><td>white</td><td>main color to white</td><td>exist this attribute or non-existent</td><td>non-existent</td></tr>
<tr><td>red</td><td>main color to red</td><td>exist this attribute or non-existent</td><td>non-existent</td></tr>
</table>
<br>
---
<br>
<h3>FcChina</h3>
<br>
<table>
<tr><th colspan="4" style="text-align: center">FcChina CSS Properties</th></tr>
<tr><th>CSS Property</th><th>meaning</th><th>Optional Values</th><th>Default</th></tr>
<tr><td>--width</td><td>width</td><td>normal css length value</td><td>300px</td></tr>
<tr><td>--height</td><td>height</td><td>normal css length value</td><td>200px</td></tr>
<tr><td>--star-stroke-color</td><td>(when stroke) star color</td><td>normal css color value</td><td>red</td></tr>
<tr><td>--star-fill-color</td><td>(when fill) star color</td><td>normal css color value</td><td>red</td></tr>
<tr><td>--flag-stroke-color</td><td>(when stroke) flag color</td><td>normal css color value</td><td>red</td></tr>
<tr><td>--delay</td><td>animation delay</td><td>normal css time value</td><td>0s</td></tr>
<tr><td>--dur</td><td>animation duration</td><td>normal css time value</td><td>6.6s</td></tr>
</table>