Installation
npm
yarn
yarn add fancy-components
pnpm
Quick Start
<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
FcBubbles
FcBubbles CSS Properties |
CSS Property | meaning | Optional Values | Default |
--color | main color | normal css color value | #1cd |
--width | width | normal css length value | fit-content |
--height | height | normal css length value | fit-content |
FcBubbles Attributes (and properties) |
Attribute | meaning | Type | Default |
active | control animation | 'true' | 'false' | 'false' |
click | use click to control animation | exist this attribute or non-existent | non-existent |
FcWaveFilter
FcWaveFilter CSS Properties |
CSS Property | meaning | Optional Values | Default |
--color | wave color | normal css color value | black |
--width | width | normal css length value | fit-content |
--height | height | normal css length value | fit-content |
FcWaveFilter Attributes (and properties) |
Attribute | meaning | Type | Default |
color | wave color | string (normal css color value) | 'black' |
dur | animate duration | number (greater than 0) | 3 |
amplitude | wave amplitude | number | 1 |
delay | animation delay | number (greater than 0) | 0 |
mode | animation mode | 'alpha' | 'luminance' | 'img' | 'slideshow' | 'alpha' |
FcWarpBtn
FcWarpBtn CSS Properties |
CSS Property | meaning | Optional Values | Default |
--color | main color | normal css color value | #1cd |
--width | width | normal css length value | 200px |
--height | height | normal css length value | 40px |
--shadow-color | shadow color | normal css length value | rgba(0, 0, 0, .5) |
FcWarpBtn Attributes (and properties) |
Attribute | meaning | Type | Default |
text-align (textAlign property) | text align | 'left' | 'center' | 'right' | 'right' |
Fc3DBtn
Fc3DBtn CSS Properties |
CSS Property | meaning | Optional Values | Default |
--color | main color | normal css color value | #1cd |
--width | width | normal css length value | 100px |
--height | height | normal css length value | 36px |
--cover-color | cover color | normal css length value | #0005 |
--shadow-color | shadow color | normal css length value | #0008 |
--inset-shadow-color | inset shadow color | normal css length value | #fffc |
--inset-shadow-color-active | (when active) inset shadow color | normal css length value | var(--inset-shadow-color) |
Fc3DBtn Attributes (and properties) |
Attribute | meaning | Type | Default |
text-align (textAlign property) | text align | 'left' | 'center' | 'right' | 'right' |
FcArrowBtn
FcArrowBtn CSS Properties |
CSS Property | meaning | Optional Values | Default |
--color | main color | normal css color value | #1cd |
--width | width | normal css length value | 100px |
--height | height | normal css length value | 30px |
FcArrowBtn Attributes (and properties) |
Attribute | meaning | Type | Default |
right | arrow to right | exist this attribute or non-existent | non-existent |
FcUnderlineBtn
FcUnderlineBtn CSS Properties |
CSS Property | meaning | Optional Values | Default |
--color | main color | normal css color value | #1cd |
--width | width | normal css length value | 100px |
--height | height | normal css length value | 30px |
FcPixelBtn
FcPixelBtn CSS Properties |
CSS Property | meaning | Optional Values | Default |
--color | main color | normal css color value | #1cd |
--width | width | normal css length value | 100px |
--height | height | normal css length value | 40px |
FcDblWarpBtn
FcDblWarpBtn CSS Properties |
CSS Property | meaning | Optional Values | Default |
--color | main color | normal css color value | #1cd |
--width | width | normal css length value | 180px |
--height | height | normal css length value | 40px |
--shadow-color | shadow color | normal css color value | #0005 |
FcParenthesesBtn
FcParenthesesBtn CSS Properties |
CSS Property | meaning | Optional Values | Default |
--color | main color | normal css color value | #1cd |
--width | width | normal css length value | 80px |
--height | height | normal css length value | 30px |
FcRoundBtn
FcRoundBtn CSS Properties |
CSS Property | meaning | Optional Values | Default |
--color | main color | normal css color value | #1cd |
--width | width | normal css length value | 100px |
--height | height | normal css length value | 40px |
FcTypingInput
FcTypingInput CSS Properties |
CSS Property | meaning | Optional Values | Default |
--color | main color | normal css color value | #caf |
--width | width | normal css length value | 220px |
--height | height | normal css length value | 40px |
--border-color | border color | normal css color value | #caf |
--border-color-focus | (when focus) border color | normal css color value | var(--color) |
--border-color-hover | (when hover) border color | normal css color value | var(--border-color-hover) |
--border-radius | border radius | normal css length value | 4px |
--box-shadow-focus | (when focus) box shadow | normal css box-shadow value | 0 0 6px var(--border-color-focus) |
--circle-color | circle color | normal css color value | #0003 |
--circle-color-hover | (when hover) circle color | normal css color value | var(--circle-color) |
--placeholder-color | placeholder color | normal css color value | #0005 |
--placeholder-color-focus | (when focus) placeholder color | normal css color value | var(--border-color-focus) |
--placeholder-animate-color | placeholder animate color | normal css color value | red |
--placeholder-animate-title-color | placeholder animate title color | normal css color value | #00ff6b |
--placeholder-shadow | placeholder shadow | normal css text-shadow value | none |
--stripe-color | (when disabled) stripe color | normal css color value | #0003 |
--stripe-degree | (when disabled) stripe degree | number | 45 |
--disabled-filter | (when disabled) filter | normal css filter value | opacity(80%) grayscale(100%) |
FcTypingInput Attributes (and properties) |
Attribute | meaning | Type | Default |
white | main color to white | exist this attribute or non-existent | non-existent |
red | main color to red | exist this attribute or non-existent | non-existent |
FcChina
FcChina CSS Properties |
CSS Property | meaning | Optional Values | Default |
--width | width | normal css length value | 300px |
--height | height | normal css length value | 200px |
--star-stroke-color | (when stroke) star color | normal css color value | red |
--star-fill-color | (when fill) star color | normal css color value | red |
--flag-stroke-color | (when stroke) flag color | normal css color value | red |
--delay | animation delay | normal css time value | 0s |
--dur | animation duration | normal css time value | 6.6s |