Вопросы Теги

Тема материала не работает должным образом [дубликат]

Похоже, вы были почти там. Еще два шага:

  1. Определите высоту контейнера flex. Без определенной высоты некоторые браузеры могут не знать, где их можно обернуть. Попробуйте следующее: 
    .container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 500px; /* new; value just for demo purposes */
}
  2. Отключить обертку в мобильном режиме 
    @media (max-width: 500px) {
   .container { flex-wrap: nowrap; } /* new */
   .cell { width: 100%; }
   .cell-1 { order: 2; }
   .cell-2 { order: 1; }
   .cell-3 { order: 3; }
}


.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 500px;
}
.cell {
  background: #ccc;
  border: solid 3px black;
  width: 50%;
}
.cell-1 {
  flex-basis: 100%;
}
@media (max-width: 500px) {
  .container {
    flex-wrap: nowrap;
  }
  .cell {
    width: 100%;
  }
  .cell-1 {
    order: 2;
  }
  .cell-2 {
    order: 1;
  }
  .cell-3 {
    order: 3;
  }
}
Vertical Boxes


Goal: Have one box on the left, and two boxes on the right that are stacked. All without nesting, so that the order of the boxes can be changed on smaller screen sizes.



  

    
One

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit
    amet, consectetur adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure.
  

  

    
Two

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste mollitia temporibus id sint illum doloremque pariatur nulla vel soluta, nostrum vitae, suscipit ea natus sed eaque in velit deserunt deleniti!
  

  

    
Three

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, architecto perferendis voluptatum accusantium est ipsam fugit, laudantium fugiat nostrum consectetur earum. Asperiores, similique deleniti nobis nemo error, iste iure architecto.

пересмотренный codepen

3
задан jpnurmi 3 August 2016 в 14:01
поделиться

1 ответ

Импорт QtQuick.Controls.Material 2.0 и установка некоторых свойств материала не применяются к теме Материал. Они будут использоваться, если тема задана с использованием одного из методов, описанных здесь:

http://doc.qt.io/qt-5/qtquickcontrols2-styles.html

5
ответ дан Yoann 19 August 2018 в 01:27
поделиться
  • 1
    Ах! Спасибо. Жаль, что это не на странице, которую я использовал для справки. Документация Qt обычно хороша, но иногда слишком фрагментирована. – Violet Giraffe 3 August 2016 в 10:32
  • 2
    @VioletGiraffe: codereview.qt-project.org / # / c / 166834 – Mitch 3 August 2016 в 14:51
  • 3
    @Mitch: хорошая работа, сэр :) – Violet Giraffe 3 August 2016 в 14:54
  • 4
    Позвольте мне упомянуть, что при импорте QtQuick.Controls.Material по-прежнему появляется сообщение об ошибке Qt Creator. Эта сообщенная ошибка является известной ошибкой Qt Creator и не должна препятствовать применению стиля. Попробуйте загрузить пример TextEditor. Он использует QtQuick Controls 2 и показывает ошибку в Qt Creator, хотя он правильно использует параметры раздела qtquickcontrols2.conf [Material]. См. bugreports.qt.io/browse/QTBUG-54986 и doc.qt.io/qt-5/qtquickcontrols2-texteditor-example.html . Я использую Qt Creator 4.4.0 и Qt 5.9.1. – SR_ 16 September 2017 в 08:58
Другие вопросы по тегам:

Похожие вопросы: