Card Design


#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


#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.


#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


#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


#13

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


#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

  <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 …