ionic ionCard

<ion-card> <ion-card-header> <ion-card-subtitle>Card Subtitle</ion-card-subtitle> <ion-card-title>Card Title</ion-card-title> </ion-card-header> <ion-card-content> Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week in the woods. Wash your spirit clean. </ion-card-content> </ion-card> <ion-card> <ion-item> <ion-icon name="pin" slot="start"></ion-icon> <ion-label>ion-item in a card, icon left, button right</ion-label> <ion-button fill="outline" slot="end">View</ion-button> </ion-item> <ion-card-content> This is content, without any paragraph or header tags, within an ion-card-content element. </ion-card-content> </ion-card> <ion-card> <ion-item href="#" class="ion-activated"> <ion-icon name="wifi" slot="start"></ion-icon> <ion-label>Card Link Item 1 activated</ion-label> </ion-item> <ion-item href="#"> <ion-icon name="wine" slot="start"></ion-icon> <ion-label>Card Link Item 2</ion-label> </ion-item> <ion-item class="ion-activated"> <ion-icon name="warning" slot="start"></ion-icon> <ion-label>Card Button Item 1 activated</ion-label> </ion-item> <ion-item> <ion-icon name="walk" slot="start"></ion-icon> <ion-label>Card Button Item 2</ion-label> </ion-item> </ion-card>

ionic button

<!-- Default -->
<ion-button>Default</ion-button>

<!-- Anchor -->
<ion-button href="#">Anchor</ion-button>

<!-- Colors -->
<ion-button color="primary">Primary</ion-button>
<ion-button color="secondary">Secondary</ion-button>
<ion-button color="tertiary">Tertiary</ion-button>
<ion-button color="success">Success</ion-button>
<ion-button color="warning">Warning</ion-button>
<ion-button color="danger">Danger</ion-button>
<ion-button color="light">Light</ion-button>
<ion-button color="medium">Medium</ion-button>
<ion-button color="dark">Dark</ion-button>

<!-- Expand -->
<ion-button expand="full">Full Button</ion-button>
<ion-button expand="block">Block Button</ion-button>

<!-- Round -->
<ion-button shape="round">Round Button</ion-button>

<!-- Fill -->
<ion-button expand="full" fill="outline">Outline + Full</ion-button>
<ion-button expand="block" fill="outline">Outline + Block</ion-button>
<ion-button shape="round" fill="outline">Outline + Round</ion-button>

<!-- Icons -->
<ion-button>
  <ion-icon slot="start" name="star"></ion-icon>
  Left Icon
</ion-button>

<ion-button>
  Right Icon
  <ion-icon slot="end" name="star"></ion-icon>
</ion-button>

<ion-button>
  <ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>

<!-- Sizes -->
<ion-button size="large">Large</ion-button>
<ion-button>Default</ion-button>
<ion-button size="small">Small</ion-button>

Posted by: Guest on May-11-2020

Source

Code answers related to "ionic ionCard"

Code answers related to "Whatever"

Browse Popular Code Answers by Language

Answers for "ionic ionCard"

Code answers related to "ionic ionCard"

Code answers related to "Whatever"

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us