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.
Related
I have the default Reactify Material UI DataTable that looks like this image
I need to heavily customise it including removing the download and print functionality and add icons into the columns for status and a drop-down added into the actions column. I have been thrown in the deep end with this project and would like to know where to start. I am using Reactify and I am slowly getting used to React so just need direction on what to research and what to learn.
Do I duplicate the mui-datatables node module and start modifying that?
Thanks
You can customized it, just read the docs very carefully.
https://www.npmjs.com/package/mui-datatables
This is the link where you can find its docs and make your data tables customize, for example if you want to remove the download and print functionality you just give false values to download and print option like this
const options = {
print: false,
download: false,
};
You can add icons in the status just change the value in data array. for example
let icon = <i className="ti-close" />
const data = [
["UserName_Value", "Title_Value", icon , "Date_Value", "Action_Value"],
];
Similarly you can add dropdowns to the action columns as well, just read the docs carefully and you will get the answer.
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.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I'm trying to figure out how to implement the "android" feel on Onsen-UI by using the 'swipe' navigation.
I tried implementing idangerous swiper, but not having much luck. My idea is to combine:
http://codepen.io/negibouze/pen/jEvOYz
enter code here
http://codepen.io/negibouze/pen/wBLeyp
enter code here
When you swipe, the tabs change but has that swipe animation/effect. I also would love it if each tab/swipe was a different html and not one index file.
Any ideas or help?
Great question. There are two different approaches:
As it's done in your second example, using tabbar and gesture detector. Onsen 2.0 has a slide animation for tabbar, so you just need to add <ons-tabbar animation="slide" ... >. Onsen 2.0 is still in alpha version but it will be released in the upcoming weeks. The drawback of this approach is that the slide animation starts after the swipe action is completed.
You basically add your ons-tabbar element and then configure the gesture detector as follows:
ons.ready(function() {
// Create a GestureDetector instance over your tabbar
// The argument is the actual HTMLElement of tabbar, you can also do document.getElementById(...)
var gd = ons.GestureDetector(myTabbar._element[0]);
gd.on('swipe', function(event) {
var index = myTabbar.getActiveTabIndex();
if (event.gesture.direction === 'left') {
if (index < 3) {
myTabbar.setActiveTab(++index);
}
} else if (event.gesture.direction === 'right') {
if (index > 0) {
myTabbar.setActiveTab(--index);
}
}
})
});
Working here: https://jsfiddle.net/frankdiox/o25novtu/1/
Combining ons-tabbar and ons-carousel elements. The drawback of this approach is that ons-carousel-item cannot get a template or separated file (check the comments to find another workaround to this).
ons-tab requires a page attribute and you cannot leave it blank without errors in the console, but we can use ons-tabbar's style instead of the actual component: http://onsen.io/reference/css.html#tab-bar
We combine it now with a fullscreen carousel like the one you mentioned and add the next CSS to make the page content respect our tabbar so it does not fall over or behind it:
ons-carousel[fullscreen] {
bottom: 44px;
}
Next step, we link every tab with its corresponding carousel item:
<div class="tab-bar" id="myTabbar">
<label class="tab-bar__item" onclick="carousel.setActiveCarouselItemIndex(0)">
...
</label>
<label class="tab-bar__item" onclick="carousel.setActiveCarouselItemIndex(1)">
...
</label>
<label class="tab-bar__item" onclick="carousel.setActiveCarouselItemIndex(2)">
...
</div>
And so on. This will make that when we click on a tab the carousel changes automatically. Now we need to do the opposite connection: update the checked tab when we swipe the carousel. The tabbar is basically a set of radio buttons, so we just need to get the one we want in the carousel's postchange event and check it:
ons.ready(function(){
carousel.on('postchange', function(event){
document.getElementById('myTabbar').children[event.activeIndex].children[0].checked = true;
});
});
You can now change the content of every carousel-item-index and insert an ons-page with anything you want.
Working here: http://codepen.io/frankdiox/pen/EVpNVg
We may add a feature to make this easier in upcoming versions of OnsenUI.
Hope it helps!
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.
This is such a great script called fullPage.js located here: https://github.com/alvarotrigo/fullPage.js
I managed to load the js file and css file and even with the Void Menu Module, managed to call anchor links, but I'm struggling with the data attributes part of the implementation of this cool code! Any help is greatly appreciated! How do I get data-attributes to work in Drupal 7.25? I mean, I need to add them to the menu, so that the html looks something like this:
<ul id="menu">
<li data-menuanchor="firstPage">First slide</li>
<li data-menuanchor="secondPage">Second slide</li>
<li data-menuanchor="3rdPage">Third slide</li>
<li data-menuanchor="4thpage">Fourth slide</li>
</ul>
Just want to add it to the Main Menu in Drupal. Any idea how? Am trying to implement this on my homepage and using the Adaptive Sub-Theme with Display Suite Module installed, if that helps any.
Have added the following to template.php, but it makes no difference at all:
function MY_THEME_NAME_menu_link(&$variables) {
$variables['element']['#attributes']['data-menuanchor'] = substr($variables['element']['href'], 1);
return theme_menu_link($variables);
}
What am I doing wrong here?
EDIT
You can download the sitemaniacs theme here: http://dream-portal.net/dpdowns/MyProblem.zip
You can just download Adaptive Theme from Drupal here and than copy sitemaniacs to your sites/all/themes folder and than just enable the theme and go to your homepage.
There is also a folder called fullPage that is the example of it working perfectly fine without Drupal.
Files to take note of:
/sites/all/themes/sitemaniacs/scripts/custom.js
/sites/all/themes/sitemaniacs/template.php
/sites/all/themes/sitemaniacs/css/example2.css
/sites/all/themes/sitemaniacs/sitemaniacs.info
Let me know if you need anything else, k?
And Thank YOU!!! What I've done is create 4 Basic Pages, and using the Field Formatter Class Module to give the body field a class (when managing the Display) defined as section, than promoted to front page. Than I used HTML within another Node Type and used NodeBlock Module to output it as a menu item within the Menu Bar section of the blocks, with url <front>. Let me know if you need anything else for this, but I can't get it to work using this simple approach. I've tried tons of ways of doing it also, but no go for me. If you find a method that works, or perhaps something is wrong somewhere else, please please let me know.... I'm pulling out my hair on this one.
Have tried straight HTML, and now getting this:
Uncaught TypeError: Cannot read property 'top' of undefined jquery.fullPage.js?mzf0rp:506
scrollPage jquery.fullPage.js?mzf0rp:506
doneResizing jquery.fullPage.js?mzf0rp:889
The first error seems to occur in the scrollPage function on this line here:
var dtop = dest !== null ? dest.top : null;
Looks like dest.top is not defined on .top. Any idea why?
Use the Menu Link Attributes module that will let you add custom attributes per menu item.
for "href" you can use <'front'>#4thpage(front without any “cotation”) in path in menu that you create in Structure > Menus and use the Menu Link Attributes module for other attributes