I am reading the official docs of Vuetify toolbar, I want to use the toolbar provided in the example but when I use the mobile view from dev tools and click the menu icon to expand it, it doesn't expand.
Here is the example provided by official docs
Here is the code itself
<div id="app">
<v-app id="inspire">
<v-toolbar>
<v-toolbar-side-icon></v-toolbar-side-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-btn flat>Link One</v-btn>
<v-btn flat>Link Two</v-btn>
<v-btn flat>Link Three</v-btn>
</v-toolbar-items>
</v-toolbar>
</v-app>
</div>
and
new Vue({
el: '#app',
})
Inside the example you linked, the menu bar does not open either because there is no method to implement it.
In this vuetify example, the menu bar that opens and closes correctly in desktop and mobile.
What they did was implement #click right there in the HTML
<v-toolbar-side-icon #click.stop="drawer = !drawer"></v-toolbar-side-icon>
Related
Vuetify official doc says you can use the google material icon but some of them not working in is there is any reference online?
<v-icon >
mdi-layers
</v-icon>
the above works but the below one does't
From google material icon
<v-icon>
mdi-expand_more
</v-icon>
Here are the resources I personally use to get mdi icon names:
https://pictogrammers.github.io/#mdi/font/5.4.55/
https://material.io/resources/icons/?style=baseline
https://iconify.design/icon-sets/mdi/
I want to build a small chat as we all know from WhatsApp.
Currently I am able to display messages within a ListView.
<template>
<Page>
<ListView separatorColor="transparent" for="item in messages">
<v-template>
<GridLayout>
<TextView
height="auto"
editable="false"
:text="item.message"
/>
</GridLayout>
</v-template>
</ListView>
</Page>
</template>
My next step is to add a TextView with a Button at the end of the page. But here are coming my problems:
Which Layout component should I choose to position a TextView at the bottom of the page.
If I tab into my editable TextView the virtual keyboard overlaps my current page. Instead it should resize the whole page. How can I do this?
This is my current playground project: https://play.nativescript.org/?template=play-vue&id=F8lXkO
EDIT:
I found a way which works on Android using DockLayout:
https://play.nativescript.org/?template=play-vue&id=F8lXkO&v=3
Unfortunately this works only in the playground. Using the latest nativescript version on android is not working. If I tab on the TextView the layout breaks => https://github.com/sowinski/nativescript-vue-chat
Use GridLayout for the entire view. You can use this as a guide - https://github.com/Especializa/nativescript-whatsapp-template
Use this to better understand Nativescript layouts - https://www.nslayouts.com/
Vuetify seems to be an useful Framework. I was wondering if it's possible to use it inside our NativeScript apps with VUE.js
I have tried :
yarn add vuetify
<v-btn :href="source"
icon
large
target="_blank"
v-on="on"
>
<v-icon large>mdi-code-tags</v-icon>
</v-btn>
But Error says:
No known component for element v-btn.
NativeScript !== Cordova, so you can't. Vuetify is purely browser dependent / HTML DOM based components.
Though Manoj is right to point out that you can't use it like you intendet to do but you still can use a WebView in NativeScript to display your web application. Some apps in the appstores do just that - they use Nativescript for the Main-UI with device features and the webview to show the web application.
the tooltip are not working in mobile devices.
mdTooltip="message" [mdTooltipPosition]="tooltipPosition"
when I hover the the div that contain the code it's working on desktop
I know that on mobile I have to click but the click is not working.
My solution in Angular:
<button #tooltip="matTooltip" (click)="tooltip.toggle()" matTooltip="text" matTooltipPosition="above" aria-label="Button that shows a tooltip"> Tooltip </button>
use (click)="tooltip.toggle()" with #tooltip="matTooltip"
I am using React Bootstrap Dropdown that will render text depending on what DropDown selection you choose. However, it only works on browsers that isn't Firefox.
<MenuItem key={item.key} onSelect={this.handleFilterSelect.bind(this)} eventKey={item.key} className="filter-option text-right">
{item.label}
</MenuItem>
I've tried switching onSelect with onClick, but I still get the same error. In the Firefox consol, the error says,
"ReferenceError: event is not defined react-bundle-1e7c66351cc2cc9138d2f506e79409f1.js:27:31664"
Any have an idea what's going on?