i am new in hybrid application development and want to make a advance carousel like http://sebelga.github.io/ionic-advanced-carousel/demo/ for ionic 3 application. i tried this link but its not working with ionic 3 or may be i did it wrong. i want this for taking user selection. is there any library for this? if you have any material like this for ionic 3 and angular 4 kindly share the link or code.
thanks in advance.
You need to leverage Slides component: https://ionicframework.com/docs/components/#slides
Slides component can be configured to have multiple slides visible at a time on the screen (see documentation). So what you want can be achieved via slides.
If you struggle with it - let me know with what exactly.
Here is a snippet of the "view" where I use variables to define amount of slides I need to show in the view:
<ion-slides "bottomPanelSlides" no-padding lazyLoading [slidesPerView]="slidesPerView">
<ion-slide *ngFor="let slide of slides; let i = index" [attr.data-index]="i" (click)="processItem($event, i); storylineAdd();">
<img [hidden]="sliderLoading" (load)="revealSlides();" src="./assets/img/filtersubject.png" [attr.data-index]="i"/>
</ion-slide>
</ion-slides>
In my example I show small images in a horizontal listview fashion. But you could do text for sure.
Related
i am trying to achieve that, and can't figure how:
|-------------80%---------------------|----20%---|
one row with 2 columns with specific width.
i don't understand something, columns (usage in Material) are look to me like rows > in rows
|-------------------------------------|----//---|
|-------------------------------------|----//---|
|-------------------------------------|----//---|
and not like my example.
How can i achieve it?
After you have imported AngularJS and Angular Material (including the css file), you need to import Angular Material in your AngularJS app. To do this, you need to add the "ngMaterial" provider in your AngularJS module, like this:
var app = angular.module("myApp", ["ngMaterial"]);
(if you skip this part, it won't work).
Then you can write your HTML code as follows
<div layout="row" layout-wrap>
<div flex="80">80%</div>
<div flex="20">20%</div>
</div>
This will create a div that will act as a container. It will contain the elements you want to show and they will be aligned in a row and, if necessary, they will be displayed in a second row. In the flex property you can specify the width (as a percentage) of the element compared to the width of the container.
Obviously you can change the name of your Angular module and the number/ width of your html elements as you want.
And there you can see some examples and a bit of documentation
First you need to declare:
md-cols Number of columns in the grid.
In your case (8+2=10):
<md-grid-list md-cols="10" ...
Then your items:
<md-grid-tile md-colspan="8">...</md-grid-tile>
<md-grid-tile md-colspan="2">...</md-grid-tile>
Codepen Sample - Angular Material Docs
I am working on a angular material application. i have a page where i need to list number of languages. i am using md-grid-list instead of conventional ul and li.
However when the page loads/refreshes the list gets overlapped for a fraction of second before it gets displayed properly.
Code
<md-grid-list md-cols-md="3" md-cols-lg="3" md-cols-sm="3" md-cols-xs="2" md-row-height-gt-sm="6:1" md-row-height="7:1" md-gutter="33px">
<md-grid-tile ng-repeat="language in vm.languages" class="language">
<a data-ng-click="vm.changeLanguage(language.key)"><span ng-bind="language.language | humanize"></span></a>
</md-grid-tile>
</md-grid-list>
it would be great if anyone can share a solution for this.
Try to put ng-cloack as an attribute of the "md-grid-list".
<md-grid-list md-cols-md="3" md-cols-lg="3" md-cols-sm="3" md-cols-xs="2" md-row-height-gt-sm="6:1" md-row-height="7:1" md-gutter="33px">
<md-grid-tile ng-repeat="language in vm.languages" class="language">
<a data-ng-click="vm.changeLanguage(language.key)"><span ng-bind="language.language | humanize"></span></a>
</md-grid-tile>
</md-grid-list>
The order in which you are loading your css,js dependencies could be causing this problem.
If you can move your material library dependency closer to the initial loading of the page, it may fix this. You could test this by putting jquery and material libraries inside your html head as one of your first dependencies to load. These dependencies being global to your app or just on your component can also cause this to happen. Again, you can test that with the previously mentioned approach.
I have also fixed a flavor of this problem naturally by using *ngIf in a div container wrapper around my html and that seemed to allow the dependencies for the site to load prior to showing any content. I would still try rearranging my dependencies, though.
I am using Ionic2 slider which is using the Swiper under the hood. I have built a carousel that shows 3 at a time but I would like the fourth slide to show partly so the user knows there is more slides (can't use pagination dots). I can't see any configuration (either on Ionic API or Swiper API) to achieve. Is anyone aware of a configuration or a "non-hacky" way of achieving this. I have attached screenshot of what the design is suppose to look.
Try something like this in the template ...
<ion-slides [options]="sliderOptions"> ... <
And in your .ts class ...
export class ClassWithSlider {
// slider options
sliderOptions = {
slidesPerView:4,
centeredSlides:true
};
}
The reference for the options can be found here, in section Swiper Parameters.
Need to create a carousel for 3 divs containing different information, the carousel should show the current active element and should also show the beginning of the next slide,please suggest a solution to do this is the proper way.
Thanks in advance.
You can try hexagon which somewhat like your expectation.
rn-carousel-transition : hexagon;
See the demo
http://blog.revolunet.com/angular-carousel/
https://github.com/revolunet/angular-carousel
Sometimes my user reports that accordion in my application is not working . So i want test whether the accordion is working or not working. I am using Angular js in frontend. Currently i am testing using protractor e2e framework.
My accordion markup looks like
before clicking the accordion division
<div id="accordion"></div>
after click
<div id="accordion-expand">
so the change is id
I find difficult while identifying css change in protractor. is there any other way to test this?
Try this:
// Given
var accordion = element(by.id('accordion'));
expect(accordion.isPresent()).toBeTruthy();
// When
accordion.click();
// Then
expect(accordion.isPresent()).toBeFalsy();
expect(element(by.id('accordion-expand')).isPresent()).toBeTruthy();
Hope this helps.