I am trying to use a single menu for both LTR and RTL but the issue I am facing when its RTL then the menu is opening from the left side which should be from the right side
I don't believe you can use a single menu for both RTL and LTR swiping behavior. You could instead, use a service that would populate the menu information with a *ngIf=let link of links", and then just have a menu on either side of the app that subscribes to the links provided in the service.
The attribute side="end" or side="start" controls which side of the app the menu will appear on, so if you want to swipe from the right side of the screen you'd use slide="end" on your ion-menu.
<ion-menu side="end" contentId="mainContent" menuId="slidingMenu" id="slidingMenu">
<ion-header>
<ion-toolbar>
<ion-title>{{(menu?.details | async)?.title}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item class="item-mute">
<ion-label>Mute</ion-label>
<ion-toggle></ion-toggle>
</ion-item>
<ion-item *ngFor="let link of (menu?.details | async)?.links" detail
(click)="navToPage(link)">{{link?.title}}</ion-item>
</ion-list>
</ion-content>
</ion-menu>
Related
I'm tryin to add a bar at the bottom of my ElectronJS application and I'd like it to be positioned in the same way as the blue bottom bar in VSCode, where the scroll bar ends/stops above it.
Unfortunately, there always seems to be a small space on the right side where the scroll bar would appear when the content overflows (I don't want to disable the scroll bar / behavior with things such as overflow: hidden; See Edit 2).
I did some testing and with the code below you can see my desired behavior seems to happen with the nav-drawer, i.e. its scroll bar stops right above the v-bottom-navigation, which would be my bottom bar (the thick grey line you see is the scroll bar).
I'm semi-new to this, but I can't figure out why exactly that happens and how to modify it in order to get the same behavior for the whole application.
VueComponent.vue
<template>
<div id="nav-drawer">
<v-navigation-drawer
v-model="drawer"
app
color="white darken-3"
mini-variant
permanent
>
<v-avatar
v-for="n in 30"
:key="n"
:color="`grey ${n === 1 ? 'darken' : 'lighten'}-1`"
size="36"
class="d-block text-center mx-auto my-3"
>
<span>TT</span>
</v-avatar>
<v-avatar class="d-block mx-auto">
<v-btn icon small color="primary">
<v-icon>fas fa-window-maximize</v-icon>
</v-btn>
</v-avatar>
</v-navigation-drawer>
<v-bottom-navigation v-model="value" height="20px" background-color="primary" app>
<v-spacer></v-spacer>
<v-btn icon small>
Button
</v-btn>
</v-bottom-navigation>
</div>
</template>
<script>
export default {
name: "NavDrawer",
components: {
//
},
data: () => ({
drawer: true,
})
}
</script>
P.S. I'm using ElectronJS with VueJS+VuetifyJS - I set it up as described here. Any help is appreciated.
Edit 1: I went through the VSCode source code and found the UI elements (vscode/src/vs/base/browser/ui/). Unfortunately, I wasn't able to figure out which of those is the bar at the bottom (apparently called System Bar, according to some threads I found here and there).
I think it might be the toolbar, but that seems to be part of the actionbar, which is the menu on the left (by default) and doesn't seem to have much CSS to indicate that it's the bar at the bottom.
Edit 2: I tried adding html {overflow: hidden;} in the style section of the main index.html file. It removes the bar of the main page section (the scrollbar you see in the second picture with the two arrows and green button) and the possibility to scroll, but the scrollbar of the nav-drawer remains and the scrolling still works. So, I guess this would be an option if I could still have the scrollbar in the main page section with the code above with the hidden feature enabled as well. Not sure if that's possible though.
Edit 3: Using html {overflow-y: auto;} in the index.html file, removes the scrollbar when there isn't content that is overflowing and it looks just like I want it, but when there is, it still taking up space and looks like the the second image in my post.
Found this example: CodePen
For my case the solution is adapting the :root {...} part to my application, which means to mark the bottom bar as the footer and calculate the content area depending on its size.
The html {overflow: hidden;} must also be in the index.html file's style section.
I wanted to make a custom button that basically when clicked on would make a v-data-table pop out below it. I am basically making a data table show up when a button is clicked and using this transition
https://vuetifyjs.com/en/styles/transitions/#scale
But the transition sort of makes the table go to the right more and also has an active state with a background with opacity, basically there is a lot of built in styles that are making it hard to make a table drop down below the button as the default behavior is when you click on the transition, the item that pops up covers the button.
Below is the code that causes this
<v-menu transition="scroll-y-transition" class="scroll-button">
<template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on">
Scrolling Y Transition
</v-btn>
</template>
<v-data-table> </v-data-table>
</v-menu>
Is there a better way to implement this?
I don't recommend using menu. Maybe you are looking for this kind of animation.
<v-btn #click="show = !show">
{{ show ? 'Hide' ? 'Show' }}
</v-btn>
<v-expand-transition>
<div v-show="show">
<v-table></v-table>
</div>
</v-expand-transition>
And in the script
data() {
return {
show: false
}
}
You should use the native props for v-menu to reposition the menu how you like. See this snippet: https://codepen.io/bgtor/pen/BaWdBMO .
Note the use of offset-y which allow you to offset the menu on the Y axis, and bottom which tell it to offset to the bottom. Also, nudge-left="200px" is translating the menu to the left by "200px". You can find more props for customisation on the vuetify site: https://vuetifyjs.com/en/api/v-menu/.
Other than that, I agree with #scar-2018, it seems odd to display a table in a menu.
By default, Vuetify's v-btn has a "selected state", which from what I can tell, is just a darkened background. I'm using a few v-btns in a v-app-bar. One of these buttons is a Home button. When the vue app is launched (i.e. main route), I want to set the Home button as selected so that the user knows that this is the home page. Is there a simple way that I can do this from the template that I have my v-app-bar in?
<template>
<v-app-bar app fixed>
<router-link to="/">
<v-img src="/assets/my-logo.png" to="/home" class="mx-2" max-height="128" max-width="128" contain/>
</router-link>
<v-btn to="/home" tile>Home</v-btn>
<v-btn to="/another-view" tile>Another View</v-btn>
<v-btn to="/yet-another-view" tile>Yet Another View</v-btn>
</v-app-bar>
</template>
So given the markup above, how can I set the Home button as "active" or "selected" when the page opens up at the default route?
In the v-btn documentation, there's a prop called "input-value" which says that it controls the button's active state. The problem is that its type is "Any", so I'm not sure how to use it (and the documentation doesn't show anything about it). I tried setting to true/false and nothing changes.
Also, if I want to just get rid of all the buttons active states, how do I do that?
Why isn't there a simple solution like focused="true|false"?
I am using ionic 4. I want to ask if I want to send value to side menu then when I open the menu the value is already at side menu. Now I need to open the side menu then click one time to show the value. Can I know how to do it? Here is my code. Thank you
app.component.html
<ion-menu side="start" (click)="onOpen()">
<ion-content>
<ion-list>
<ion-menu-toggle>
<ion-item lines="none">
<ion-icon name="business" slot="start"></ion-icon>
<ion-label>{{text}}</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
</ion-app>
I put the onOpen() method at app.component.ts
onOpen() {
this.text = "my pass value";
}
If you want something triggered when the menu is opened you need to handle the ionWillOpen or ionDidOpen events:
ion-menu - Ionic Documentation
An example of this would look like:
<ion-menu (ionWillOpen)="onMenuOpen()" (ionDidOpen)="menuOpened()">
How do I make this expansion-panel open content only on clicking icon?
Tried using readonly but it didn't help.
Thanks in advance!
https://vuetifyjs.com/en/components/expansion-panels#expansion-panel
You can put online the argument in all collapse like: expanded={!expanded}
and in the icon you put the onClick={toggle}
I was having the same problem and just found a solution for that.
You need to implement a custom button on the expansion panel, so it will accept custom events. You can achieve that using template and v-slot:
<v-expansion-panel #click.prevent="onClick()">
<v-expansion-panel-header>
...your expansion panel code here
<template v-slot:actions>
<v-btn icon #click.stop="onClick()">
<v-icon>mdi-filter-variant</v-icon>
</v-btn>
</template>
</v-expansion-panel-header>
</v-expansion-panel>
...and your onClick method would be like this:
onClick() {
/*this will toggle only by icon click. at the same time, will prevent toggle
by clicking on header. */
const curr = this.panel
this.panel = curr === undefined ? 0 : undefined
}
It may seem a little magical that the same function is toggling on icon click and preventing toggle on header click, but this happens because the custom icon button does not toggle itself, so we force that using the onClick method. On the other hand, the expansion panel header has its native property of toggling the panel. So when we click it, its value will automatically change and we need to change it back to what it was before the click.
To make the expansion-panel open only on clicking icon you can use css that disables all clicks on the header and only allows clicks on the icon:
<style>
.v-expansion-panel-header{
pointer-events: none;
}
.v-expansion-panel-header__icon{
pointer-events: All;
}
</style>
Keep in mind if you are using scoped style you have use >>>:
https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors
Here is the template example, I added #click to provide btn like experience when user clicks on an icon, it's not necessary:
<template>
<v-expansion-panel>
<v-expansion-panel-header>
<template #actions>
<v-icon class="icon Icon Icon--32 icon-utility-arrows-carrot_down-32"
#click/>
</template>
</v-expansion-panel-header>
<v-expansion-panels >
<v-expansion-panel-content >
<!--content here-->
</v-expansion-panel-content>
</v-expansion-panels>
</v-expansion-panel>
</template>