基于React.js实现的响应式文章卡片列表

React 0.2.0 Article Cards

article, card, template

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

"use strict";

/*
  App
  <App />
*/
var App = React.createClass({
    displayName: "App",

getInitialState: function getInitialState() {
        return {
            articles: {
                'article': {
                    "color": "FEC006",
                    "title": "Snow in Turkey Brings Travel Woes",
                    "thumbnail": "",
                    "category": "News",
                    "excerpt": "Heavy snowstorm in Turkey creates havoc as hundreds of villages left without power, and hundreds of roads closed",
                    "date": new Date()
                },
                'article-1': {
                    "color": "2196F3",
                    "title": "Landslide Leaving Thousands Homeless",
                    "thumbnail": "",
                    "category": "News",
                    "excerpt": "An aburt landslide in the Silcon Valley has left thousands homeless and on the streets.",
                    "date": new Date()
                },
                'article-2': {
                    "color": "FE5621",
                    "title": "Hail the size of baseballs in New York",
                    "thumbnail": "",
                    "category": "News",
                    "excerpt": "A rare and unexpected event occurred today as hail the size of snowball hits New York citizens.",
                    "date": new Date()
                },
                'article-3': {
                    "color": "673AB7",
                    "title": "Earthquake destorying San Fransisco",
                    "thumbnail": "",
                    "category": "News",
                    "excerpt": "A massive earthquake just hit San Fransisco leaving behind a giant crater.",
                    "date": new Date()
                }
            }
        };
    },
    renderArticle: function renderArticle(key) {
        return React.createElement(
            "div", {
                className: "column"
            },
            React.createElement(Article, {
                key: key,
                index: key,
                details: this.state.articles[key]
            })
        );
    },
    render: function render() {
        return React.createElement(
            "div", {
                className: "app"
            },
            React.createElement(
                "div", {
                    className: "container"
                },
                Object.keys(this.state.articles).map(this.renderArticle)
            )
        );
    }
});

/*
  Article
  <Article />
*/
var Article = React.createClass({
    displayName: "Article",

render: function render() {
        var details = this.props.details,
            styles = {
                backgroundColor: '#' + details.color
            };

return React.createElement(
            "article", {
                className: "article"
            },
            React.createElement(
                "h3", {
                    className: "article__category",
                    style: styles
                },
                details.category
            ),
            React.createElement(
                "h2", {
                    className: "article__title"
                },
                details.title
            ),
            React.createElement(
                "p", {
                    className: "article__excerpt"
                },
                details.excerpt
            )
        );
    }
});

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

编译

CSS

/* Base */

body {
    background: #F3F3F3;
    padding: 20px;
    font-family: "Open Sans", sans-serif;
}
/* Container */

.container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 90%;
    max-width: 960px;
    margin: 0 auto;
}
/* Column */

.column {
    -webkit-flex-basis: 33.33333%;
    -ms-flex-preferred-size: 33.33333%;
    flex-basis: 33.33333%;
    width: 33.33333%;
    padding: 0 10px;
    box-sizing: border-box;
}
@media (max-width: 900px) {
    .column {
        -webkit-flex-basis: 50%;
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
        width: 50%;
    }
}
@media (max-width: 600px) {
    .column {
        -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        width: 100%;
    }
}
/* Article (Component) */

.article {
    background: #FFF;
    margin: 0 0 20px;
    padding: 20px;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
}
.article:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.2);
}
.article:active {
    box-shadow: none;
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: scale(0.98);
    transform: scale(0.98);
}
.article__category {
    display: inline-block;
    padding: 8px 10px;
    margin: 0 0 10px;
    color: #FFF;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.075rem;
    text-transform: uppercase;
}
.article__excerpt {
    color: #666;
    line-height: 1.5rem;
    font-size: 0.875rem;
}
.article__title {
    margin: 0 0 10px;
    color: #444;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.75rem;
}

HTML

React 0.2.0 Article Cards

article, card, template

编辑器支持Emmet

快捷键

React 0.2.0 Article Cards

article, card, template

基于ReactJS和Bootstrap实现的移动图表应用

使用Vue.js实现的一款很棒的图文卡片反应式悬停动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：