fancy-components

An UI components library with Web Components

Translations: 🇨🇳 中文文档

Documentation

https://fancy-components.github.io

Installation

npm

npm i fancy-components

yarn

yarn add fancy-components

pnpm

pnpm i fancy-components

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