I couldn't find any clarification about this but I'm trying to understand of concept that using v-expension-panels component. Do I need to declare parent component of expansion panel that has v-expension-panels child as v-expension-panels or v-expension-panel would be enough? Is v-expension-panels's all point is controlling multiple panel or must be declared if has child of multiple panels. If I have to give example:
<v-expansion-panels class="mb-6"> <---------- Is this must be v-expansion-panels or v-expansion-panel component would be enough also?
<v-expansion-panel>
<v-expansion-panel-header expand-icon="mdi-menu-down">
Item
</v-expansion-panel-header>
<v-expansion-panel-content>
<v-expansion-panels class="mb-6">
<v-expansion-panel
v-for="(item,i) in 5"
:key="i"
>
<v-expansion-panel-header expand-icon="mdi-menu-down">
Item
</v-expansion-panel-header>
<v-expansion-panel-content>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</v-expansion-panel-content>
</v-expansion-panel> </v-expansion-panels>
Edit: I have more simple way to explain my question now, LMAO. Can v-expansion-panel component has multiple child panels? Or parent of those panels MUST be v-expansion-panels?
<v-expansion-panels> is always the parent component to <v-expansion-panel>. The <v-expansion-panel> cannot be properly rendered without the <v-expansion-panels> parent (demo 1).
If you want to nest multiple <v-expansion-panel>s, they'd have to be in their own <v-expansion-panels> parent:
<v-expansion-panels>
<v-expansion-panel>
<v-expansion-panel-content>
<!-- NESTED PANELS -->
<v-expansion-panels>
<v-expansion-panel>
<v-expansion-panel-content>I'm a nested panel</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
demo 2
Related
I am creating Vue app with vue3 and using the bootstrap-vue3 package for Frontend.
I followed Bootstrap-Vue docs and copied the following code but Carousel doesn't work.
Of course, I can use another package for Carousel, but almost works already was done with this package. So I am looking for a solution to use this package.
Kindly let me know please if you folks how to fix this issue.
<template>
<div>
<b-carousel
id="carousel-1"
v-model="slide"
:interval="4000"
controls
indicators
background="#ababab"
img-width="1024"
img-height="480"
style="text-shadow: 1px 1px 2px #333;"
#sliding-start="onSlideStart"
#sliding-end="onSlideEnd"
>
<!-- Text slides with image -->
<b-carousel-slide
caption="First slide"
text="Nulla vitae elit libero, a pharetra augue mollis interdum."
img-src="https://picsum.photos/1024/480/?image=52"
></b-carousel-slide>
<!-- Slides with custom text -->
<b-carousel-slide img-src="https://picsum.photos/1024/480/?image=54">
<h1>Hello world!</h1>
</b-carousel-slide>
<!-- Slides with image only -->
<b-carousel-slide img-src="https://picsum.photos/1024/480/?image=58"></b-carousel-slide>
<!-- Slides with img slot -->
<!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
<b-carousel-slide>
<template #img>
<img
class="d-block img-fluid w-100"
width="1024"
height="480"
src="https://picsum.photos/1024/480/?image=55"
alt="image slot"
>
</template>
</b-carousel-slide>
<!-- Slide with blank fluid image to maintain slide aspect ratio -->
<b-carousel-slide caption="Blank Image" img-blank img-alt="Blank image">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros felis, tincidunt
a tincidunt eget, convallis vel est. Ut pellentesque ut lacus vel interdum.
</p>
</b-carousel-slide>
</b-carousel>
<p class="mt-4">
Slide #: {{ slide }}<br>
Sliding: {{ sliding }}
</p>
</div>
</template>
<script>
export default {
data() {
return {
slide: 0,
sliding: null
}
},
methods: {
onSlideStart(slide) {
this.sliding = true
},
onSlideEnd(slide) {
this.sliding = false
}
}
}
</script>
You need a active prop in any one of the b-carousel-slide tag to display the slide.
It is something not mentioned in the documentation.
I want to use this as a toggle sidebar when the viewport is mobile.
*note my page is a Linear Page so when I click on the nav link it should be scroll to where the link point to.
It goes to where the link point to but after i click to close the sidebar it just scroll back to where the toggle button is.
here what my sidebar look like.
<div style="margin:2000px 0">
<b-button v-b-toggle.sidebar-1>Toggle Sidebar</b-button>
<b-sidebar id="sidebar-1" title="Sidebar" shadow>
<div class="px-3 py-2">
<p>
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
</p>
<b-img src="https://picsum.photos/500/500/?image=54" fluid thumbnail></b-img>
</div>
</b-sidebar>
<div>
<b-sidebar> returns focus to the element which opened it, which is causing your page to scroll to it.
There's currently no built-in way to disable this behavior. However in the next version (2.17.0), there will be a new prop no-enforce-focus, which can be used to disable the sidebars built-in focus functionality.
I am trying usecase where , text field should be disabled by default and
it should be enabled only when that particular expansion panel content opens up
is this possible?
any suggestions would be helpful.
<v-expansion-panel>
<v-expansion-panel-content
v-for="(item,i) in 5"
:key="i"
>
<template v-slot:header>
<v-flex xs6 pa-0 ma-0>
<v-text-field style="backgroundColor:#3D8D7C" height="20px"
placeholder="Edit text field"
class="pa-0 ma-0" >
</v-text-field>
</v-flex>
<div>Panel {{i}}</div>
</template>
<v-card>
<v-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</v-card-text>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
This is what i have tried till now
Add v-model to <v-expansion-panels> so you can track which panel is active. And then you can just check if the active panel index matches the text-field index.
Also add #click.stop="" to the fields to stop event propagation, otherwise, when you click on a field, the click would propagate through the field and close the panel. Though for some reason, if you click on the top part of a field it still closes the panel. That's a Vuetify bug.
You could fix it by wrapping the fields with a div that has #click.stop="" to stop click propagation through the whole text-field component. In the example below, I also specified a method: #click.stop="handleFieldClick(index)". This way, when you click on the field, it will not only stop propagation but will also open the specified panel. Remove the method if you don't need this functionality.
Demo
https://codepen.io/aQW5z9fe/pen/JjYxyxV?editors=1010
Code
<v-expansion-panels v-model="activePanel">
<v-expansion-panel
v-for="(item, index) in panels"
:key="index"
>
<v-expansion-panel-header>
Panel {{index}}
<div #click.stop="handleFieldClick(index)">
<v-text-field
#click.stop=""
:ref="`field${index}`"
:disabled="activePanel !== index"
:label="activePanel !== index ? 'Disabled' : 'Type'"
class="mx-4"
filled dense hide-details
></v-text-field>
</div<
</v-expansion-panel-header>
<v-expansion-panel-content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
methods: {
handleFieldClick(index) {
// Open specified panel
this.activePanel = index
// Focus clicked field
this.$nextTick(() => {
this.$refs[`field${index}`][0].focus()
})
}
}
I'm trying to build an electron app with a dynamic width and the user should size the app as he prefers.
The width should affect how many "items" I can see in my navbar.
Any item that is too much should be collapsed into a more button.
When the width becomes larger again, the navbar should be filled up with existing items from the more button.
I want to prevent scrolling in the navbar. Is there a way to calculate how many items the width could fit?
Current behavior in the example below.
Every item that is too much for the width goes out of the window:
https://codepen.io/borsTiHD/pen/ExVLeBE
There is something called v-resize in vuetify, the directive called when the page loads and whenever the page resized. I have added a function that will use the width of the screen, divide it by 100. Pushes that much item into tab and the rest to more. tab will be used to draw v-tabs and more will be used for the dropdown. Rest everything is your code.
Please see the CodePen https://codepen.io/aaha/pen/VwvxOmO?editors=1010
<v-card>
<v-toolbar
v-resize="onResize"
color="deep-purple accent-4"
dark
flat
>
<v-tabs
v-model="currentItem"
fixed-tabs
slider-color="white"
justify-end
row
wrap
>
<v-tab
v-for="item in tabs"
:key="item"
:href="'#tab-' + item"
>
{{ item }}
</v-tab>
<v-menu
v-if="more.length"
bottom
left
>
<template v-slot:activator="{ on }">
<v-btn
text
class="align-self-center mr-4"
v-on="on"
>
more
<v-icon right>mdi-menu-down</v-icon>
</v-btn>
</template>
<v-list class="grey lighten-3">
<v-list-item
v-for="item in more"
:key="item"
#click="addItem(item)"
>
{{ item }}
</v-list-item>
</v-list>
</v-menu>
</v-tabs>
</v-toolbar>
<v-tabs-items v-model="currentItem">
<v-tab-item
v-for="item in items.concat(more)"
:key="item"
:value="'tab-' + item"
>
<v-card flat>
<v-card-text>
<h2>{{ item }}</h2>
{{ text }}
</v-card-text>
</v-card>
</v-tab-item>
</v-tabs-items>
</v-card>
data: {
currentItem: 'tab-Web',
items: [
'Web', 'Shopping', 'Videos', 'Images', 'Tab 5', 'Tab 6', 'Tab 7', 'Tab 8', 'Tab 9', 'Tab 10', 'News', 'Maps', 'Books', 'Flights', 'Apps'
],
tabs: [],
more: [],
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
},
methods: {
addItem (item) {
const removed = this.tabs.splice(this.tabs.length-1, 1)
this.tabs.push(
...this.more.splice(this.more.indexOf(item), 1)
)
this.more.push(...removed)
this.$nextTick(() => { this.currentItem = 'tab-' + item })
},
onResize(){
const temp = this.items.slice()
this.tabs = temp.splice(0, (window.innerWidth/100)-1)
this.more = temp.splice(0)
}
},
In PhpStorm is there any way (such as via a KB shortcut) for it to insert comments at the end of code blocks to note that's the end of said block?
For example, say you have this code:
<section class="category">
<header>Some Header</header>
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ille incendat? Quis istud, quaeso, nesciebat? Prioris generis est docilitas, memoria; Qui est in parvis malis. </p>
<p>Paria sunt igitur. Duo Reges: constructio interrete. Cui Tubuli nomen odio non est? Laboro autem non sine causa; </p>
</div>
</section>
On the line directly after </section> is there anyway for it to input something like <!-- Category Ends --> simply by hitting a KB shortcut?