fancy-components 一个酷炫的前端组件库

大伙前端都是用什么组件库的呢？

我最近刚发现前端一个很好看、很炫酷的组件库。那就是fancy-components ，简直是“酷炫”极了。自己要是不想写复杂的样式，下面我来带大家了解下这个组件库。

一. 组件展示

翻译成中文就是是花式组件，也就是花里胡哨的意思。确实有点花里胡哨。

下面看一下最基本的样式。

二. 组件的使用和详细属性

使用这个组件库非常的简单。

在一般的html中

只需要在script 中引入type=“moudle”，然后在导入需要的组件，new一个组件就行。如图。
注意：当引入了就可以作为标签来使用，但是必须要将驼峰命名法拆分开小写在页面上，也可以在new的时候取一个别名。若无别名必须完整写完

    <!-- <fc-typing-input placeholder="usermane"></fc-typing-input> -->

<body><fc-input placeholder="usermane"></fc-input>
</body>
<script type="module">
import { FcTypingInput } from 'https://unpkg.com/fancy-components'  //五星红旗
new FcTypingInput('fc-input')
</script>

在Vue 2.0 中使用

首先安装下这个组件库

npm i fancy-components

然后在组件中导入，实例，使用就可以。如果想全局使用就在main.js中导入，并实例化即可。

<template>
<div><!-- 使用组件 --><fc-bubbles click><img src="./aixin.png"></fc-bubbles>
</div>
</template><script>
import { FcBubbles} from 'fancy-components'//导入组件
new FcBubbles() //实例组件
export default {}
</script><style></style>

接下来介绍写组件

1. FcBubbles

这是一个气泡的特效，为子元素添加散开的感觉。也可以自己做成点赞爱心那种，获得点击时候激活active为true然后填充颜色。再次点击取消爱心颜色。

<body>
<fc-bubbles click><img src="./aixin.png">
</fc-bubbles>
</body>
<script type="module">import { FcBubbles } from 'https://unpkg.com/fancy-components'new FcBubbles()</script>

css 属性	描述	默认值
–width	组件的宽度	fit-content
–height	组件的高度	fit-content
–color	填充颜色	#1cd

标签属性	描述	默认值
active	通过active属性来控制气泡动效的显隐（‘true’、‘false’）	false
click	通过鼠标点击来控制气泡动效的显隐	null

2. FcWaveFilter

这个可以作为页面加载使用我觉得很好看，或者是获取不到资源的场景。

<body><fc-wave-filter><img src="./apple.png">
</fc-wave-filter>
</body>
<script type="module">import { FcWaveFilter} from 'https://unpkg.com/fancy-components'new FcWaveFilter()</script>

css属性

css 属性	描述	默认值
–width	组件的宽度	fit-content
–height	组件的高度	fit-content
–color	填充波浪的颜色	blaack

标签属性	描述	默认值
color	填充波浪的颜色	blaack
amplitude	波浪幅度(数字(原波浪幅的倍数))	1
flag-stroke-color	执行描边动画时的描边颜色	red
delay	填充后持续的时间	0s
dur	整段动画的执行时间	6.6s
mode	动画模式(‘alpha’(透明度)、‘luminance’(亮度)、‘img’(图片)、‘slideshow’(幻灯片))	alpha
interval	几秒一切换(适合幻灯片模式)	0

3. FcWarpBtn

这个为一边翘起来的样子，感觉可以作为标签类的按钮还是很好看的。

<body>
<fc-warp-btn>登录
</fc-warp-btn>
</body>
<script type="module">import { FcWarpBtn} from 'https://unpkg.com/fancy-components'new FcWarpBtn()</script>

css 属性	描述	默认值
–width	组件的宽度	200px
–height	组件的高度	40px
–color	组件的背景色	#1cd
–shadow-color	组件阴影颜色	rgba(0, 0, 0, .5)

标签属性	描述	默认值
text-align	文本排列方式（‘left’、‘center’、‘right’）	right

4.FcDblWarpBtn

这个按钮的样式相比前面一个没有孔，两头都翘起来。可以自己调节下阴影和背景色，替换绝大多数的按钮都很好看。

<body>
<fc-dbl-warp-btn>登录
</fc-dbl-warp-btn>
</body>
<script type="module">import { FcDblWarpBtn} from 'https://unpkg.com/fancy-components'new FcDblWarpBtn()</script>

css 属性	描述	默认值
–width	组件的宽度	180px
–height	组件的高度	40px
–color	组件的背景色	#1cd
–shadow-color	组件的颜色	rgba(0, 0, 0, .5）

5.Fc3DBtn

这个按钮看起来就很有立体的感觉了。可以根据自己的喜欢调色。

<body><fc-3D-btn>登录</fc-3D-btn>
</body>
<style>fc-3D-btn{color: salmon;--cover-color:rgb(17, 0, 255);--shadow-color:red;--inset-shadow-color:rgb(0, 195, 255);}
</style>
<script type="module">import { FcDblWarpBtn} from 'https://unpkg.com/fancy-components'new FcDblWarpBtn()</script>

css 属性	描述	默认值
–width	组件的宽度	100px
–height	组件的高度	36px
–color	组件内字体的颜色	#a69
–shadow-color	组件的阴影颜色	#0008
–cover-color	组件凸起的那部分颜色	#0005
–inset-shadow-color	组件内阴影颜色	#fffc
–inset-shadow-color	组件内阴影在按钮处于点击状态时的颜色	var(–inset-shadow-color)

6. FcRoundBtn

这是一个环绕形的动画的按钮。看起来很舒服。

<body><fc-round-btn>登录
</fc-round-btn>
</body>
<script type="module">import { FcRoundBtn} from 'https://unpkg.com/fancy-components'new FcRoundBtn()</script>

css 属性	描述	默认值
–width	组件的宽度	100px
–height	组件的高度	40px
–color	组件的颜色	#1cd

7. FcUnderlineBtn

这是一个有下划线的按钮，但你的鼠标悬停的时候就会出现炫酷的动画。

<body>
<fc-underline-btn>登录</fc-underline-btn>
</body>
<script type="module">import { FcUnderlineBtn} from 'https://unpkg.com/fancy-components'new FcUnderlineBtn()</script>

css 属性	描述	默认值
–width	组件的宽度	100px
–height	组件的高度	30px
–color	组件的颜色	#1cd

8. FcParenthesesBtn

<body>
<fc-parentheses-btn>登录
</fc-parentheses-btn>
</body>
<script type="module">import { FcParenthesesBtn} from 'https://unpkg.com/fancy-components'new FcParenthesesBtn()</script>

css 属性	描述	默认值
–width	组件的宽度	80px
–height	组件的高度	30px
–color	组件的颜色	#1cd

9.FcPixelBtn

这个和FcRoundBtn种按钮有点像，但是动画的特效不一样。

<body>
<fc-pixel-btn>登录
</fc-pixel-btn>
</body>
<script type="module">import { FcPixelBtn} from 'https://unpkg.com/fancy-components'new FcPixelBtn()</script>

css 属性	描述	默认值
–width	组件的宽度	100px
–height	组件的高度	40px
–color	组件的颜色	#1cd

10. FcArrowBtn

这个按钮我感觉是最使用的了，返回足够有B格，哈哈。

<body><fc-arrow-btn>返回
</fc-arrow-btn>
</body>
<script type="module">import { FcArrowBtn} from 'https://unpkg.com/fancy-components'new FcArrowBtn()</script>

css 属性	描述	默认值
–width	组件的宽度	100px
–height	组件的高度	30px
–color	组件的颜色	#1cd

11. FcTypingInput

这个是我最喜欢的输入框了，我感觉瞬间高端霸气上档次了。简直爱不释手。

<body>
<fc-typing-input placeholder="username"></fc-typing-input>
</body>
<script type="module">import { FcTypingInput} from 'https://unpkg.com/fancy-components'new FcTypingInput()</script>

css 属性	描述	默认值
–width	组件的宽度	220px
–height	组件的高度	40px
–color	整体的颜色	#caf
–border-color	边框颜色	#caf
–border-color-hover	hover状态下的边框颜色	var(–color)
–border-color-focus	focus状态下的边框颜色	var(–border-color-hover)
–border-radius	圆角	4px
–box-shadow-focus	在focus状态下的input框盒阴影	0 0 6px var(–border-color-focus)
–circle-color	input框在无值并且非focus状态时里面的那个小圆点的颜色	#0003
–circle-color-hover	input框在无值并处于hover状态下里面的那个小圆点的颜色	var(–circle-color)
–placeholder-color	placeholder的颜色	#0005
–placeholder-color-focus	placeholder在input框处于focus状态时的颜色	var(–border-color-focus)
–placeholder-animate-color	placeholder在input框内执行动画时的颜色	red
–placeholder-animate-title-color	placeholder在input框的头上执行动画时的颜色	#00ff6b
–placeholder-shadow	placeholder的文本阴影	none
–stripe-color	input框在disabled状态时产生的条纹颜色	#0003
–stripe-deg	input框在disabled状态时产生的条纹角度	45
–disabled-filter	input框在disabled状态时的滤镜	opacity(80%) grayscale(100%)

标签属性	描述	默认值
white	input框的主题颜色为白色(适用于暗色背景)	无（可写可不写）
red	input框的主题颜色为红色(适用于校验不通过时)	无（可写可不写）

写在最后

以上就是这个组件库了，我感觉还是很酷炫，而且使用起来非常的简单，方便。适应于最基本的html，和所有前端框架。大家快去使用吧。

这里给出仓库地址和文档fancy-components文档
本博客参考你们有没有什么花哨点的组件库给我参考一下？

祝大家1024节日快乐呀。

分享给你一个酷炫的前端组件库，还不用起来？相关推荐

python随手记自动记账_菜鸟也疯狂！8分钟用Python做一个酷炫的家庭随手记
原标题:菜鸟也疯狂!8分钟用Python做一个酷炫的家庭随手记每个月都有各种各样的开销,不当家不知道柴米贵呀!柴米油盐酱醋茶样样都要开销,吃的穿的,各种开销,每个月都没有啥结余,小编月初是富人,月底 ...
利用GitHub搭建一个酷炫免费的个人博客
转载自公众号:python_shequ 由于公众号的文章不易后续整理阅读,于是小吴昨天上午花了半个小时使用 GitHub + Hexo 搭建了一下个人博客,打算将公众号的文章搬过去,支持关键字搜索.分 ...
超详细——手把手教你用threejs实现一个酷炫的模型发光扫描效果(三)
上一篇文章 voidjay,公众号:web前端可视化超详细--手把手教你用threejs实现一个酷炫的模型发光扫描效果(二) 上一篇文章已完成基本效果的实现,本文则完成整个项目的灵魂:发光效果以及模型 ...
html制作一个酷炫的记事本（源码）
文章目录 1.记事本风格和灵感 1.1 设计灵感 1.2 整体风格 2.代码展示 1.1 酷炫的记事本效果图 1.2 主代码源码下载 html制作一个酷炫的记事本(源码) 使用html实现记事本的完 ...
使用TextInputLayout分分钟构造一个酷炫登录框架
Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android Design Support Library,Android ...
超详细——手把手教你用threejs实现一个酷炫的模型发光扫描效果(一)
前言模型特效是大家在3d可视化项目所追求的,但很多人苦于无法实现一个好的模型效果,本次就手把手一步一步教你实现一个酷炫的模型发光扫描特效,帮让你的项目提升一个逼格.话不多说,先上效果: 本文所使用的 ...
如何开发一个酷炫的mdx
使用mdx开发一个酷炫的ppt 效果展示:mdx-deck-slide-decks MDX 是一种书写格式,允许你在 Markdown 文档中无缝地插入 JSX 代码. 你还可以导入(import ...
【有了可图网】PS实战系列64：用PS的3D功能设计制作一个酷炫的彩色立体字体
本篇教大家如何巧用PS的3D功能设计制作一个酷炫的彩色立体字体!教程讲解过程超详细,主要用到了PS的滤镜.调整层以及图层样式来完成效果,需转学起来! 彩色立体文字纹理素材链接链接:https://pa ...
用HTML、CSS写一个酷炫的动态搜索框
用HTML.CSS写一个酷炫的动态搜索框可伸展的动态搜索框! 复制粘贴即可用! HTML部分: <!DOCTYPE html> <html lang="en"& ...

分享给你一个酷炫的前端组件库，还不用起来？