react实现折叠便签记事本待办事项代码
代码语言:html
所属分类:其他
代码描述:react实现折叠便签记事本待办事项代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import 'https://fonts.googleapis.com/css?family=Indie+Flower'; @media screen and (min-width: 1px) { html { font-size: 14px; } } @media screen and (min-width: 768px) { html { font-size: 16px; } } body { position: absolute; top: 0; margin: 0; padding-top: 1em; color: #1e1e1e; width: 100%; height: 100%; background-color: #1a1a1a; } h1, h2, p, a { margin: 0; line-height: 1.48; } h1 { font-size: 4rem; font-family: "Indie Flower"; color: #e6e6e6; } h2 { font-size: 1.8rem; } p, a, button, input { font-size: 1rem; } p { margin-top: 1em; } a { text-decoration: none; color: #f2590d; } a:hover { text-decoration: underline; } .container { max-width: 100vw; height: 80vh; } @media screen and (min-width: 1px) { .container { padding: 0; } } @media screen and (min-width: 768px) { .container { padding-left: 5vw; padding-right: 5vw; } } @media screen and (min-width: 1366px) { .container { padding-left: 20vw; padding-right: 20vw; } } button { border: none; cursor: pointer; padding: 1em; transition: background-color 0.2s; } button:hover { color: #f2590d; } input { background-color: transparent; border: none; border-bottom: 3px solid #4d4d4d; padding: 0.5em 0.5em 0; margin-left: 0.5em; margin-right: 2em; } form p { padding: 1em; margin: 0; } footer { color: #e6e6e6; text-align: center; margin-bottom: 2em; font-family: "Indie Flower"; font-size: 1.2em; } footer a { font-size: 1.2em; } .recipe-box { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; } [role=tablist] { padding: 2em; margin-bottom: 1em; width: 30vw; min-width: 40em; font-family: "Indie Flower"; font-size: 1.2em; } .recipes { perspective: 800px; } .recipe { background-color: #cccccc; overflow: hidden; transition: transform 0.5s; } .recipe:nth-child(2n) { background-color: #bfbfbf; } .recipe.is-new { transform: rotateX(-90deg); } [role=tab] { position: relative; padding: 1em; cursor: pointer; text-transform: capitalize; background-color: transparent; transition: background-color 0.2s, color 0.2s; z-index: 1; } [role=tab]:hover, [role=tab][aria-selected=true] { background-color: #f2590d; color: #e6e6e6; } [role=tabpanel] { padding: 0 1em; transition: transform 0.2s; text-transform: capitalize; } [role=tabpanel][aria-expanded=false] { height: 0; transform: translateY(-100em); } [role=tabpanel][aria-expanded=true] { height: auto; transform: none; } .perspective, .perspective + * .perspective:nth-child(2n), .perspective:nth-child(2n) + * .perspective { transform: rotateX(-20deg); transform-origin: bottom; background-color: #d6d6c2; border-top: 1px solid #ebebe0; } .perspective:nth-child(2n), .perspective:nth-child(2n) + * .perspective:nth-child(2n), .perspective + * .perspective { transform: rotateX(20deg); transform-origin: top; margin-bottom: -8px; background-color: #ccccb3; border-top: 1px solid #adad85; border-bottom: 1px solid #c2c2a3; } button.perspective, .perspective + * button.perspective:nth-child(2n), .perspective:nth-child(2n) + * button.perspective { width: 100%; background-color: #333333; color: #e6e6e6; padding: 1em; font-size: 1.2em; border-top-color: #4d4d4d; } button.perspective:nth-child(2n), .perspective + * button.perspective, .perspective:nth-child(2n) + * button.perspective:nth-child(2n) { background-color: #262626; border-top-color: black; border-bottom-color: #1a1a1a; margin-bottom: 0; } button.perspective:hover, .perspective > button:hover, .perspective + * button.perspective:nth-child(2n):hover, .perspective:nth-child(2n) + * button.perspective:hover { background-color: #f2590d; } .color-brand-1 { color: #f2b90d; } .color-brand-2 { color: #f2590d; } .flex-center { display: flex; justify-content: center; align-items: center; } .flex-center-col { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 80vh; } .text-center { text-align: center !important; } </style> </head> <body > <div id="app" data-app></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.15.4.2.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.15.4.2.js"></script> <script > if (!localStorage._mikecornish_recipes || typeof JSON.parse(localStorage._mikecornish_recipes)[0] != 'object') { const recipes = [ { name: 'rice pudding', ingredients: [ 'rice', 'brown sugar', 'milk'] }, { name: 'corn pudding', ingredients: [ 'corn', 'eggs', 'milk', 'sugar', 'butter'] }]; localStorage._mikecornish_recipes = JSON.stringify(recipes); } const EditButton = React.createClass({ displayName: "EditButton", render() { return /*#__PURE__*/( React.createElement("button", { type: "button", onClick: this.props.edit }, "Edit")); } }); const DeleteButton = React.createClass({ displayName: "DeleteButton", remove(e) { e.preventDefault(); this.props.remove(); }, render() { return /*#__PURE__*/( React.createElement("button", { onClick: this.remove }, "Delete")); } }); const Recipe = React.createClass({ displayName: "Recipe", propTypes: { recipe: React.PropTypes.shape({ name: React.PropTypes.string, ingredients: React.PropTypes.array }) }, getInitialState() { return { isOpen: false, editing: false, isNew: true }; }, componentDidMount(e) { this.setState({ 'isNew': false }); }, setOpen(bool) { this.setState({ 'isOpen': bool }); }, toggleOpen() { const state = this.state.isOpen; this.setState({ 'isOpen': !state }); }, startEdit() { this.setState({ 'editing': true }); }, update(e) { e.preventDefault(); const recipe = { name: this.props.recipe.name, ingredients: $(e.target).find('#ingredients').val().replace(/, /g, ',&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0