具有隐藏/显示面板的灵活布局

时间:2019-01-02 13:52:34

标签: vue.js vuetify.js

我们要设置一个这样的UI,默认显示A张卡片,如果需要,B显示在右侧:

之前:

┌────────────────────┐
│┌───┐┌───┐┌───┐┌───┐│
││A  ││A  ││A  ││A  ││
│└───┘└───┘└───┘└───┘│
└────────────────────┘

之后:

┌────────────────┐┌──┐
│┌──┐┌──┐┌──┐┌──┐││  │
││A ││A ││A ││A │││B │
│└──┘└──┘└──┘└──┘││  │
└────────────────┘└──┘

因此请注意,一开始A卡的容器占据了整个宽度,然后当B显示时,A卡的宽度缩小了一点,{{ 1}}约占宽度的1/6。

这是Bv-containerv-layout等的当前设置方式:

v-flex

代码现在运行的方式是显示“ Before”之前,但是对于“ After”,它仅显示<v-container fluid> <v-layout> <v-flex> <v-card> <v-container fluid grid-list-xl> <v-layout row wrap> <v-flex xs6 sm4 md3 lg2 xl1 v-for="record in records" :key="record.id"> <v-card flat tile> <!-- "A" code --> </v-card> </v-flex> </v-layout> </v-container> </v-card> </v-flex> <v-flex v-show="showPanel"> <v-card> <!-- "B" code --> </v-card> </v-flex> </v-layout> </v-container> 的细列,如屏幕宽度的1/12,而{{ 1}} s挤了一下。我所做的任何更改B宽度的操作都只是完全弄乱了布局,例如占用了50%的宽度,或者A显示在三列或更少的列中,而不是四列。

我认为我的结构可能根本上是错误的,但是我很难理解BAv-container应该如何工作,以及文档没有帮助。

1 个答案:

答案 0 :(得分:1)

确认是$ch = curl_init('https://sub.example.com/images/foo.jpg'); curl_setopt($ch, CURLOPT_NOBODY, true); curl_exec ($ch); if(curl_getinfo($ch, CURLINFO_HTTP_CODE) != 200) // It didn't exist curl_close($ch); 行中的fluid引起了麻烦。一旦删除它,布局就如预期的那样。该问题无法在CodePen中重现,这可能是因为模板是在具有其自己的布局规则的另一个环境中呈现的,因此,仅在那种情况下才会出现任何冲突。