I've set up my theme's pallet (the colours arnt actually all #0000):
const theme = createMuiTheme({
palette: {
primary: {
main: '#0000',
light: '#0000',
dark: '#0000',
},
secondary: {
main: '#0000',
light: '#0000',
dark: '#0000',
},
info: {
main: '#0000',
light: '#0000',
dark: '#0000',
},
success: {
main: '#0000',
light: '#0000',
dark: '#0000',
},
error: {
main: '#0000',
light: '#0000',
dark: '#0000',
},
},
});
When I use the button component with the color prop it's not using these styles:
<Button variant="contained">Default</Button>
<Button variant="contained" color="primary">
Primary
</Button>
<Button variant="contained" color="secondary">
Secondary
</Button>
<Button variant="contained" disabled>
Disabled
</Button>
<Button
variant="contained"
color="primary"
href="#contained-buttons"
>
Link
</Button>
Why does it not use the colour values from my pallet? Sure I could override the CSS in the button component, but that's the point of the pallet system if I have to do this?
Related
node v16.13.2
my package.json
"dependencies": {
...
"#ionic/vue": "^6.0.13",
"#ionic/vue-router": "^6.0.13",
"#popperjs/core": "^2.11.2",
"axios": "^0.25.0",
"core-js": "^3.6.5",
"vue": "^3.2.31",
"vue-axios": "^3.4.0",
"vue-router": "^4.0.14",
"vuex": "^4.0.2"
},
"devDependencies": {
"#babel/eslint-parser": "^7.17.0",
"#babel/eslint-plugin": "^7.16.5",
"#capacitor/cli": "3.4.1",
"#vue/cli-plugin-babel": "^5.0.4",
"#vue/cli-plugin-eslint": "^5.0.4",
"#vue/cli-service": "^5.0.4",
"#vue/compiler-sfc": "^3.2.31",
"eslint": "^8.12.0",
"eslint-plugin-vue": "^8.5.0",
"eslint-webpack-plugin": "^3.1.1"
},
App.vue
<template>
<ion-app><ion-page>
<router-view />
</ion-page></ion-app>
</template>
cart index component
<ion-content>
Cart
</ion-content>
cart archive component
<ion-content>
Archive
</ion-content>
router
{
path: "/cart/",
name: "cartTabsNav",
component: () => import("#/cart/TabsNav.vue"),
children: [
{
path: '',
redirect: 'index',
},
{
path: "index",
name: "cartIndexAction",
component: () => import("#/cart/IndexAction.vue"),
},
{
path: "archive",
name: "cartArchiveAction",
component: () => import("#/cart/ArchiveAction.vue"),
},
],
},
component TabsNav.vue
<ion-page>
<ion-content>
<ion-tabs>
<ion-router-outlet></ion-router-outlet>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="index" href="/cart/index">
<ion-icon :icon="cart"></ion-icon>
<ion-label>Cart</ion-label>
</ion-tab-button>
<ion-tab-button tab="archive" href="/cart/archive">
<ion-icon :icon="reorderFourOutline"></ion-icon>
<ion-label>Orders</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-content>
</ion-page>
But I see double layers with tabs! More on the screen.
And when I touch on the tabs I see this.
This is code from docs ionicframework.com https://ionicframework.com/docs/vue/navigation#working-with-tabs
I don't know what else to add, but the validator of the question asks so.
I have an ionic tab page containing event specific information to display.
Routing is set up so that you are routed to a specific event's tab page
tabs.page.html
<ion-tabs>
<ion-tab-bar slot="bottom" mode="md">
<ion-tab-button tab="token">
<ion-icon src="/assets/svg/ticket-star.svg"></ion-icon>
<ion-label>Tokens</ion-label>
</ion-tab-button>
<ion-tab-button tab="transactions">
<ion-icon src="/assets/svg/empty-wallet-change.svg"></ion-icon>
<ion-label>Transactions</ion-label>
</ion-tab-button>
<div class="centerd-btn"></div>
<ion-tab-button tab="swipe">
<ion-icon src="/assets/svg/people.svg"></ion-icon>
<ion-label>Swipe</ion-label>
</ion-tab-button>
<ion-tab-button tab="buy">
<ion-icon src="/assets/svg/card.svg"></ion-icon>
<ion-label>Buy</ion-label>
</ion-tab-button>
<ion-tab-button tab="user" hidden>
</ion-tab-button>
<ion-tab-button tab="notifications" hidden>
</ion-tab-button>
<ion-tab-button tab="help" hidden>
</ion-tab-button>
</ion-tab-bar>
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
<ion-fab-button routerLink="scan" routerLinkActive="active-tab" [routerLinkActiveOptions]="{exact:true}">
<ion-icon src="/assets/svg/qr-scan.svg"></ion-icon>
</ion-fab-button>
<ion-label>Scan at bar</ion-label>
</ion-fab>
</ion-tabs>
tabs-routing.module.ts
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { TabsPage } from './tabs.page';
const routes: Routes = [
{
path: ':eventId',
component: TabsPage,
children: [
{
path: 'home',
loadChildren: () => import('../home/home.module').then(m => m.HomePageModule)
},
{
path: 'token',
loadChildren: () => import('../token/token.module').then(m => m.TokenPageModule)
},
{
path: 'transactions',
loadChildren: () => import('../transactions/transactions.module').then(m => m.TransactionsPageModule)
},
{
path: 'swipe',
loadChildren: () => import('../swipe/swipe.module').then(m => m.SwipePageModule)
},
{
path: 'buy',
loadChildren: () => import('../buy/buy.module').then(m => m.BuyPageModule)
},
{
path: 'scan',
loadChildren: () => import('../scan/scan.module').then(m => m.ScanPageModule)
},
{
path: 'notifications',
loadChildren: () => import('../notifications/notifications.module').then(m => m.NotificationsPageModule)
},
{
path: 'help',
loadChildren: () => import('../help/help.module').then(m => m.HelpPageModule)
},
{
path: 'user',
loadChildren: () => import('../user/user.module').then(m => m.UserPageModule)
},
{
path: '',
redirectTo: '/event/swipedrinks/home',
pathMatch: 'full'
}
]
},
{
path: '',
component: TabsPage
}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TabsPageRoutingModule {}
All works fine except for this <ion-fab> element's routing.
I can click it the first time and the app is routed correctly to for example /event/A4OUJTpgYfeNEF6e5k4v/scan but after clicking on another tab element you can't go back to the scan part.
I don't have any console errors so I don't really know where to start.
I guess Ionic is handling the tab attribute not the same as routerLink attribute in the ion-fab element but what is the alternative then?
Hi it seems like there is some issue in sol ionic faced same issue at side nav resolved issue by using (click)="navController.naviagteForward('event/scan')" and in constructor constructor(public navController:NavController)
I'm using TinyMCE 5 and Media plugin with the following configuration:
tinymce.init({
selector: "textarea",
menubar: false,
plugins: [
"media image",
],
toolbar: "media image",
media_dimensions: false,
media_alt_source: false,
media_poster: false,
images_upload_url: 'postAcceptor.php',
images_upload_handler: function (blobInfo, success, failure) {
setTimeout(function () {
success('http://moxiecode.cachefly.net/tinymce/v9/images/logo.png');
}, 2000);
},
});
Is there any way to remove (disable, hide) the "Embed" tab (section) without affecting other components/controls?
I've checked the documentation for Media plugin but there's nothing about that...
Also, applying this CSS:
<style>
.tox .tox-dialog__body-nav-item:nth-child(2) {
display: none;
}
</style>
hides the "Embed" tab on media-dialog, but it also hides tabs on other dialogs. For example, it would also hide the "Upload" tab on dialog for image.
FIDDLE: http://fiddle.tinymce.com/cwhaab
On Github there is a "feature-request" for this: https://github.com/tinymce/tinymce/issues/6082 ... but I'm looking for a workaround (until this new feature/option becomes available).
I'm using TinyMCE 5.4.2
REALLY BAD CODE ALERT!
Unfortunately there isn't any clean way to configure editor to make it work as you want. That being said, really bad approach would be to filter tab by going through the tab list after media command is executed and hiding any tab which contains text Embed.
Take a look at this playground demo:
tinymce.init({
selector: "textarea",
menubar: false,
plugins: [
"media image",
],
toolbar: "media image",
media_dimensions: false,
media_alt_source: false,
media_poster: false,
images_upload_url: 'postAcceptor.php',
images_upload_handler: function(blobInfo, success, failure) {
setTimeout(function() {
success('http://moxiecode.cachefly.net/tinymce/v9/images/logo.png');
}, 2000);
},
setup: function(editor) {
editor.on('ExecCommand', (event) => {
const command = event.command;
if (command === 'mceMedia') {
const tabElems = document.querySelectorAll('div[role="tablist"] .tox-tab');
tabElems.forEach(tabElem => {
if (tabElem.innerText === 'Embed') {
tabElem.style.display = 'none';
}
});
}
});
}
});
<form method="post" action="dump.php">
<textarea name="content"></textarea>
</form>
Just use CSS to hide the second element;
<style>
.tox .tox-dialog__body-nav-item:nth-child(2) {
display: none;
}
</style>
<script type="text/javascript">
tinymce.init({
selector: "textarea",
menubar: false,
plugins: [
"media",
],
toolbar: "media",
media_dimensions: false,
media_alt_source: false,
media_poster: false,
});
</script>
<form method="post" action="dump.php">
<textarea name="content"></textarea>
</form>
In the real version, you should put the control inside a div and target that with the selector as well so as not to effect all tinymce controls
Edit:
By putting a selector I mean do the following
<style>
.onlyEffectMe .tox .tox-dialog__body-nav-item:nth-child(2) {
display: none;
}
</style>
<script type="text/javascript">
tinymce.init({
selector: "textarea",
menubar: false,
plugins: [
"media",
],
toolbar: "media",
media_dimensions: false,
media_alt_source: false,
media_poster: false,
});
</script>
<form method="post" action="dump.php">
<div class="onlyEffectMe">
<textarea name="content"></textarea>
</div>
</form>
I am working in Ionic App and I want to show the submenu in the sidebar. I am fetching the menus using the *ngFor but the problem is that I am not able to show the submenu.
This is my app.html:
<ion-menu [content]="content" side="left" type="overlay">
<ion-content class="mymenu22">
<ion-grid class="formenu11">
<h1 class="mymenuh11">OTHERS</h1>
</ion-grid>
<ion-list>
<button menuClose ion-item *ngFor="let p1 of pages1" (click)="openPage(p1)" class="menu2">
<ion-icon name="{{p1.name1}}"></ion-icon> {{p1.title1}}
</button>
</ion-list>
</ion-content>
</ion-menu>
In this, I am showing the menus in the sidebar and I want to show the submenu for the first menu.
This is my app.component.ts:
pages1: Array<{title1: string, component: any, name1: string}>;
this.pages1 = [
{ title1: 'Manage Account', component: ManageaccountPage, name1: 'settings' },
{ title1: 'About Us', component: AboutPage, name1: 'people' },
{ title1: 'Gallery', component: GalleryPage, name1: 'images' },
{ title1: 'Contact Us', component: ContactPage, name1: 'contacts' },
];
For the Manage Account, I want to show the submenu.
For the Manage Account, I want to show the submenu but I am not getting any code for this.
Any help is much appreciated.
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss'],
})
export class AppComponent {
public appPages = [
{ title: 'Home', url: 'home', icon: 'home' },
{ title: 'About', url: '/about', icon: 'people' },
{ title: 'Contact', url: '/contact', icon: 'call' },
{ title: 'Gallery', url: '/gallery', icon: 'images' },
{ title: 'Setting', url: '/setting', icon: 'settings',
children: [
{ title: 'sub-menu1', url: '/sub-menu1', icon: 'person' },
{ title: 'sub-menu2', url: '/sub-menu2', icon: 'person' },
{ title: 'sub-menu3', url: '/sub-menu3', icon: 'pulse' }
] }
];
constructor() {}
}
==app.component.html==
<ion-app>
<ion-split-pane >
<ion-menu menuId="custom">
<ion-header>
<ion-toolbar >
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div *ngFor="let p of appPages">
<ion-menu-toggle *ngIf="p.url">
<ion-item (click)="sidemenuClick(p)" [routerDirection]="'root'" [routerLink]="[p.url]" [routerLinkActive]="['active-menu']">
<ion-icon slot="start" [name]="p.icon"></ion-icon>
<ion-label class="menu-name">
{{p.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
<ion-item button *ngIf="p.children?.length > 0" (click)="p.open = !p.open"
[class.active-parent]="p.open" detail="false">
<ion-icon slot="start" [name]="p.icon"></ion-icon>
<ion-label class="menu-name">
{{p.title}}
</ion-label>
<ion-icon slot="end" name="arrow-dropdown" *ngIf="p.open"></ion-icon>
<ion-icon slot="end" name="arrow-dropright" *ngIf="!p.open"></ion-icon>
</ion-item>
<ion-list *ngIf="p.open">
<ion-menu-toggle>
<ion-item style="padding-left: 20px;" *ngFor = "let sub of p.children" (click)="sidemenuClick(p)" [routerDirection]="'root'" [routerLink]="[sub.url]" [routerLinkActive]="['active-menu']">
<ion-icon slot="start" [name]="sub.icon"></ion-icon>
<ion-label class="menu-name">
{{sub.title}}
</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</div>
</ion-content>
<ion-footer class="bar-stable" (click)="logout()">
<ion-menu-toggle>
<ion-item class="sign-out">
<ion-icon class="app-color logo" slot="end" name="log-out"></ion-icon>
<ion-label class="app-color name">Sign Out</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-footer>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
</ion-split-pane>
</ion-app>
The following notation no longer seems to disable autocomplete for text fields in Ionic:
<ion-input autocomplete="off">
<ion-input autocomplete="false">
<ion-input autocomplete="nope">
IonicModule.forRoot(MyApp, { scrollAssist: false, autoFocusAssist: false, autocomplete: 'off' }),
IonicModule.forRoot(MyApp, { scrollAssist: false, autoFocusAssist: false, autocomplete: false }),
Has anyone had any success getting this working with an alternative notation?