I have a simple question but I cant't find a solution.
I created a new project in Ionic 5 and I use "sidemenu" template.
From documentation I read that close method should close the menu.
I put in the constructor "public menuCtrl: MenuController" and in ngOnInit:
this.menuCtrl.close();
but nothing works. From debug I see menuCtrl empty....
Any ideas?
The MenuController is in your top level app.component page not in the individual page so you would need to write the code inside app.component.ts.
Alternatively you can automate it by wrapping each menu item in a ion-menu-toggle like:
<ion-list>
<ion-menu-toggle auto-hide="true" *ngFor="let page of navigate">
<ion-item [routerLink]="page.url" routerDirection="forward">
<ion-icon [name]="page.icon" slot="start"></ion-icon>
{{ page.title }}
</ion-item>
</ion-menu-toggle>
</ion-list>
Related
I'm building an app with a v-app component at the root, using a v-navigation-drawer and I'd like to add a "Chat" page, where I'd also like to use v-navigation-drawer.
Problem is components don't display correctly. When I open the v-navigation-drawer of the app, it shifts the v-main of the chat page.
Opened app navigation
Closed app navigation, what I'd like regardless of whether the menu is collapsed or not
Here is my chat page's template:
<template>
<v-layout>
<v-navigation-drawer
permanent
color="deep-purple accent-6"
v-model="drawer"
:mini-variant.sync="mini"
>
<v-list-item class="px-2">
<v-list-item-avatar>
<v-img
src="https://media-exp1.licdn.com/dms/image/C4D03AQHYJ44y1nW7Rw/profile-displayphoto-shrink_800_800/0/1634940206364?e=1645660800&v=beta&t=ni_NG94SNNVHDbzpVEtKwftayQzDy1bDtse2FavjDSU"
></v-img>
</v-list-item-avatar>
<v-list-item-title>Cosmic Darine</v-list-item-title>
<v-btn icon #click.stop="mini = !mini">
<v-icon>mdi-chevron-left</v-icon>
</v-btn>
</v-list-item>
<v-divider></v-divider>
<v-list dense>
<v-list-item v-for="item in menuItems" :key="item.title" link>
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
<v-main>
<v-container>
<v-row>
I am a content
</v-row>
<v-row>
<write-bar />
</v-row>
</v-container>
</v-main>
</v-layout>
</template>
Does anyone have a solution for this problem?
I managed to find a solution. I added 'absolute' as a prop to v-navigation-drawer. The menu open above the content (I wanted that, so it's okay) and doesn't shift the content anymore. But if anyone would like to shift content when it opens only when needed, I guess you have to use the #media rule and margin with a negative value to shift back when the screen width is under a specific value.
I just started with magento. I try to replace the header links on the default page. I need to replace the text "My Cart" with the following font-awesome icon.
<i class="fas fa-shopping-cart"></i>
But I have no clue where I can change this, the documentation is complicated and not very beginner friendly.
I figured it out. You have to create your own design and assign it in the backend . Then you have to create the following folder structure if it does not exist yet.
\app\design\frontend\yourDesign\default\template\page\template
Now create a file called links.phtml with the following content:
<ul class="links"<?php if($this->getName()): ?> id="<?php echo $this->getName() ?>"<?php endif;?>>
//insert links here
</ul>
Is there a Yeoman way of creating all the necessary templates required when adding a new view in a JHipster app? I want a simple static page, or a page that doesn't require a new entity. Let's say I want to add an "About" page, I believe I would need to do the following:
Add the "About" link to src/main/webapp/app/layouts/navbar/navbar.html:
<li ui-sref-active="active">
<a ui-sref="about" ng-click="vm.collapseNavbar()">
<span class="glyphicon glyphicon-wrench"></span>
<span class="hidden-sm" data-translate="global.menu.about">About</span>
</a>
</li>
Create the following new files:
src/main/webapp/app/about/about.controller.js
src/main/webapp/app/about/about.html
src/main/webapp/app/about/about.state.js
src/main/webapp/i18n/en/about.json, and any other language...
... and add the following lines in webapp/index.html:
<script src="app/about/about.state.js"></script>
<script src="app/about/about.controller.js"></script>
... and any necessary content to src/main/webapp/i18n/en/global.json.
Am I forgetting something?
Does this need to be done manually? Is there a Yeoman command for creating a new view that is independent of an entity? I know that this question has been asked, but I'm hoping that things have changed since then.
The jhipster module Nav Element do it automatically for us. In addition it creates an angular component too for the new item in the menu.
Here is instruction how to add static page:
https://codefitter2.blogspot.com/2016/09/how-to-add-new-menu-and-static-page-in.html
You may try creating an entity without any fields or relations and with "--skip-server" option.
yo jhipster:entity about --skip-server
So i've ran into an issue, im trying to click a button...which unfortunately has the same text (IE there are 2 buttons on the page which the same text, basically a save button)
Lets pretend the button text is just "Save".
I did notice that they had different classes.
<button data-action="submit" class="btn btn-primary btn-save">Save</button>
whereas the other button is:
<button name="button" type="submit" class="btn btn-primary set-right">
<i class="glyphicon glyphicon-floppy-disk"></i> Save
</button>
I know glypicon is just an icon set....but they both seem to belong to the same class? but have different class names? (Sorry im not familiar with Rails)
It doesn't honestly matter which one I select as they both have the same function. I've seen where you can use xpath? but aren't we supposed to use css selectors or something now? (As in thats the newest way?) I may be wrong....
Could I use something like:
find(:xpath, '//button[#class="btn-save"]').click
Im trying to avoid "rails" only solutions, as not all the websites I test on are rails based.
You have various possibilities:
1) Find the button by its class
find(button.btn.btn-primary.btn-save).click
2) Find the button by its css selector or xpath (you can copy them using Google Chrome: right click -> Inspect -> right click on your element -> copy css or xpath)
find(:css, "your button css selector").click
find(:xpath, "your button xpath").click
If both buttons really do the same thing then you could always just do
first(:button, 'Save', minimum: 1).click
which will be less prone to breakage as your page structure changes than using an xpath selector. The minimum:1 option will just make #first wait a bit until at least one button is on the page (like find would) - it may not be necessary depending on your test structure
I have index.html and the catalog.html, in this page I have some Id in order to move throw diferents sections in that page.
I have a menu, with Hone and Catalog, this option it´s a dropdownmenu, so, what I need is if I´m index and clic on catalog can go to specific section (named "canal-prisma") of cataglo page, I have this code but didn´t work, thank you for your help
<li class="dropdown">
Catálogo<span class="caret"></span>
<ul class="dropdown-menu">
<li>CANAL PRISMA</li>
</ul>
Are you trying to go to a section on the page with the id or name attribute set as canal-prisma? If you set the id attribute, you should change that to the "name" attribute. Otherwise, more code is really needed to determine the answer to your question.
For example, in order to create a section of the page called canal-prisma:
Go to the Canal Prisma section
And in catalog.html:
<a name="canal-prisma">#</a>