Как создать горизонтальную сетку с 3 элементами в строке - PullRequest
Новая
       25

Как создать горизонтальную сетку с 3 элементами в строке

1 голос
/ 17 октября 2019

Я рендерил кучу Player компонентов, используя цикл map(), и я хотел бы отображать их горизонтально рядом, используя какое-то Grid из material-ui.

. Сейчас компонентырендеринг выглядит так:

enter image description here

И я хотел бы сделать их так:

enter image description here

Пока я пробовал это Grid: 

render() {
        const { multipleVideoSource } = this.state;
        return (
            multipleVideoSource !== null ?
            multipleVideoSource.map(src => (
                <div style={{ row: 'horizontal' }}>
                    <Grid container spacing={24}>
                        <Grid item xs={4}>
                            <Player key={src} height={500} fluid={false}>
                                <ControlBar autoHide={false} className="my-class" />
                                <BigPlayButton position="center" />
                                <HLSSource isVideoChild src={src} />
                            </Player>
                        </Grid>
                    </Grid>
                </div>
            ))
            : "Only one video"
        );
    };

Но безуспешно. Есть идеи как это решить?

Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 17 октября 2019

Попробуйте код ниже: 

render() {
    const { multipleVideoSource } = this.state;

    const BunchOfPlayer = multipleVideoSource.map(src => (                           
          <Grid item xs={4}>
            <Player key={src} height={500} fluid={false}>
               <ControlBar autoHide={false} className="my-class" />
               <BigPlayButton position="center" />
               <HLSSource isVideoChild src={src} />
            </Player>
          </Grid>));

    return (
        multipleVideoSource !== null ?
          <Grid container spacing={24}>        
             {BunchOfPlayer}        
          </Grid>
        : "Only one video"
   );
};
0 голосов
/ 17 октября 2019

Если все, что вы используете для 'material-ui', это импорт компонента, то могу ли я предложить использовать ваш собственный CSS, который может быть достаточно простым? Если у вас уже есть контроль над шириной элементов проигрывателя и их контейнера, вы можете просто добавить 'display: inline-block' в контейнер div:

<div style={{ display: 'inline-block' }}>

Это может привести кпроблемы с отзывчивостью, в этом случае вы можете проверить некоторые гибкие стили, которые дают вам больше контроля. Это немного больше CSS, но предоставит более масштабируемые, отзывчивые решения.

По сути, вы хотите сохранить контейнер, в который все из вашей карты () будет возвращать свои элементы. Этот контейнер будет иметь стили, которые выглядят примерно так: 

render() {
  return (
    <div style={{ display:'flex', justifyContent: 'space-between'}}>
      {renderPlayers()}
    </div>
  )
};

renderPlayers() {
        const { multipleVideoSource } = this.state;
        return (
            multipleVideoSource !== null ?
            multipleVideoSource.map(src => (
                <div> {/* maybe keep for flex-item style? Otherwise, not necessary */}
                  <Player key={src} height={500} fluid={false}>
                    <ControlBar autoHide={false} className="my-class" />
                    <BigPlayButton position="center" />
                    <HLSSource isVideoChild src={src} />
                  </Player>
                </div>
            ))
            : "Only one video"
        );
    };

По умолчанию Flex имеет значение «flexDirection» для «row», а также «flexWrap» для «nowrap», поэтому вам не придется устанавливать их для вашего горизонтальногоСетка. (Если вы не хотите, чтобы он был перенесен на устройства меньшего размера.)

Вы также можете устанавливать стили для каждого отдельного дочернего элемента и использовать различные стили Flexbox на таких сайтах, как этот https://the -echoplex.net / flexyboxes/

Надеюсь, это поможет!

...