Я хочу разработать внешнее приложение, которое будет иметь Studio, IDE или Dashboard, как макет и поведение. Что я имею в виду, что в таких приложениях у вас есть фиксированная панель контента без полос прокрутки, и все происходит в ней.
Представьте себе макет, в котором изначально у вас есть только строка поиска в родительском контейнере, а после поиска некоторые результаты отображаются ниже в рамке. И затем после того, как вы щелкнете по результату, вместо изменения веб-страницы или изменения представления в приложениях SPA, ширина окна результатов будет сужаться или уменьшаться вправо, а область подробностей div / pane - слева. Итак, новый div создан в вашей родительской панели и теперь имеет две панели, и все они вписываются в контейнер.
Ранее я работал с JQuery и CSS, но я не уверен, как это сделать. в Vue или с современным стеком веб-разработки. Должен ли я использовать Flex? Но как в этом случае управлять динамически меняющимися деталями? Должен ли я рассчитать ширину и соответственно изменить размер элементов? Должен ли я использовать сетку, но как разделить или объединить или охватить столбцы программно в этом случае? Должен ли я изначально скрывать контейнеры div и показывать их или создавать их динамически на лету?
Я долго искал его, нашел что-то, но хочу узнать лучшие практики и кратчайшие / самые простые возможные способы иИнтересно, люди справляются с такими динамически меняющимися проблемами макета.
|======================
| menu
- ----------------
| m | |
| e | |
| n | |
| u | | <-- parent div
| | |
| | |
| | |
| | |
- ----------------
|
|=======================
t1 t2(B created t3(C created)
and grows,
A shrinks)
---------------- ---------------- ----------------
| | | --> | -->| | -->| --> | -->|
| | an event happened | grows | | | | | |
| A | --------------> | B | A | -> | C | B | A |
| | | | | | | | |
| | | | | | | | |
| | | | | | | | |
| | | | | | | | |
| | | | | | | | |
---------------- ---------------- -----------------
t4(C removed t5 t6
dynamically
others fitted)
---------------- ---------------- ----------------
| <-- | <-- | | B | | | B | |
| | | an event happened | | | | | |
| B | A | --------------> |-------- A | -> |-------- A |
| | | | C | | | C | |
| | | | | | |-------- |
| | | | | | | D | |
| | | | | | | | |
| | | | | | | | |
---------------- ---------------- ----------------