Блог

Как мне создать панель приложений, которая выглядит следующим образом:

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

       <AppBar
        style={{backgroundColor: MuiTheme.palette.primary1Color, flexWrap: 'wrap'}}
        showMenuIconButton={false}
        title={explorerSearch}
        titleStyle={MuiTheme.title}
        iconClassNameRight='muidocs-icon-navigation-expand-more'
      >
        <Toolbar>
          <ToolbarGroup>
            {this._getContent()}
          </ToolbarGroup>
        </Toolbar>
      </AppBar>
  

Вот как выглядит результат:

Я бы хотел, чтобы «ТЕКСТ» отображался в новой строке под строкой поиска. Как мне это сделать?

Вы пробовали добавлять в стили flexDirection: 'column' ?

Просто замените стиль, который у вас есть:

 style={{backgroundColor: MuiTheme.palette.primary1Color, flexWrap: 'wrap'}}
  

Для

 style={{backgroundColor: MuiTheme.palette.primary1Color, display: 'flex', flexDirection: 'column'}}