in

javascript: construye una vista de cuadrícula en REACT

apple touch icon@2

Quiero hacer una vista de cuadrícula de un sitio de reacción.
ingrese la descripción de la imagen aquí

Lo de arriba es lo que quiero hacer. Sin embargo, acabo de construir este.
ingrese la descripción de la imagen aquí

El requisito de la vista de cuadrícula:

  1. Solo se muestran estos y en este orden: imagen, contenido, tiempo

  2. Un color de fondo de cada elemento de la cuadrícula como #cccccc

  3. La imagen y el texto deben estar alineados en el centro.

  4. Ancho / alto de cada elemento: 200 px, con un margen de 10 px en todos los lados

  5. Los elementos de la cuadrícula deben ir a la siguiente fila si no encajan en una fila en particular

¿Cómo puedo cambiar el componente css y react?

jsx:

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            activities: activities,
            filteredActivities: activities,
            isShow: false,
            isGrid: false,
        };
    }

    render() {
        return(
            <div className="notificationsFrame">
                <div className="panel">
                    <Header name={this.props.name} onClickSearch={this.handleClickChange} onClickAdd={this.addItem} onClickChange={this.changeView}/>
                    { isShow ? <SearchBar inputChanged={this.handleSearchChange} /> : null }
                    { isGrid ? <ContentGrid activities={this.state.filteredActivities} /> : <ContentList activities={this.state.filteredActivities} onRightClick={this.deleteItem}/> }
                </div>
            </div>
        );
    }
}

class ContentGrid extends React.Component {
    render() {
        return (
            <div className="content">
                <div className="grid"></div>
                {this.props.activities.map(activity =>
                    <ActivityItemGrid img_url={activity.img_url} time={activity.time}
                        content={activity.content} comment_count={activity.comment_count}
                    />
                )}
            </div>
        );
    }
}

class ActivityItemGrid extends React.Component{
    render() {
        return (
            <div className="items">
                <div className="avatar">
                    <img src={this.props.img_url} />
                </div>
                <p>
                    {this.props.content}
                </p>
                <span className="time">
                    {this.props.time}
                </span>
            </div>
        );
    }
}

css:

.demo {
  position: relative;
}

.demo .notificationsFrame {
  z-index: 2;
  width: 100%;
  top: 20px;
  background: #fff;
  border-radius: 3px;
  overflow: hidden;
  font-family: "Open Sans", Helvetica, sans-serif;
  margin-bottom: 40px;
}

.demo .notificationsFrame .content {
  position: relative;
  overflow: hidden;
}

.demo .notificationsFrame .content .items {
  position: relative;
  z-index: 2;
  width: 200px;
  height: 200px;
  margin: 10px 10px 10px 10px;
  display: block;
  background-color: #cccccc;
  text-align: center;
}

.demo .notificationsFrame .content .items .time {
  display: block;
  font-size: 11px;
  line-height: 11px;
  margin-bottom: 2px;
}

.demo .notificationsFrame .content .items p {
  font-size: 15px;
  font-weight: bold;
}

.demo .notificationsFrame .content .items p b {
  font-weight: 600;
}

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

dbms architecture

DBMS – Arquitectura

07MJxyIIOwhxmBjbVGa12tA 9.1636059034.fit lim.size 1200x630

Análisis de Dell Inspiron 15 3000 (3511)