Semanti c UI Позиционирование в ряд - PullRequest
Новая
       5

Semanti c UI Позиционирование в ряд

0 голосов
/ 09 февраля 2020

Я пытаюсь расположить элементы mov ie в ряд. Я хочу, чтобы их было 5 в ряду. В настоящее время я использую пользовательский интерфейс Semanti c и играю с ним, но у меня возникают проблемы с правильным позиционированием. В настоящее время они просто размещаются в столбце. 

import React from 'react'
import { Grid, Image, Icon, Card} from 'semantic-ui-react'

const Movie = (props) => {

 let handleClick = () => {
  props.handleDeleteMovie(props)
}
 let handleClickFav = () => {
 props.handleFavMovie(props)
}


  return(
      <div className="ui segment">
        <a href="#">
          <img className="ui image" src={props.image}/>
          <Icon name='trash icon' size='large' onClick={handleClick}/>
          <i className="heart icon" onClick={handleClickFav}></i>
        </a>
    </div>
   )

 }

export default Movie;

Компонент коллекции mov ie используется для отображения всех отдельных компонентов mov ie. 

 import React from 'react'
 import Movie from './Movie'
 import { Grid, Card } from 'semantic-ui-react'


 class MovieCollection extends React.Component {

   componentDidMount() {
     this.props.allmovies()
   }

  render(){
     const movieList = this.props.movies.map(movie =>{
      return <Movie key={movie.id}
      handleDeleteMovie={this.props.deleteMovie}
      handleFavMovie={this.props.favMovie}
      {...movie}/>
    })

   return(

       <div className="ui grid container">
        <div className="five column row">
         <div className="three wide column">
            {movieList}
         </div>
        </div>
      </div>
     )
   }
 }
export default MovieCollection;
...