avatar
文章
2203
标签
34
分类
0
首頁
目录
标签
友鏈
关于
Logo阿超chakra-ui 返回首页
搜索
首頁
目录
标签
友鏈
关于

chakra-ui

发表于2024-01-14|更新于2026-02-24
|浏览量:

对人生命最大的威胁是以车代步,而不是交通事故。——怀特

分享一个很好看的react的UI组件库chakra-ui:

https://chakra-ui.com/

https://github.com/chakra-ui/chakra-ui

前端
上一篇
纯css实现炫酷头像效果
官僚作风是一门使可能变成不可能的艺术。——萨尔塞多 分享一个炫酷头像效果: 从b站渡一教育的一个视频看到的(不是推广,只是注明出处) 123456789101112131415161718192021222324252627282930313233343536373839<style> img { --s: 280px; --c1: #c02942; --c2: #ecd078; --b: 5px; --f: 1; --bgOption: content-box no-repeat center/ calc(100% / var(--f)) 100%; --shrink: calc((var(--s) / var(--f) - var(--s)) / 2 - var(--b)); width: var(--s); height: var(--s); cursor: pointer; transition: 0.5s; padding-top: 100px; outline: ...
下一篇
AtomicReference新jdk特性
对人生命最大的威胁是以车代步,而不是交通事故。——怀特 对应的单元测试: 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818...
相关推荐
2025-05-03
hoppscotch
往往有这样的情形:为科学和技术开拓新道路的,有时并不是科学界的著名人物,而是科学界毫不知名的人物,平凡的人物,实践家,工作革新者。 —— 斯大林 https://github.com/hoppscotch/hoppscotch/ https://hoppscotch.io/ Hoppscotch:开源 API 开发生态系统在现代 Web 开发中,API 是核心组件之一,开发者需要一套高效、可靠的工具来测试和开发 API。Hoppscotch 是一个开源的 API 开发生态系统,提供了强大且简洁的功能,作为 Postman 和 Insomnia 的开源替代品,正在受到越来越多开发者的青睐。 什么是 Hoppscotch?Hoppscotch 是一个轻量级且功能丰富的 API 客户端,专为开发者设计。它支持 HTTP 请求测试、GraphQL 查询、WebSocket 调试等功能,同时提供了现代化的用户界面和高效的工作流,帮助开发者快速完成 API 的开发和测试。 核心特点: 跨平台支持:Hoppscotch 是一个 Progressive Web App (PWA),可在浏览...
2023-07-30
悬停卡片效果
人在无端微笑时,不是百无聊赖,就是痛苦难当。——王小波 分享一个通过css实现的卡片悬停效果 代码地址:cards: 悬浮卡片 在线演示:Document
2020-09-02
js获取url上的参数
获取url上的参数 123456789101112function getUrlParam(name) { if (name == null) { return name; } var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) { //return unescape(r[2]); return r[2]; } return null; } 1console.log(getUrlParam("id"));
2025-07-01
antdesign3.x中Form.create之后拿ref
相关PR: https://github.com/apache/shenyu-dashboard/pull/534 文档在此: 表单 Form - Ant Design 经过 Form.create 之后如果要拿到 ref,可以使用 rc-form 提供的 wrappedComponentRef,详细内容可以查看这里。 123456class CustomizedForm extends React.Component { ... }// use wrappedComponentRefconst EnhancedForm = Form.create()(CustomizedForm);<EnhancedForm wrappedComponentRef={(form) => this.form = form} />this.form // => The instance of CustomizedForm 如何在函数组件中拿到 form 实例?#你需要通过 forwardRef 和 useImperativeH...
2021-09-06
置顶小标签
美色不同面,皆佳于目;悲音不共声,皆快于耳。——王充 原理是通过一个红色div加红色背景颜色,旋转45后度再整个边框设置超出部分隐藏 效果如下: 代码: 12345<div class="top-article-tag-parent"> <div class="top-article-tag"> 置顶 </div></div> 样式: 123456789101112131415161718.top-article-tag-parent { overflow: hidden; position: absolute; right: 46rpx; height: 80rpx; width: 100rpx; zoom: 0.8;}.top-article-tag { color: #fff; background-color: #ff0000; width: 150rpx; height: 40rpx; text-align: cente...
2025-05-15
wangeditor自定义菜单
时间是衡量事业的标准。 —— 培根 代码如下: 123456789101112131415161718192021222324252627282930313233import { DomEditor, IButtonMenu, IDomEditor, ISelectMenu } from '@wangeditor/editor'export class MentionMenu implements IButtonMenu { constructor() { this.title = '设置标签' // this.iconSvg = '<svg >...</svg>' this.tag = 'button' } title: string iconSvg?: string | undefined hotkey?: string | undefined alwaysEnable?: boolean ...
avatar
阿超
我的名字叫阿超 年龄25岁 家在北京市 职业是软件开发 每天最晚也会在八点前回家 不抽烟 酒浅尝辄止 晚上十二点上床 保证睡足八个小时 睡前写一篇博客 再做二十分钟俯卧撑暖身 然后再睡觉 基本能熟睡到天亮 像婴儿一样不留下任何疲劳和压力 就这样迎来第二天的早晨 健康检查结果也显示我很正常 我想说明我是一个不论何时都追求内心平稳的人 不拘泥于胜负 不纠结于烦恼 不树立使我夜不能寐的敌人 这就是我在这社会的生活态度
文章
2203
标签
34
分类
0
Follow Me
公告
This is my Blog
最新文章
coding-interview-university2026-06-09
Open-LLM-VTuber2026-06-08
cosmos2026-06-07
spec-kit2026-06-06
headroom2026-06-05
© 2025 - 2026 By 阿超框架 Hexo 8.1.1|主题 Butterfly 5.5.4
搜索
数据加载中