I am upgrading to the new vuetify 2.0, and I noticed the hamburger icon is not showing on the app bar.
In their examples with the same code, it does show.
https://vuetifyjs.com/en/components/app-bars
https://codepen.io/anon/pen/rXLyzE?&editable=true&editors=101
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.1.1/vuex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.6/vue-router.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.js"></script>
</head>
<body>
<div id="app">
<v-app>
<v-app-bar absolute dark>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>search</v-icon>
</v-btn>
</v-app-bar>
</v-app>
</div>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
})
});
</script>
</body>
</html>
What am I missing?
Thanks
You're just missing the icon CSS:
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#latest/css/materialdesignicons.min.css" rel="stylesheet">
See https://vuetifyjs.com/en/getting-started/quick-start#cdn-usage
Update:
From the original question:
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
This will be pulling in the icons from Material Design, see:
https://material.io/tools/icons/?style=baseline
Despite the naming similarity, this is a different icon set from Material Design Icons (MDI):
https://materialdesignicons.com/
The search icon comes from Material Design, it would be called mdi-magnify in MDI.
By default Vuetify uses MDI. If you want to switch everything across to Material Design there is a guide in the documentation:
https://vuetifyjs.com/en/customization/icons#install-material-icons
Current Version
I'm using Vue CLI 3 and I had the same issue.
vuetify v2.0.0
#mdi/font v4.4.95
Solution
first, please add #mdi/font library to your package.son
$ yarn add #mdi/font
second, import materialdesignicons.scss to your SCSS like this.
// application.scss
$mdi-font-path: "~#mdi/font/fonts" !default;
#import '~#mdi/font/scss/materialdesignicons';
After compile
Related
I have a weird problem. My VueJS app (from CDN) uses Vuetify.
It works on Ubuntu and Windows, but my client sees the raw VueJS code on his Safari and also on Chrome on the iPad. Do you know where is the problem?
The simplified code looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.20.0/axios.js"
integrity="sha512-nqIFZC8560+CqHgXKez61MI0f9XSTKLkm0zFVm/99Wt0jSTZ7yeeYwbzyl0SGn/s8Mulbdw+ScCG41hmO2+FKw=="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
</head>
<body>
<div id="app">
<v-app>
<v-main>
<v-container fluid>
....
</v-container>
</v-main>
</v-app>
</div>
<script>
class RepairsCalculator {
...
}
axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.xsrfHeaderName = "X-CSRFTOKEN"
new Vue({
el: '#app',
delimiters: ['[[', ']]'],
vuetify: new Vuetify(),
data: {
...........
}
})
</script>
</body>
</html>
It sounds like your CDN or server may be misconfigured. It might be worth checking out the HTTP "Content-Type" headers to make sure it is sending out the right MIME type. You could examine this in chrome dev tools, by clicking on the network tab.
Chrome on iOS actually is based on WebKit, so it is running the same engine as Safari and their similar behavior should not be surprising.
I am creating a web app frontend using ReactJS.
I have downloaded a Template from W3layout which is designed using HTML5 CSS3 Custom JS file and also includes some third party/vendor JS/Jquery Plugins Like nice-select, bootstrap,slik, owl-carousel, etc
I am not a Front End Developer My expertise are in Serverside scripting & Database. So I just wanted to use the same downloaded template to develop ReactJS application.
But When page Loads/render 1st time its work fine but on navigating to other Route /Component Jquery/Other Vendor Scripts Stop Working.
Even I wanted to trigger update/change to the plugins Like
componentDidUpdate(){
// $('select').niceSelect('update');
}
All these are not working.
This is my Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" href="/img/fav.png">
<meta name="description" content="">
<meta name="keywords" content="">
<meta charset="UTF-8">
<!-- Site Title -->
<title>Training</title>
<link href="https://fonts.googleapis.com/css?family=Poppins:100,200,400,300,500,600,700" rel="stylesheet">
<!-- CSS
============================================= -->
<link rel="stylesheet" href="/css/linearicons.css">
<link rel="stylesheet" href="/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/css/magnific-popup.css">
<link rel="stylesheet" href="/css/nice-select.css">
<link rel="stylesheet" href="/css/animate.min.css">
<link rel="stylesheet" href="/css/owl.carousel.css">
<link rel="stylesheet" href="/css/jquery-ui.css">
<link rel="stylesheet" href="/css/main.css">
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> </head>
<body> <div id="root"></div>
<script src="/js/vendor/jquery-2.2.4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="/js/vendor/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhOdIF3Y9382fqJYt5I_sswSrEw5eihAA"></script>
<script src="/js/easing.min.js"></script>
<script src="/js/hoverIntent.js"></script>
<script src="/js/superfish.min.js"></script>
<script src="/js/jquery.ajaxchimp.min.js"></script>
<script src="/js/jquery.magnific-popup.min.js"></script>
<script src="/js/jquery.tabs.min.js"></script>
<script src="/js/jquery.nice-select.min.js"></script>
<script src="/js/owl.carousel.min.js"></script>
<script src="/js/mail-script.js"></script>
<script src="/js/main.js"></script>
How can we use the existing vendors script on our react js without any issue .
jQuery binds its listeners to the existing dom elements. When the dom changes new nodes don't get those listeners automatically. You need to call the initialization phase of each jQuery script after the navigation (and any other significant dom change). Alternatively you can make those listeners to listen to document instead:
$('button').click(function(){})
should become
$(document).on('click', 'button', function(){})
As a fast fix you can force React Router to reload the page on every navigation:
<BrowserRouter forceRefresh/>
But you are likely to get similar troubles with other react components.
Some hints to fix the issue:
try to replace jQuery plugins with react modules
use the history object provided by React Router to listen for navigation changes and reinit jQuery code
use componentDidMount and componentDidUpdate to bind and update jQuery listeners
I use Vue.js CDN and I put all the Vuejs code inside a script tag in index.html.
It works fine. However, I'd like to use this component to add tags functionality.
But I receive this error :
This is how my code looks like:
<script>
import VTagInput from 'v-tag-input'
Vue.use(VTagInput)
var app = new Vue({
el: '#app',
delimiters: ["[[", "]]"],
components: {VTagInput},
tags: []
data: {
errors: [],
I npm installed the package as specified in the github repo.
This is the head tag:
<head>
<meta charset="utf-8">
<meta name="author" content="Seif Elmughrabi">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="(( url_for('static', filename='materialize.css') ))" media="screen, projection">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons">
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"> -->
<!--Google Icons-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="(( url_for('static', filename='style.css') ))">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Your Insurance Policy Planner</title>
</head>
You cant import another files in browser using 'import' you need to use webpack, however you can use this cdn to load the plugin in your html after loading vue.js file, https://unpkg.com/v-tag-input#0.0.3/dist/v-tag-input.js , here is a working example
new Vue({
el:"#app",
data: {
tags: ['foo', 'bar']
}
})
<script src="https://unpkg.com/vue#2.5.13/dist/vue.min.js"></script>
<script src="https://unpkg.com/v-tag-input#0.0.3/dist/v-tag-input.js"></script>
<div id="app">
<v-tag-input v-model="tags"></v-tag-input> {{tags}}
</div>
You should load the script where VTagInput is located in your head, right after Vue. Then no need to import anything, VTagInput will be accessible globally
I'm trying to implement jQuery FloatLabel in my ionic app -> https://github.com/m10l/FloatLabel.js/tree/master
I used that plugin because that plugin also was implemented in a web version, so to be uniform in design.
I included that inside src/index.html with jquery
<link href="assets/js/jquery.FloatLabel/jquery.FloatLabel.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="assets/js/jquery.FloatLabel/jquery.FloatLabel.js"></script>
I want to execute this script on page load
$( '.js-float-label-wrapper' ).FloatLabel();
Here's my src/index.html code
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic App</title>
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<meta name="theme-color" content="#4e8ef7">
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>
<link href="build/main.css" rel="stylesheet">
<link href="assets/js/jquery.FloatLabel/jquery.FloatLabel.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="assets/js/jquery.FloatLabel/jquery.FloatLabel.js"></script>
<script type="text/javascript">
$( '.js-float-label-wrapper' ).FloatLabel();
</script>
</head>
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The vendor js is generated during the build process
It contains all of the dependencies in node_modules -->
<script src="build/vendor.js"></script>
<!-- The main bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
</html>
It works on web version but not in ionic. How do I implement that on ionic?
I want it like this fiddle -> https://jsfiddle.net/acrmktq3/
link jquery.js in your index.html:
<script src="assets/js/jquery-3.2.1.min.js"></script>
run in node:
npm install jquery
and import it in your page like:
import * as $ from "jquery";
Try adding your JavaScript code in the bottom of your body like this:
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The vendor js is generated during the build process
It contains all of the dependencies in node_modules -->
<script src="build/vendor.js"></script>
<!-- The main bundle js is generated during the build process -->
<script src="build/main.js"></script>
<script type="text/javascript">
$( '.js-float-label-wrapper' ).FloatLabel();
</script>
</body>
You're addng it before your app initialization, the main.js wasn't even loaded and you've already executed your code, so using it on the bottom of your code should do the trick.
Also, have you ever tried using this FloatLabel in a Ionic application? Since the page may not be loaded and the code already had been executed you need it to be more "Angular way". You can use it inside the component that's having the floating label, just use this to be able to use JQuery inside your component:
declare var $: any; // declare this bellow your page imports to be able to use jQuery
Or you can try Ionic floating Label, so there's no need to have JQuery and other library inside your project, even if it's not "uniform" design
<ion-item>
<ion-label color="primary" floating>Floating Label</ion-label>
<!-- Use the floating attribute to have your label to float when you focus on the input -->
<ion-input></ion-input>
</ion-item>
Hope this helps.
Does anyone know a easy date picker to use in an angular 2 app?
I cant seem to get jquery ui date picker working?
does anyone know an easy one to implement.
I've tried html date but it doesnt work in all browsers.
I'm using typescript with html5 and angular2
I tried installing this one: http://jankuri.com/components/angular2-datepicker
Bug I get this bug:
My current index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>test</title>
<base href="/"></base>
<meta charset="UTF-8">
<meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" type="image/png" href="/favicon32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon16.png" sizes="16x16">
<link rel="stylesheet" type="text/css" href="/css/animate.css" />
<link rel="stylesheet" type="text/css" href="/bootstraptheme.css" />
<link rel="stylesheet" type="text/css" href="/css/styles.css" />
<link href='https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300italic,300,400italic,700italic,900,700,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="node_modules/moment/moment.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.src.js"></script>
<script>
System.config({
transpiler: 'typescript',
defaultJSExtensions: true,
typescriptOptions: {
emitDecoratorMetadata: true,
},
packages: {
'angular2-google-maps': {
defaultExtension: 'js'
}
},
map: {
'ng2-datepicker': 'node_modules/ng2-datepicker'/*,
'moment': 'node_modules/moment/moment.js'*/
}
});
</script>
<script src="/angular2_google_maps.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/router.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/http.js"></script>
<script src="/firebase/firebaseNew.js"></script>
<!--<script src="https://cdn.firebase.com/js/client/2.3.2/firebase.js"></script>-->
</head>
<body id="container">
<app></app>
<script>
System.import('/app/app.component');
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-22148347-4', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>
You chould try the following Angular2-compliant libraries:
https://github.com/kekeh/mydatepicker
https://github.com/jkuri/ng2-datepicker
To use ng2-datepicker, I put the following SystemJS configuration in my index.html file:
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
},
'ng2-datepicker': {
format: 'register',
defaultExtension: 'js'
}
},
map: {
'ng2-datepicker': 'node_modules/ng2-datepicker'/*,
'moment': 'node_modules/moment/moment.js'*/
}
});
</script>
and add the moment library in my scripts:
<script src="node_modules/moment/moment.js"></script>
I use the datepicker library in my component, as described below:
import {DatePicker} from 'ng2-datepicker/ng2-datepicker';
#Component({
template: `
<datepicker [(ngModel)]="company.date"></datepicker>
`,
directives: [DatePicker]
})
I have the following error:
EXCEPTION: EXCEPTION: Error during instantiation of DatePicker!.
ORIGINAL EXCEPTION: TypeError: moment is not a function
ORIGINAL STACKTRACE:
(...)
To make it work I commented the following line in the ng2-datepicker.ts file:
import * as moment from 'moment';
Hope it helps you,
Thierry
You can try this one without importing extra files. I made this datepicker component using bootflat as styling framework and one datepicker library. For more info you can refer here.
We wanted to develop a custom datepicker for our project and we couldn't find a lot of Angular2 Datepickers at that point and hence ended up writing a simple one myself.
It's a simple one which selects the date and you can also specify dates that you want to disable before and after. It uses event emitter and sets the selected date in a text field. It is published in npm and I am working on improving it as well.
https://www.npmjs.com/package/angular2-simple-datepicker
Hope it helps.
All feedback welcome.
Update - Added screenshot of the Datepicker with input date highlighted (orange) and hover color displayed (grey). Click here This can be downloaded from the npmjs link, do npm install and then npm run to view the Datepicker demo. It includes an app.js file which uses the datepicker component as
""
Take a look at this one: https://github.com/vlio20/ng2-date-picker, here is a demo: https://vlio20.github.io/angular-datepicker/ . It is highly configurable and has a material theme.