In my project I am tasked to create a scrollable filter buttons for a list. I was thinking to use either ion-slides or ion-segment, but using ion-slides gives me no option for segment changing, while ion-segment does not fit the requirement on the design (3.5 buttons showed before scrolling, accurate margins). Therefore I come up with this:
<ion-segment scrollable="true" (ionChange)="segmentChange($event)">
<ion-slides [options]="slideOption">
<ion-slide>
<ion-segment-button class="buttonActive" value="a">A</ion-segment-button>
</ion-slide>
<ion-slide>
<ion-segment-button class="button" value="b">B</ion-segment-button>
</ion-slide>
<ion-slide>
<ion-segment-button class="button" value="c">C</ion-segment-button>
</ion-slide>
<ion-slide>
<ion-segment-button class="button" value="d">D</ion-segment-button>
</ion-slide>
</ion-slides>
</ion-segment>
I am wondering if my approach is correct or there are a simpler solution. This method also gives me a problem of unable to create padding inside the ion-segment (I tried putting ion-label inside but cannot create whitespace so that the text become more centered)
You are closing your button in down line. Close on the same line.
Related
The following code displays data in this way current display
<div id="scrollDiv">
<ion-content style="height: 280px" [scrollEvents]="true">
<ion-grid>
<ion-row *ngFor="let item of zdruzenData; let i = index" >
<ion-col size="auto" class="cell-class" (click)="prikaziEvente(i+1)">{{item}}</ion-col>
<div *ngIf="izbranDanInt == i+1">
<ion-row *ngFor="let item of izbranDatumEventi">
<ion-col size="auto" class="cell-class" >{{item}}</ion-col>
</ion-row>
</div>
</ion-row>
</ion-grid>
</ion-content>
But i want it to be like this(edited with paint) wanted display.
As if the chosen day has this sublist display of timestamps(it gets displayed onclick, the logic for this is written and working). Sort of like comments on forums like reddit when you comment on the comment and it gets indented right.
So my question here comes from my lack of html, angular and ionic frontend knowledge and there is no need to stick to the ionic components like ion grid, as long as it gets display in a list-sublist way dynamically.
Your problem comes from the use of row and col inside row and col.
If you put two col in a row, on large screen it will take half the space (6 blocks each). Or you need to use
<ion-col size="12"></ion-col>
You could also use item or card to display your data.
https://stackblitz.com/edit/ionic-marezw?file=pages/home/home.html
<ion-grid>
<ion-row *ngFor="let list of dataList">
<ion-col>
<ion-item (click)="onClick()">
{{list}} (click me)
</ion-item>
<ion-item *ngIf="clicked === true">
<ion-item *ngFor="let sublist of dataSublist">{{sublist}}</ion-item>
</ion-item>
</ion-col>
</ion-row>
I don't know if you want everything to open on click, or just data under the one that is clicked.
It'll help if you show us izbranDatumEventi and zdruzenData. Or at least an equivalent construction of your code.
I am newbie to Ionic and mobile development. I am using ionic list, how to make text full available screen (see Last received in picture) and is it okay to use <ion-label> around <h4> and <p>?
<ion-list>
<ion-item *ngFor ="let connection of connections">
<ion-avatar slot="start">
<img [src]="connection?.picture">
</ion-avatar>
<ion-label text-wrap>
<h4>{{ connection?.name}}</h4>
<p text-wrap> Last received: {{ connection?.locationDesc }}</p>
</ion-label>
<ion-label slot="end" text-right>
<p item-end> 2 Messages </p>
<ion-button clear slot="end">View</ion-button>
</ion-label>
</ion-item>
It looks like it's just taking a little bit but what its actually doing is sharing 50 50 with the two labels you have put in to use as columns. It looks like its taking less than half because of the word-wrapping.
This is because labels are styled as flex items with those rules.
I managed to get it to this:
By using this code:
<ion-list>
<ion-item>
<ion-avatar slot="start">
<img src="/assets/matthew.jpg">
</ion-avatar>
<ion-label class="ion-text-wrap">
<h4>Some name</h4>
<p> Last received: All plugins have two components - the native code (Cordova) and the
JavaScript code. Cordova plugins are also wrapped in a Promise or Observable in order to provide a common
plugin interface. Below are various framework options using the Camera plugin as an example. </p>
</ion-label>
<ion-note class="ion-text-end">
<p> 2 Messages </p>
<ion-button clear>View</ion-button>
</ion-note>
</ion-item>
</ion-list>
Basically I swapped the last ion-label to be an ion-note instead.
I have also messed around with other things like removing slots that weren't required and converting the attributes to appropriate utility classes which is now considered a best-practice (since they introduced react and vue which don't support these attributes).
I'm implementing a responsive grid, like the one you can see in the image:
I know it is possible to change the order of the columns in Ionic, but is it possible to do the same with rows?
For example, currently, the order of the rows is red, yellow and green. I would like it to be green, red and yellow for large screens. Is that possible? Something like offset-* or push-* and pull-* but for rows.
Or would you try to find a better approach to this? Maybe another structure using columns, which we know can be ordered.
For now, this is the code I have:
<ion-grid>
<ion-row>
<ion-col col-12>
<ion-row>
<ion-col>
Things inside
</ion-col>
</ion-row>
<ion-row>
<ion-col>
Things inside
</ion-col>
</ion-row>
<!-- I want this row to be the first on large screens -->
<ion-row>
<ion-col>
Things inside
</ion-col>
</ion-row>
</ion-col>
<ion-col col-12>
Things inside
</ion-col>
</ion-row>
</ion-grid>
Move the data inside each row to a javascript object and change the UI to implement a forEach to load all the data
class ColData: any;
class RowData: ColData[];
class GridData: RowData[];
when screen size is your desired
window.attachEvent('onresize', function(event) {
// trigger here
});
change the order of the object
PS: you may have to use changedetector
I would like to use Ionic 4 ion-list to show a horizontal list instead of the typical vertical list. Have a look at below picture:
Let me know if you have any solution.
Have you tried ion-segment?
<ion-segment>
<ion-segment-button value="dogs">
<ion-label>Dogs</ion-label>
</ion-segment-button>
<ion-segment-button value="cats">
<ion-label>Cats</ion-label>
</ion-segment-button>
</ion-segment>
So, i have built a website using ionic 3 and angular. One particularly annoying thing i have noticed is an always visible scrollbar that appears on all browsers when the website is accessed from windows machine.
This is fine on mac. I personal understanding was this should be dependent on browser rather the OS. But sadly same browser on different OS shows different behavior.
ultimately, the question is how do i get the same behavior as on mac when the contents are more than my view area. The code for the widget looks like below:
<ion-card class="dashboard-widget-layout dashboard-widget-1-2">
<ion-card-header class="dashboard-widget-card-header"><ion-label class="dashboard-widget-header">Smart Alerts</ion-label></ion-card-header>
<ion-card-content style="height: 320px" *ngIf="expanded == false">
<ion-scroll style="width:auto" scrollY="true" class="dashboard-widget-1-2" no-padding>
<ion-grid *ngFor="let opty of optys" style="border-top:1px solid #AFAFAF;margin-right:20px" text-wrap no-padding>
<ion-row text-wrap>
<ion-col (click)="editOpty(opty)" no-padding>
<ion-label class="widget-para-title" style="cursor:pointer">{{opty.name}}</ion-label>
<ion-label class="widget-para-text" style="cursor:pointer">{{opty.account}}</ion-label>
</ion-col>
</ion-row>
<ion-row text-wrap>
<ion-col>
<ion-label *ngIf="opty.recommendedAction.length > 0" style="margin-top:0px;">{{opty.recommendedAction[0].title}}</ion-label>
</ion-col></ion-row>
</ion-grid>
</ion-scroll>
</ion-card-content>
<ion-row><ion-col></ion-col>
<ion-col col-auto text-right no-padding>
<img style="color:white;margin-right:10px" src="{{arrowType}}" (click)="expandWidget()" />
</ion-col>
</ion-row>
</ion-card>
The view looks like this on mac (all browsers):
https://www.dropbox.com/s/v5eseru0ie304vu/Screenshot%202017-09-28%2017.28.37.png?dl=0
The view looks like this on windows(all browsers):
https://www.dropbox.com/s/rbd9lkyeqawow24/SmartAlertHomePageOOWDemoSnap.PNG?dl=0
Here I am! To solve your question!!
I wasn't going to forget about you bro...
go to app.scss
and add
.scroll-content{
overflow-y: auto !important;
}
this will solve most of your problems but you may still have some issues with ionic-lab's ios emulator.
If so, go to each html page and add no-bounce and overflow-scroll="false" to ion-content.
the code should look like this
<ion-content no-bounce overflow-scroll="false">
</ion-content>
lastly for your specific case you may need to add it to ion-card-content as well which would look something like
<ion-card-content no-bounce overflow-scroll="false">
</ion-card-content>