Fancy components 是一个很酷的前端组件库

大家前端都用什么组件库?

我最近在前端发现了一个很酷的组件库。那是花哨的组件。这真的很酷”。如果你不想写复杂的样式,让我带你去了解这个组件库。

1、元件展示

翻译成中文是fancy components,就是fancy的意思。这真的有点花哨。

让我们来看看最基本的风格。

2、组件的用法和详细属性

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

一般html

您只需要将 type u003d "moudle" 导入脚本中,然后导入所需的组件并创建一个新组件。如图所示。

注意:引入时可以作为标签使用,但是驼峰命名方式必须在页面上拆分成小写,或者new时取别名。如果没有别名,则必须完整写入

<!-- <fc-typing-input placeholderu003d"username"></fc-typing-input> -->

<正文>

<fc-input placeholderu003d"用户名"></fc-input>

</正文>

<脚本类型u003d"模块">

从'https://Unpkg.import { FcTypingInput} COM/fancy components' //五星红旗

新的 FcTypingInput('fc-input')

</脚本>

在 Vue 2.0 中使用

首先安装组件库

npm i 花式组件

然后在组件中导入实例并使用它。如果要全局使用,可以在 main.js 中导入并实例化。

<模板>

<div>

<!-- 使用组件 -->

<fc-china></fc-china>

</div>

</模板>

<脚本>

import { FcChina } from 'fancy-components'//导入组件

new FcChina() //实例组件

导出默认 {

}

</脚本>

<样式>

</style>

1. Fc中国

这是一部精美的祖国国旗动画。我最喜欢这部动画,更喜欢我的国家。一个红色的民族。言归正传。

<正文>

<fc-china></fc-china>

</正文>

<脚本类型u003d"模块">

从“https://unpkg.com/fancy-components”导入 { FcChina}

新 FcChina()

</脚本>

相关的 css 属性

CSS 属性

描述

默认值

-宽度

组件宽度

300像素

-高度

组件高度

200像素

–星形描边颜色

进行描边动画时五个五角星的描边颜色

红色的

--star-fill-color

执行填充动画时五个五角星的填充颜色

红色的

– 标志笔划颜色

标志执行描边动画时的描边颜色

红色的

-延迟

延迟执行动画

0s

–杜尔

整个动画的执行时间

sh.shs

2. Fc气泡

这是为子元素添加分散感的气泡效果。也可以做自己喜欢的那种,点击的时候激活active为true,然后填上颜色。再次单击以取消颜色。

<正文>

<fc-气泡点击>

<img srcu003d"./aixin.png">

</fc-气泡>

</正文>

<脚本类型u003d"模块">

从“https://unpkg.com/fancy-components”导入 { FcBubbles }

新的 FcBubbles()

</脚本>

CSS 属性

描述

默认值

-宽度

组件宽度

适合内容

-高度

组件高度

适合内容

-颜色

填色

#1cd

标签属性

描述

默认值

积极的

使用active属性控制气泡动态效果的显示和隐藏('true','false')

错误的

点击

点击鼠标控制气泡动态效果的显示和隐藏

无效的

3. FcWaveFilter

这可以用作页面加载。我觉得挺好看的,还是资源获取不到的场景。

<正文>

<fc 滤波器>

<img srcu003d"./apple.png">

</fc-wave-filter>

</正文>

<脚本类型u003d"模块">

从“https://unpkg.com/fancy-components”导入 { FcWaveFilter}

新的 FcWaveFilter()

</脚本>

CSS 属性

CSS 属性

描述

默认值

-宽度

组件宽度

适合内容

-高度

组件高度

适合内容

-颜色

填充波的颜色

黑色

标签属性

描述

默认值

颜色

填充波的颜色

黑色

振幅

波幅(数量(原始波幅的倍数))

1

标志笔划颜色

执行描边动画时的描边颜色

红色的

延迟

填充后的持续时间

0s

杜尔

整个动画的执行时间

sh.shs

模式

动画模式('alpha','luminance','img'(图片),'slideshow'(slide))

α

间隔

每隔几秒切换一次(适合滑动模式)

0

4. FcWarpBtn

这个是一侧倾斜的。我觉得可以当做标签按钮,还是很不错的。

<正文>

<fc-warp-btn>

登录

</fc-warp-btn>

</正文>

<脚本类型u003d"模块">

从“https://unpkg.com/fancy-components”导入 { FcWarpBtn}

新的 FcWarpBtn()

</脚本>

CSS 属性

描述

默认值

-宽度

组件宽度

200像素

-高度

组件高度

40像素

-颜色

组件的背景颜色

#1cd

--阴影颜色

组件阴影颜色

rgba(0, 0, 0, .5)

标签属性

描述

默认值

文本对齐

文字排列('左'、'居中'、'右')

正确的

5.FcDblWarpBtn

这颗纽扣的款式与前面的相比没有孔,两端向上翘起。您可以自己调整阴影和背景颜色。替换大多数按钮看起来不错。

<正文>

<fc-dbl-warp-btn>

登录

</fc-dbl-warp-btn>

</正文>

<脚本类型u003d"模块">

从“https://unpkg.com/fancy-components”导入 { FcDblWarpBtn}

新的 FcDblWarpBtn()

</脚本>

CSS 属性

描述

默认值

-宽度

组件宽度

180像素

-高度

组件高度

40像素

-颜色

组件的背景颜色

#1cd

--阴影颜色

组件颜色

rgba(0, 0, 0, .5)

6.Fc3DBtn

这个按钮看起来很立体。您可以根据自己的喜好着色。

<正文>

<fc-3D-btn>

登录

</fc-3D-btn>

</正文>

<样式>

fc-3D-btn{

颜色:鲑鱼;

--cover-color:rgb(17, 0, 255);

--阴影颜色:红色;

--inset-shadow-color:rgb(0, 195, 255);

}

</style>

<脚本类型u003d"模块">

从“https://unpkg.com/fancy-components”导入 { FcDblWarpBtn}

新的 FcDblWarpBtn()

</脚本>

CSS 属性

描述

默认值

-宽度

组件宽度

100像素

-高度

组件高度

36像素

-颜色

组件内字体的颜色

#说话

--阴影颜色

组件的阴影颜色

#0008

–封面颜色

组件凸起部分的颜色

#0005

–插图阴影颜色

组件中的阴影颜色

#fffc

–插图阴影颜色

单击按钮时组件中阴影的颜色

var(--inset-shadow-color)

7. FcRoundBtn

这是形状周围的动画按钮。它看起来很舒服。

<正文>

<fc-round-btn>

登录

</fc-round-btn>

</正文>

<脚本类型u003d"模块">

从“https://unpkg.com/fancy-components”导入 { FcRoundBtn}

新的 FcRoundBtn()

</脚本>

CSS 属性

描述

默认值

-宽度

组件宽度

100像素

-高度

组件高度

40像素

-颜色

组件颜色

#1cd

8. Fc下划线按钮

这是一个带下划线的按钮,但是当您将鼠标悬停在鼠标上时会出现很酷的动画。

<正文>

<fc-下划线-btn>

登录

</fc-underline-btn>

</正文>

<脚本类型u003d"模块">

从“https://unpkg.com/fancy-components”导入 { FcUnderlineBtn}

新的 FcUnderlineBtn()

</脚本>

CSS 属性

描述

默认值

-宽度

组件宽度

100像素

-高度

组件高度

30像素

-颜色

组件颜色

#1cd

9. FcParenthesesBtn

<正文>

<fc-括号-btn>

登录

</fc-括号-btn>

</正文>

<脚本类型u003d"模块">

从“https://unpkg.com/fancy-components”导入 { FcParenthesesBtn}

新的 FcParenthesesBtn()

</脚本>

CSS 属性

描述

默认值

-宽度

组件宽度

80像素

-高度

组件高度

30像素

-颜色

组件颜色

#1cd

10.FcPixelBtn

这有点像 FcRoundBtn 按钮,但动画效果不同。

<正文>

<fc-像素-btn>

登录

</fc-pixel-btn>

</正文>

<脚本类型u003d"模块">

从“https://unpkg.com/fancy-components”导入 { FcPixelBtn}

新的 FcPixelBtn()

</脚本>

CSS 属性

描述

默认值

-宽度

组件宽度

100像素

-高度

组件高度

40像素

-颜色

组件颜色

#1cd

11. FcArrowBtn

我认为这个按钮是最常用的。有足够的B空间返回,哈哈。

<正文>

<fc-箭头-btn>

返回

</fc-arrow-btn>

</正文>

<脚本类型u003d"模块">

从“https://unpkg.com/fancy-components”导入 { FcArrowBtn}

新的 FcArrowBtn()

</脚本>

CSS 属性

描述

默认值

-宽度

组件宽度

100像素

-高度

组件高度

30像素

-颜色

组件颜色

#1cd

12. FcTypingInput

这是我最喜欢的输入框。瞬间感觉高端霸气上档次。我放不下。

<正文>

<fc-typing-input placeholderu003d"用户名"></fc-typing-input>

</正文>

<脚本类型u003d"模块">

从“https://unpkg.com/fancy-components”导入 { FcTypingInput}

新的 FcTypingInput()

</脚本>

CSS 属性

描述

默认值

-宽度

组件宽度

220 像素

-高度

组件高度

40像素

-颜色

整体颜色

#咖啡厅

-边框颜色

边框颜色

#咖啡厅

–边框颜色悬停

悬停状态下的边框颜色

var(-颜色)

--border-color-focus

焦点状态下的边框颜色

var(–border-color-hover)

--边界半径

鱼片

4像素

--box-shadow-focus

焦点状态下的输入框阴影

0 0 6px var(–border-color-focus)

– 圆形颜色

输入框中小圆点无值且未处于焦点状态时的颜色

#0003

–圆形颜色悬停

输入框中小圆点无值且处于悬停状态时的颜色

var(--圆圈颜色)

--占位符颜色

占位符的颜色

#0005

--占位符颜色焦点

输入框处于焦点状态时占位符的颜色

var(–border-color-focus)

--占位符动画颜色

输入框中执行动画时占位符的颜色

红色的

–占位符动画标题颜色

输入框头部动画时占位符的颜色

#00ff6b

--占位符-阴影

占位符的文字阴影

没有任何

–条纹颜色

输入框处于禁用状态时产生的条纹颜色

#0003

• 剥离你

输入框在禁用状态下生成的边缘角

45

–禁用过滤器

输入框禁用时过滤

不透明度(80%) 灰度(100%)

标签属性

描述

默认值

白色的

输入框主题颜色为白色(用于深色背景)

无(可选)

红色的

输入框主题色为红色(验证失败时适用)

无(可选)

写在最后

以上是组件库。我还是觉得很爽,用起来也很简单方便。适用于最基本的html和所有前端框架。让我们去使用它。

这里给出仓库地址和文件花式组件文件

本篇博客参考有没有花哨的组件库给我参考?

祝大家节日快乐。