<ion-toolbar color="dark">
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>
Home
</ion-title>
</ion-toolbar>
Menu icon is not visible in the above ionic4 code
You need to add it explicitly in Ionic 4:
<ion-header>
<ion-toolbar color="dark">
<ion-buttons slot="start">
<ion-menu-button autoHide="true"></ion-menu-button>
<ion-back-button [defaultHref]="defaultHref"></ion-back-button>
</ion-buttons>
<ion-title>Home</ion-title>
</ion-toolbar>
</ion-header>
And you can set a default path for when no history exist: defaultHref = '/some/route/';
If this doesn't work, double check that your angular.json config includes this:
{
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
},
{
"glob": "**/*.svg",
"input": "node_modules/ionicons/dist/ionicons/svg",
"output": "./svg"
}
]
}
Try changing the color of back button, as you are giving color dark to toolbar, it might be the case it got hidden because of that.
Related
I use bootstrap-vue in my nuxt project and bootstrap-vue-icons for icons. Everything works nice, but i can't colorize my icons.
Plugin import
import Vue from 'vue'
import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'
Vue.use(BootstrapVue)
Vue.use(BootstrapVueIcons)
Icon component
<b-icon variant="danger" icon="check-circle"></b-icon>
package.json
"bootstrap-vue": {
"version": "2.23.1",
"requires": {
"#nuxt/opencollective": "^0.3.2",
"bootstrap": "^4.6.1",
"popper.js": "^1.16.1",
"portal-vue": "^2.1.7",
"vue-functional-data-merge": "^3.1.0"
}
},
I have tried as variant prop either dinamicaly binding color styles, it has not worked.
There are multiple ways of doing this:
Notic variant="danger" gives the red color by default. Watch this
you can add id and style it with css like:
<b-icon `variant="danger"` id="danger_icon" icon="check-circle" ></b-icon>
#danger_icon{
color:blue;
}
or change the default variant="danger" which is a class .text-danger color using css again
`<b-icon variant="danger" icon="check-circle" ></b-icon>`
.text-danger {
color: black !important;
}
Watch this demo: jsfiddle
When testing the below Vue component on my iPhone or MacBook (differing results on chrome/safari), I have stuttery/laggy transitions when different classes are toggled on or off. This particular example is of a Vertical Navigation menu, that is hidden off screen on mobile, then moved into position when a button is clicked.
On iOS safari, the transition is slow and individual frames are visible. On iOS Chrome the menu "snaps" into place, skipping the transition altogether. On MacOS Chrome/Safari, the transition lags a small amount.
<template>
<div class="w-0 md:w-1/5 absolute sm:relative sm:block h-full transform top-0 w-64 select-none
overflow-auto ease-in-out transition-all duration-300 z-30 -translate-x-[300px] md:translate-x-0 overflow-y-hidden" :class="{'-translate-x-0': open}" v-click-outside="toggleMobileNav">
<aside class="h-full" aria-label="Sidebar">
<div class="py-4 px-3 bg-white dark:bg-primary-dark h-full overflow-y-auto shadow-lg" >
...continues
Find below my Tailwind CSS config (I'm probably missing an option):
module.exports = {
darkMode: "class",
theme: {
extend: {
zIndex: {
'-10': '-10',
},
colors: {
'primary': '#1be396',
'primary-dark': '#181818',
'primary-dark-lighter': '#232325',
'danger': '#e11d48',
'info': '#3083DC',
'warning': '#FCA311',
}
},
},
plugins: [
require('tailwind-scrollbar'),
require('autoprefixer')
],
variants: {
scrollbar: ['rounded']
},
content: [
`components/**/*.{vue,js}`,
`layouts/**/*.vue`,
`pages/**/*.vue`,
`composables/**/*.{js,ts}`,
`plugins/**/*.{js,ts}`,
`App.{js,ts,vue}`,
`app.{js,ts,vue}`
]
}
I have a carousel imported directly from bootstrap-react. It is functioning fine: it slides on its own, the three nav sliders navigate through the images, the the left slider arrow works perfectly, however, the right slider arrow only seems to have an active hover effect to click and slide at the top of the div. When I inspect the element, it shows up fine. I don't know how to address this issue as I am new to react and bootstrap.
Here is a link showing the behavior:
you can see that the link won't become active
Here is the Carousel Component:
import { Carousel } from "react-bootstrap";
import { LinkContainer } from "react-router-bootstrap";
const ProductCarouselComponent = () => {
const cursorP = {
cursor: "pointer",
};
return (
<Carousel>
<Carousel.Item>
<img
crossOrigin="anonymous"
className="d-block w-100"
style={{ height: "300px", ObjectFit: "cover" }}
src="/images/carousel/carousel-1.png"
alt="First slide"
/>
<Carousel.Caption>
<LinkContainer style={cursorP} to="/product-details">
<h3>Bestseller in Laptops</h3>
</LinkContainer>
<p>Dell Inspiron 15 3000 Laptop, 15.6 inch HD </p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
style={{ height: "300px", ObjectFit: "cover" }}
src="/images/carousel/carousel-2.png"
alt="Second slide"
/>
<Carousel.Caption>
<LinkContainer style={cursorP} to="/product-details">
<h3>Bestseller in Books</h3>
</LinkContainer>
<p>Don Quixote by Miguel de Cervantes (audiobook)</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
style={{ height: "300px", ObjectFit: "cover" }}
src="/images/carousel/carousel-3.png"
alt="Third slide"
/>
<Carousel.Caption>
<LinkContainer style={cursorP} to="/product-details">
<h3>Bestseller in Cameras</h3>
</LinkContainer>
<p>
4k Camcorder Video Camera 60FPS 48MP Vlogging Camera for Youtube WiFi 16X Digital Camera
</p>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
);
};
export default ProductCarouselComponent;
Here is the Home Page where it is imported
import ProductCarouselComponent from "../components/user/ProductCarouselComponent";
import CategoryCardComponent from "../components/user/CategoryCardComponent";
import { Row, Container } from "react-bootstrap";
const HomePage = () => {
const categories = [
"Tablets",
"Monitors",
"Games",
"Printers",
"Software",
"Cameras",
"Books",
"Videos",
];
return (
<>
<ProductCarouselComponent />
<Container /*className="bg-dark"*/>
<Row xs={1} md={2} /*lg={3}*/ className="g-4 mt-5">
{categories.map((category, idx) => (
<CategoryCardComponent key={idx} category={category} idx={idx} />
))}
</Row>
</Container>
</>
);
};
export default HomePage;
Here is the package.json page:
{
"name": "mernstack-ecommerce-site",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"bootstrap": "^5.2.2",
"bootstrap-icons": "^1.9.1",
"react": "^18.2.0",
"react-bootstrap": "^2.5.0",
"react-dom": "^18.2.0",
"react-router-bootstrap": "^0.26.2",
"react-router-dom": "^6.4.2",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
In my ionic vue.js project I using capacitor and I want to read QR Code from camera but there is no way I found on search about nothing for ionic vue.js especially. I tried more than I found this little thing 'https://www.npmjs.com/package/vue3-qrcode-reader'. With this little thing I can read QR Code from web and Android phones but iOS devices not work with that. I try capacitor-barcode-scanner to. If I try with capacitor-barcode-scanner Xcode give me error like 'you need to upgrade development target version' and upgrade to. Please tell me there is no way for build QR Code scanner app with IONIC - VUE WITH CAPACITOR? ;
Here is my errors with vue3-qrcode-reader
and here is my code which I use
<template>
<ion-page>
<ion-header class="ion-no-border" >
<ion-toolbar style="--background: var(--primary)">
<ion-buttons slot="start">
<ion-back-button text=""></ion-back-button>
</ion-buttons>
<ion-title style="color: white">Please Read Barcode</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<qr-stream #decode="onDecode" class="mb">
<div style="color: yellow;" class="frame"></div>
</qr-stream>
</ion-content>
<div style="background-color: var(--primary); width: 100%; position: fixed; bottom: 0; padding: 20px">
<p style="color: blue; text-align: center; color: white">Please Read Barcode On Paper</p>
</div>
</ion-page>
</template>
<script >
import { QrStream } from 'vue3-qr-reader';
import { Camera } from '#capacitor/camera';
import { defineComponent } from 'vue';
import {IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from "#ionic/vue";
export default defineComponent({
name: 'barcode-read',
components: {
QrStream,
IonContent,
IonPage,
IonHeader,
IonTitle,
IonToolbar,
IonBackButton,
IonButtons,
},
created() {
Camera.requestPermissions();
},
methods: {
onDecode(data) {
console.log("Decoder = "+data);
this.$router.push('Welcome')
}
},
});
</script>
A workaround could be to take a picture and then parse it using a different package like this one: https://www.npmjs.com/package/qrcode-reader, but a real-time solution would be preferable.
Which iOS version are you using? iOS versions older than 14.2 do not allow using WebRTC in a webview.
You can try capacitor plugins like this: capacitor-plugin-dynamsoft-barcode-reader
I am using Webpack + Vue + vue-fontawesome.
The code below works fine and display icons.
import #fortawesome/free-solid-svg-icons
But this one doesn't display icons.
import faCalendarCheck component in #fortawesome/free-regular-svg-icons
Similary, other components in #fortawesome/free-regular-svg-icons are not working.
Component do render comment line of HTML <\!---->.
Why #fortawesome/free-regular-svg-icons is not working?
main.js
// Font Awesome
import { library } from '#fortawesome/fontawesome-svg-core';
import {
faThLarge,
// faCalendarCheck,
faBell,
faAddressBook,
faCalculator,
faSitemap,
faEnvelope,
faWindowMaximize,
faFileAlt,
faNewspaper,
} from '#fortawesome/free-solid-svg-icons';
import {
faCalendarCheck,
} from '#fortawesome/free-regular-svg-icons';
library.add(faThLarge);
library.add(faCalendarCheck);
library.add(faBell);
library.add(faAddressBook);
library.add(faCalculator);
library.add(faSitemap);
library.add(faEnvelope);
library.add(faWindowMaximize);
library.add(faFileAlt);
library.add(faNewspaper);
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome';
Vue.component('font-awesome-icon', FontAwesomeIcon);
app.vue
<template>
<font-awesome-icon icon="calendar-check" />
</template>
package.json
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.2",
"#fortawesome/free-brands-svg-icons": "^5.2.0",
"#fortawesome/free-regular-svg-icons": "^5.2.0",
"#fortawesome/free-solid-svg-icons": "^5.2.0",
"#fortawesome/vue-fontawesome": "^0.1.1"
}
You need to specify a prefix for using non solid icons.
In your example this should work:
<font-awesome-icon :icon="['far', 'calendar-check']" />
More info can be found here.
One more tip - Instead of writing this:
library.add(faThLarge);
library.add(faCalendarCheck);
library.add(faBell);
etc...
you can simplify it to:
library.add(faThLarge, faCalendarCheck, faBell);