I want create list

Ionic Framework ionic-v3
1

I want create list of menu items with its subvalue.
Like this.
Any help.

list
list.jpg720×1280 65.6 KB

2

Where is the Problem?

3

I don’t really like these open-ended questions, and don’t really condone them.

Are you just wanting someone else to write the whole thing for you?

4

@Judgewest2000 That’s what I’m thinking too…

1 Like
5

Hi I have created button for cart.cart-button
but I want to create button like.

zom
zom.jpg720×1280 65.8 KB
.
Any Help.
here is my code


<ion-icon name=“remove-circle” (click)=“decrement()”>
{{currentNumber}}
<ion-icon name=“add-circle” (click)=“increment()”>

6

Hello!

Component method follow link: https://ionicframework.com/docs/components/#multiline-list
Menu items works array list, create array list and include components in your menu items.

:+1:

7

sorry but i am talking about this button ‘+’ 5 ‘-’ section will you give some detail about that

8

Follow code:


<div class="btn-group">
  <a class="btn pill" href="#">Item 1</a><a class="btn pill" href="#">Item 2</a><a class="btn pill" href="#">Item 3</a>
</div>

CSS:

.btn{
	text-decoration:none;
	color:#333333;
	font-size:12px;
	font-weight:bold;
	padding:0 15px;
	line-height:32px;
	height: auto;
	display:inline-block;
	text-align:center;
	background-color:#DDDDDD;
}

.btn.round{
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

.btn.pill{
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
}

.btn-group > .btn.round:not(:first-child):not(:last-child), .btn-group > .btn.pill:not(:first-child):not(:last-child){
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

.btn-group > .btn.round:first-child, .btn-group > .btn.pill:first-child{
  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  -moz-border-radius-topright: 0;
  -moz-border-radius-bottomright: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-group > .btn.round:last-child, .btn-group > .btn.pill:last-child{
  -webkit-border-top-left-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -moz-border-radius-topleft: 0;
  -moz-border-radius-bottomleft: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.btn-group .btn + .btn{
	border-left: 1px solid rgba(0, 0, 0, .1);
	margin-left:-1px;
}

Do you change this code ok!
:+1: