React移动网页应用界面模板

带搜索、画布外菜单、图文列表和分享按钮。

react, template

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2144
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

class Main extends React.Component {
    render() {
        return ( < div className = 'container' >
            < Phone / >
            < /div>
        );
    }
}

class Phone extends React.Component {

constructor() {
        super();
        this.state = {
            isActive: false
        }
    }

generateSidebarContent() {
        if (!this.state.isActive) {
            return null;
        }
        return ( < div className = 'sidebar__content-container' >
            < div className = 'sidebar__circle' >
            < /div> < /div>
        )
    }

generateSidebar() {
        const isActive = this.state.isActive ? 'active' : '';
        return ( < div className = {
            `sidebar ${isActive}`
        } > {
            this.generateSidebarContent()
        } < /div>)
    }

render() {
        const fontAwesomeClass = this.state.isActive ? 'chevron-left' : 'bars';
        return ( < div className = 'phone' >
            < div className = 'phone__header' >
            < span className = {
                `fa fa-${fontAwesomeClass}`
            }
            onClick = {
                () => this.setState({
                    isActive: !this.state.isActive
                })
            }
            /> < h3 > Dope App < /h3> < span className = 'fa fa-search' / >
            < /div> < div className = 'phone-content__wrapper' > {
                this.generateSidebar()
            } < PhoneContent color = 'green' / >
            < PhoneContent color = 'blue' / >
            < PhoneContent color = 'yellow' / >
            < PhoneContent color = 'red' / >
            < /div> < Help / >
            < /div>
        );
    }
}

class PhoneContent extends React.Component {

constructor() {
        super();
        this.state = {
            isActive: false
        }
    }

generateInnerContent() {
        if (!this.state.isActive) {
            return null;
        }
        return ( < div className = 'inner-content' >
            < div className = 'inner-content__square' >
            < /div> < /div>
        )

}

render() {
        const className = this.state.isActive ? 'active' : '';
        return ( < div className = {
                `phone-content ${className}`
            }
            onClick = {
                () => this.setState({
                    isActive: !this.state.isActive
                })
            } >
            < div className = {
                `phone-content__hero ${this.props.color}`
            } >
            < /div> < div className = 'phone-content__footer' >
            < div className = 'phone-content__circle' > < /div> < div className = 'phone-content__line-wrapper' >
            < div className = 'phone-content__line' > < /div> < div className = 'phone-content__line phone-content__line--two' > < /div> < /div> < /div> {
                this.generateInnerContent()
            } < /div>
        );
    }
}

class Help extends React.Component {

constructor() {
        super();
        this.state = {
            isActive: false
        }
    }
    render() {
        const helpClass = this.state.isActive ? 'active' : '';
        return ( < div className = 'help-wrapper' >
            < div className = {
                `help help--small${helpClass} help--small-1`
            } >
            < a href = 'https://twitter.com/McGreenBeats'
            target = "_blank" >
            < span className = {
                `fa fa-twitter`
            }
            /> < /a> < /div> < div className = {
                `help help--small${helpClass} help--small-2`
            } >
            < a href = 'https://mattgreenberg.co'
            target = "_blank" >
            < span className = {
                `fa fa-user`
            }
            /> < /a> < /div> < div className = {
                `help help--small${helpClass} help--small-3`
            } >
            < a href = 'http://codepen.io/mattgreenberg/'
            target = "_blank" >
            < span className = {
                `fa fa-magic`
            }
            /> < /a> < /div> < div className = 'help'
            onClick = {
                () => this.setState({
                    isActive: !this.state.isActive
                })
            } >
            < span className = {
                `fa fa-plus ${helpClass}`
            }
            /> < /div> < /div>
        )
    }
}

ReactDOM.render( < Main / > , document.getElementById('app'));

编译

CSS

body {
    margin: 0;
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(180deg);
    }
}
@keyframes spinBack {
    0% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
* {
    position: relative;
    font-family: Heebo;
}
.container {
    background: #429ed6;
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.phone {
    max-width: 23em;
    width: 100%;
    height: 80%;
    background: #efebde;
    overflow-y: scroll;
    overflow-x: hidden;
    box-shadow: 0px 0px 10px 3px #2984bc;
    border-top: 15px solid gray;
    border-left: 15px solid gray;
    border-right: 15px solid gray;
}
.phone__header {
    width: 23em;
    height: 5em;
    background: #7bb2d6;
    position: fixed;
    z-index: 100;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: white;
    overflow-x: hidden;
}
.phone__header h3 {
    font-size: 1em;
    margin: 0;
}
.phone__header span {
    font-size: 1.3em;
    font-weight: lighter;
    cursor: pointer;
}
.phone-content__wrapper {
    padding: 0.5em;
    margin-top: 5em;
}
.phone-content {
    background: white;
    border-radius: 10px;
    margin-bottom: 1em;
    height: 15em;
    cursor: pointer;
    transition: height 0.2s;
}
.phone-content.active {
    top: 0;
    width: 100%;
    height: 30em;
}
.phone-content.active .phone-content__hero {
    width: auto;
}
.phone-content__hero {
    width: 100%;
    height: 10em;
    background: #94d7bd;
    border-radius: 10px 10px 0px 0px;
}
.phone-content__hero.blue {
    background: #b5cbde;
}
.phone-content__hero.yellow {
    background: #efdb84;
}
.phone-content__hero.red {
    background: #e69ea9;
}
.phone-content__footer {
    height: 4em;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 1em;
    flex-wrap: wrap;
}
.phone-content__circle {
    height: 2.5em;
    width: 2.5em;
    border-radius: 50%;
    background: #efebde;
}
.phone-content__line {
    width: 12em;
    height: 0.75em;
    background: #efebde;
    border-radius: 10px;
    margin-left: 1em;
    margin-bottom: 0.5em;
    margin: 0.5em 0 0.5em 1em;
}
.phone-content__line--two {
    width: 8em;
}
.inner-content {
    width: 100%;
    text-align: center;
}
.inner-content__square {
    height: 10em;
    width: 10em;
    margin: 1em auto;
    background: #efebde;
    animation: fadeInUp 0.75s;
}
.help {
    height: 3.5em;
    width: 3.5em;
    background: #d66173;
    border-radius: 50%;
    position: fixed;
    top: 90%;
    margin-left: 18em;
    transform: translateX(-50%) translateY(-50%);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}
.help span {
    font-size: 2em;
    text-shadow: 2px 3px 3px #cb394f;
    animation: spinBack 0.5s linear forwards;
}
.help span.active {
    animation: spin 0.4s linear forwards;
}
.help--small {
    background: #e18997;
    top: 90% !important;
    margin-left: 18em !important;
    transition: 0.2s;
}
.help--small-1 {
    top: 85%;
    margin-left: 15.5em;
    height: 2.5em;
    width: 2.5em;
    transition: 0.2s;
}
.help--small-1 span {
    font-size: 1.5em;
    color: white;
}
.help--small-2 {
    margin-left: 14em;
    height: 2.5em;
    width: 2.5em;
    transition: 0.2s;
    transition-delay: 0.2s;
}
.help--small-2 span {
    font-size: 1.5em;
    color: white;
}
.help--small-3 {
    top: 95.5%;
    margin-left: 15em;
    height: 2.5em;
    width: 2.5em;
    transition: 0.2s;
    transition-delay: 0.1s;
}
.help--small-3 span {
    font-size: 1.5em;
    color: white;
}
.sidebar {
    height: 100%;
    width: 10em;
    background: #333;
    z-index: 10;
    left: 0;
    top: 0;
    position: absolute;
    transform: translateX(-100%);
    transition: 0.2s;
    display: flex;
    justify-content: center;
}
.sidebar.active {
    transform: translateX(0%);
}
.sidebar__content-container {
    text-align: center;
}
.sidebar__circle {
    height: 5em;
    width: 5em;
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/377560/11303439.jpg) no-repeat center center/cover;
    background-size: cover;
    border: 4px solid lightgray;
    border-radius: 50%;
    animation: fadeInLeft 0.8s;
    margin-top: 1em;
    box-shadow: 2px 2px 4px;
}

HTML

带搜索、画布外菜单、图文列表和分享按钮。

react, template

编辑器支持Emmet

快捷键

带搜索、画布外菜单、图文列表和分享按钮。

react, template

HTML5 Zepto.js 移动版本（微信H5）的2015春节回家温情动画网页应用模板

使用React.js实现面包奶酪片在线购买页面模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：