Card Design

Ionic Framework ionic-v3
1

hello guys,
i want to make my card like this please anyone tell me how to make card like this?

“Sorry For My Bad English”

image
I Want Like This.jpg720×1280 175 KB

2

Refer to this link…

And this also…

https://www.tutorialspoint.com/ionic/ionic_cards.htm

3

you can add images,buttons,texts and as as well as lists too.

4

Yes But I Want Code
And Above tutorialspoint link for ionic 1 and i’m using ionic 2

5

The code examples are available there try first them…in the ionic tutorial codes are given with the output…check them and apply it the way you want…

6

U need to add four card layout in your example…three contains images buttons and one contains a list…

If u dont get tell,i would be providing the code soon…

7

I Understand little bit but if you provide code then it will be your too much help for me

8

Ok i will be providing the similar code soon.

1 Like
9

below is the sample of what u want:-

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <ion-card>
    <ion-card-header>
  Shopping cart
  </ion-card-header>


     <img src="../assets/b.jpg"/>
 
     <ion-card-content>
    <p>BEET ROOT AND RED BEAN VEGAN BURGERS</p>
  </ion-card-content>

 <ion-row>
    <ion-col>
      <div>$ 10.00</div>
    </ion-col>
    <ion-col> 
      <div> x</div>
    </ion-col>
    <ion-col>
      <div> 3</div>
    </ion-col>
      <ion-col>
         <button ion-button icon-left clear small>
        <ion-icon name="text"></ion-icon>
         </button>
      </ion-col>
 </ion-row>

  </ion-card>

  <ion-card>
        <img src="../assets/b.jpg"/>
 
     <ion-card-content>
    <p>BEET ROOT AND RED BEAN VEGAN BURGERS</p>
  </ion-card-content>

 <ion-row>
    <ion-col>
      <div>$ 10.00</div>
    </ion-col>
    <ion-col> 
      <div> x</div>
    </ion-col>
    <ion-col>
      <div> 3</div>
    </ion-col>
      <ion-col>
         <button ion-button icon-left clear small>
        <ion-icon name="text"></ion-icon>
         </button>
      </ion-col>
 </ion-row>

  </ion-card>

   <ion-card>
        <img src="../assets/b.jpg"/>
 
     <ion-card-content>
    <p>BEET ROOT AND RED BEAN VEGAN BURGERS</p>
  </ion-card-content>

 <ion-row>
    <ion-col>
      <div>$ 10.00</div>
    </ion-col>
    <ion-col> 
      <div> x</div>
    </ion-col>
    <ion-col>
      <div> 3</div>
    </ion-col>
      <ion-col>
         <button ion-button icon-left clear small>
        <ion-icon name="text"></ion-icon>
         </button>
      </ion-col>
 </ion-row>

  </ion-card>
  <ion-card>
 
  <ion-list>
    <button ion-item>
     
      Subtotal   $543
    </button>

    <button ion-item>
     
     Shipping  $5
    </button>

    <button ion-item>
    
      Total     $548
    </button>

   

  </ion-list>

<ion-list>
   <button ion-button type="submit"  >CHECKOUT</button>
</ion-list>
</ion-card>
 
</ion-content>

I hope this helps…
modify it accordingly…

u can use ion-row and ion-col for making divisions in the card layout.

10

Sorry but image or title same row me nahi aa rahe he yahi problem he I Want same like this and it’s required for my project

image

11

Ok then add

<ion-row>
<ion-col> <img src=…/>
</ion-col>
<ion-row>
<ion-col> <p> </p>
</ion-col>
</ion-row>
</ion-col>

Then add the same code I added there for the last three items…

<ion-row>
    <ion-col>
      <div>$ 10.00</div>
    </ion-col>
    <ion-col> 
      <div> x</div>
    </ion-col>
    <ion-col>
      <div> 3</div>
    </ion-col>
      <ion-col>
         <button ion-button icon-left clear small>
        <ion-icon name="text"></ion-icon>
         </button>
      </ion-col>
 </ion-row>

And your delete button…

Now try it …

12

It’s Not Working

image
Untitled.png335×550 71.6 KB

13

Send ur code… there must be ion col after the img. And then ion-row again…

1 Like
14 
  <ion-card>
    <ion-card-header>
      <ion-row justify-content-between>
        <ion-col col-auto>
          <img src="../../assets/imgs/logo.jpg" item-left/>
        </ion-col>
        <ion-col>
          <ion-row text-wrap>
            <h2>Product Name Will Be Gose Here</h2>
          </ion-row>
          <ion-row text-wrap>
            <p>This Is My Sub</p>
          </ion-row>
          <ion-row class="buttons">
            <ion-col></ion-col>
          </ion-row>
        </ion-col>
      </ion-row>
    </ion-card-header>
  </ion-card>
15

In 7 th line u have opened ion-col but u have not closed it there… close it after the p tag.

16

See This Code It’s 99% Working But Problem Is That When I Insert ion-input the layout is bit change

image
Untitled.png381×531 118 KB 

  <ion-card>
    <ion-card-header>
      <ion-row justify-content-between>
        <ion-col col-auto>
          <img src="../../assets/imgs/logo.jpg" item-left/>
        </ion-col>
        <ion-col>
          <ion-row text-wrap>
            <h2>Product Name Will Be Gose Here</h2>
          </ion-row>
          <ion-row text-wrap>
            <p>This Is My Sub</p>
          </ion-row>
          <ion-row class="buttons">
            <ion-col>
              $10.00
            </ion-col>
            <ion-col>
              X
            </ion-col>
            <ion-col>
              <ion-input type="number" value="1"></ion-input> 
            </ion-col>
          </ion-row>
        </ion-col>
      </ion-row>
    </ion-card-header>
  </ion-card>
17

Make changes in scss file.
U can also specify the size. Which fits in the layout.

18

Yup! That’s I’m Doing Right Now

19

F9…i hpe it would work …

1 Like