使用ReactJS实现的用户档案界面组件

React Profile Component

react, user, profile

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

var App = React.createClass({
    displayName: 'App',

getDefaultProps: function getDefaultProps() {
        return {
            person: {
                name: 'Jack-Edward Oliver',
                biography: '26 year old Designer / Developer living in Stockholm. Originally from Oxford, England. Love to make stuff.'
            },
            image: '/uploads/161001/lighten1.jpg',
            quote: {
                content: 'Beautiful things don\'t ask for attention',
                source: 'The Secret Life of Walter Mitty'
            }

};
    },
    render: function render() {
        return React.createElement(
            'div', {
                className: 'App'
            },
            React.createElement(Image, {
                src: this.props.image
            }),
            React.createElement(Profile, {
                person: this.props.person,
                quote: this.props.quote
            })
        );
    }
});

var Image = React.createClass({
    displayName: 'Image',

render: function render() {
        return React.createElement('div', {
            className: 'Image',
            style: {
                backgroundImage: 'url(' + this.props.src + ')'
            }
        });
    }
});

var Profile = React.createClass({
    displayName: 'Profile',

render: function render() {
        return React.createElement(
            'div', {
                className: 'Profile'
            },
            React.createElement(
                'h1', {
                    className: 'Name'
                },
                this.props.person.name
            ),
            React.createElement(
                'p', {
                    className: 'Bio'
                },
                this.props.person.biography
            ),
            React.createElement(
                'div', {
                    className: 'Quote'
                },
                React.createElement(
                    'blockquote',
                    null,
                    '“ ',
                    this.props.quote.content,
                    ' ”'
                ),
                React.createElement(
                    'div', {
                        className: 'byline'
                    },
                    '— ',
                    this.props.quote.source
                )
            )
        );
    }
});

ReactDOM.render(React.createElement(App, null), document.getElementById('app'));

编译

CSS

@import "https://fonts.googleapis.com/css?family=Abril+Fatface|Roboto";
.App {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    font-family: 'Roboto';
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
@media screen and (max-width: 980px) {
    .App {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
}
.App .Image {
    width: 50vw;
    position: relative;
    background-size: cover;
    background-position: center;
}
@media screen and (max-width: 980px) {
    .App .Image {
        width: 100vw;
        height: 70vh;
    }
}
.App .Profile {
    width: 50vw;
    padding: 5vw 10vw;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    color: #2C2C54;
}
@media screen and (max-width: 980px) {
    .App .Profile {
        width: 100vw;
        height: 30vh;
    }
}
.App .Profile .Name {
    font-size: 6vw;
    font-family: 'Abril Fatface';
    margin-bottom: 4vw;
}
.App .Profile .Bio {
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 3vw;
    opacity: .4;
}
.App .Profile .Quote {
    margin-top: auto;
}
.App .Profile .Quote blockquote {
    font-size: 36px;
    font-family: 'Abril Fatface';
    font-style: italic;
    line-height: 1.4;
    margin-bottom: .6em;
}
.App .Profile .Quote .byline {
    font-family: 'Times', serif;
    text-align: right;
    font-size: 22px;
    font-style: italic;
    opacity: .25;
}

HTML

React Profile Component

react, user, profile

编辑器支持Emmet

快捷键

React Profile Component

react, user, profile

使用ReactJS实现的一款图片轮播界面组件

使用ReactJS的SVG过滤器组件实现的弯曲卡通人物肖像

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：