React 的动画汉堡菜单图标 (1.5 KB) :hamburger:-源码

上传者: 42099858 | 上传时间: 2021-06-09 13:04:01 | 文件大小: 1.09MB | 文件类型: ZIP
‌‌ React 的动画汉堡菜单图标 React 的汉堡菜单图标,带有 CSS 驱动的转换。 旨在尽可能优雅和高性能。 这意味着没有 JavaScript 动画,没有非廉价属性的过渡和小尺寸。 安装 npm install hamburger-react 大小当使用一个汉堡包时,大约 1.5 KB 将被添加到您的包中 (min + gzip)。 用法 访问网站以获取完整的文档、API 和示例。 一个基本的实现如下: import Hamburger from 'hamburger-react' const [isOpen, setOpen] = useState(false) 或者不提供您自己的状态: ...} /> 又一个汉堡包库? 是的。 自 2015 年创建这些汉堡以来,出现了许多类似的汉堡,但存在以下一个或多个缺点: 感觉不自然的动画 昂贵属性的转换(生涩的动画) 没有 React 支持 大小(除了 React 或没有摇树) 不可定制,或太可定制(没有合理的默认值) 做太多辅助功能 建议点击/点击区域至少为 48x48 像素。 因此,将在图标周围添加填充以创建与此大小完全相同的

文件下载

资源详情

[{"title":"( 76 个子文件 1.09MB ) React 的动画汉堡菜单图标 (1.5 KB) :hamburger:-源码","children":[{"title":"hamburger-react-master","children":[{"title":"docs","children":[{"title":"colors.js <span style='color:#111;'> 2.02KB </span>","children":null,"spread":false},{"title":"package.json <span style='color:#111;'> 630B </span>","children":null,"spread":false},{"title":".prettierrc <span style='color:#111;'> 43B </span>","children":null,"spread":false},{"title":".prettierignore <span style='color:#111;'> 45B </span>","children":null,"spread":false},{"title":"package-lock.json <span style='color:#111;'> 716.57KB </span>","children":null,"spread":false},{"title":"static","children":[{"title":"logo@2x.png <span style='color:#111;'> 8.73KB </span>","children":null,"spread":false},{"title":"favicon-32x32.png <span style='color:#111;'> 2.18KB </span>","children":null,"spread":false},{"title":"hamburger-react.jpg <span style='color:#111;'> 12.90KB </span>","children":null,"spread":false},{"title":"favicon-16x16.png <span style='color:#111;'> 1.25KB </span>","children":null,"spread":false},{"title":"logo.png <span style='color:#111;'> 3.26KB </span>","children":null,"spread":false},{"title":"preview.gif <span style='color:#111;'> 811.87KB </span>","children":null,"spread":false},{"title":"favicon.ico <span style='color:#111;'> 14.73KB </span>","children":null,"spread":false}],"spread":true},{"title":"gatsby-config.js <span style='color:#111;'> 100B </span>","children":null,"spread":false},{"title":"src","children":[{"title":"pages","children":[{"title":"index.tsx <span style='color:#111;'> 1.47KB </span>","children":null,"spread":false},{"title":"404.tsx <span style='color:#111;'> 482B </span>","children":null,"spread":false}],"spread":true},{"title":"html.tsx <span style='color:#111;'> 2.46KB </span>","children":null,"spread":false},{"title":"components","children":[{"title":"header.tsx <span style='color:#111;'> 848B </span>","children":null,"spread":false},{"title":"installation.tsx <span style='color:#111;'> 650B </span>","children":null,"spread":false},{"title":"property.tsx <span style='color:#111;'> 1.42KB </span>","children":null,"spread":false},{"title":"version.tsx <span style='color:#111;'> 515B </span>","children":null,"spread":false},{"title":"accessibility.tsx <span style='color:#111;'> 964B </span>","children":null,"spread":false},{"title":"example.tsx <span style='color:#111;'> 782B </span>","children":null,"spread":false},{"title":"menu.tsx <span style='color:#111;'> 1.15KB </span>","children":null,"spread":false},{"title":"cards.tsx <span style='color:#111;'> 5.18KB </span>","children":null,"spread":false},{"title":"information.tsx <span style='color:#111;'> 615B </span>","children":null,"spread":false},{"title":"footer.tsx <span style='color:#111;'> 1.73KB </span>","children":null,"spread":false},{"title":"card.tsx <span style='color:#111;'> 2.28KB </span>","children":null,"spread":false},{"title":"properties.tsx <span style='color:#111;'> 7.04KB </span>","children":null,"spread":false},{"title":"wrap.tsx <span style='color:#111;'> 324B </span>","children":null,"spread":false},{"title":"heading.tsx <span style='color:#111;'> 243B </span>","children":null,"spread":false}],"spread":false}],"spread":true},{"title":"tsconfig.json <span style='color:#111;'> 141B </span>","children":null,"spread":false},{"title":"gatsby-browser.js <span style='color:#111;'> 28B </span>","children":null,"spread":false},{"title":".gitignore <span style='color:#111;'> 14B </span>","children":null,"spread":false},{"title":"tailwind.config.js <span style='color:#111;'> 461B </span>","children":null,"spread":false},{"title":"styles","children":[{"title":"index.css <span style='color:#111;'> 37B </span>","children":null,"spread":false}],"spread":false},{"title":"postcss.config.js <span style='color:#111;'> 281B </span>","children":null,"spread":false},{"title":"gatsby-node.js <span style='color:#111;'> 323B </span>","children":null,"spread":false}],"spread":false},{"title":"package.json <span style='color:#111;'> 1.96KB </span>","children":null,"spread":false},{"title":"readme.md <span style='color:#111;'> 1.91KB </span>","children":null,"spread":false},{"title":"jest.config.js <span style='color:#111;'> 84B </span>","children":null,"spread":false},{"title":"tests","children":[{"title":"interaction.test.tsx <span style='color:#111;'> 536B </span>","children":null,"spread":false},{"title":"easing.test.tsx <span style='color:#111;'> 482B </span>","children":null,"spread":false},{"title":"size.test.tsx <span style='color:#111;'> 401B </span>","children":null,"spread":false},{"title":"general.test.tsx <span style='color:#111;'> 2.19KB </span>","children":null,"spread":false},{"title":"toggle.test.tsx <span style='color:#111;'> 356B </span>","children":null,"spread":false},{"title":"toggled.test.tsx <span style='color:#111;'> 726B </span>","children":null,"spread":false},{"title":"direction.test.tsx <span style='color:#111;'> 543B </span>","children":null,"spread":false},{"title":"color.test.tsx <span style='color:#111;'> 441B </span>","children":null,"spread":false},{"title":"duration.test.tsx <span style='color:#111;'> 664B </span>","children":null,"spread":false},{"title":"distance.test.tsx <span style='color:#111;'> 1.44KB </span>","children":null,"spread":false},{"title":"rounded.test.tsx <span style='color:#111;'> 426B </span>","children":null,"spread":false},{"title":"hideOutline.test.tsx <span style='color:#111;'> 406B </span>","children":null,"spread":false},{"title":"onToggle.test.tsx <span style='color:#111;'> 710B </span>","children":null,"spread":false},{"title":"jest.setup.ts <span style='color:#111;'> 35B </span>","children":null,"spread":false},{"title":"label.test.tsx <span style='color:#111;'> 286B </span>","children":null,"spread":false}],"spread":false},{"title":"package-lock.json <span style='color:#111;'> 439.41KB </span>","children":null,"spread":false},{"title":"src","children":[{"title":"Spiral.tsx <span style='color:#111;'> 1.35KB </span>","children":null,"spread":false},{"title":"Spin.tsx <span style='color:#111;'> 1.60KB </span>","children":null,"spread":false},{"title":"Tilt.tsx <span style='color:#111;'> 1.68KB </span>","children":null,"spread":false},{"title":"Pivot.tsx <span style='color:#111;'> 2.08KB </span>","children":null,"spread":false},{"title":"Fade.tsx <span style='color:#111;'> 1.46KB </span>","children":null,"spread":false},{"title":"Twirl.tsx <span style='color:#111;'> 2.34KB </span>","children":null,"spread":false},{"title":"Squeeze.tsx <span style='color:#111;'> 1.91KB </span>","children":null,"spread":false},{"title":"Turn.tsx <span style='color:#111;'> 1.48KB </span>","children":null,"spread":false},{"title":"Burger.tsx <span style='color:#111;'> 2.24KB </span>","children":null,"spread":false},{"title":"Squash.tsx <span style='color:#111;'> 2.30KB </span>","children":null,"spread":false},{"title":"Slant.tsx <span style='color:#111;'> 1.39KB </span>","children":null,"spread":false},{"title":"Divide.tsx <span style='color:#111;'> 3.04KB </span>","children":null,"spread":false},{"title":"Cross.tsx <span style='color:#111;'> 1.25KB </span>","children":null,"spread":false},{"title":"index.ts <span style='color:#111;'> 2.33KB </span>","children":null,"spread":false},{"title":"Rotate.tsx <span style='color:#111;'> 1.35KB </span>","children":null,"spread":false},{"title":"Sling.tsx <span style='color:#111;'> 1.67KB </span>","children":null,"spread":false}],"spread":false},{"title":"tsconfig.json <span style='color:#111;'> 232B </span>","children":null,"spread":false},{"title":"license.md <span style='color:#111;'> 1.05KB </span>","children":null,"spread":false},{"title":".gitignore <span style='color:#111;'> 30B </span>","children":null,"spread":false},{"title":"babel.config.js <span style='color:#111;'> 419B </span>","children":null,"spread":false}],"spread":false}],"spread":true}]

评论信息

免责申明

【只为小站】的资源来自网友分享,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,【只为小站】 无法对用户传输的作品、信息、内容的权属或合法性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论 【只为小站】 经营者是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。
本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二条之规定,若资源存在侵权或相关问题请联系本站客服人员,zhiweidada#qq.com,请把#换成@,本站将给予最大的支持与配合,做到及时反馈和处理。关于更多版权及免责申明参见 版权及免责申明