Bài 11: Tìm hiểu về Ion-Card

Bài 11: Tìm hiểu về Ion-Card

codersulution Thứ Tư, tháng 8 24, 2022

  

Ion-Card

Thẻ là một phần tiêu chuẩn của giao diện người dùng đóng vai trò là điểm truy cập vào thông tin chi tiết hơn. Một thẻ có thể là một thành phần đơn lẻ, nhưng thường được tạo thành từ một số tiêu đề, tiêu đề, phụ đề và nội dung. ion-cardđược chia thành nhiều thành phần phụ để phản ánh điều này. Hãy xem ion-card-content, ion-card-header, ion-card-title, ion-card-subtitle.


Usage

<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>
<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>
import React from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCardContent, IonItem, IonIcon, IonLabel, IonButton } from '@ionic/react';
import { pin, wifi, wine, warning, walk } from 'ionicons/icons';

export const CardExamples: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>CardExamples</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonCard>
          <IonCardHeader>
            <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
            <IonCardTitle>Card Title</IonCardTitle>
          </IonCardHeader>

          <IonCardContent>
            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.
      </IonCardContent>
        </IonCard>

        <IonCard>
          <IonItem>
            <IonIcon icon={pin} slot="start" />
            <IonLabel>ion-item in a card, icon left, button right</IonLabel>
            <IonButton fill="outline" slot="end">View</IonButton>
          </IonItem>

          <IonCardContent>
            This is content, without any paragraph or header tags,
            within an ion-cardContent element.
      </IonCardContent>
        </IonCard>

        <IonCard>
          <IonItem href="#" className="ion-activated">
            <IonIcon icon={wifi} slot="start" />
            <IonLabel>Card Link Item 1 activated</IonLabel>
          </IonItem>

          <IonItem href="#">
            <IonIcon icon={wine} slot="start" />
            <IonLabel>Card Link Item 2</IonLabel>
          </IonItem>

          <IonItem className="ion-activated">
            <IonIcon icon={warning} slot="start" />
            <IonLabel>Card Button Item 1 activated</IonLabel>
          </IonItem>

          <IonItem>
            <IonIcon icon={walk} slot="start" />
            <IonLabel>Card Button Item 2</IonLabel>
          </IonItem>
        </IonCard>
      </IonContent>
    </IonPage>
  );
};
import { Component, h } from '@stencil/core';

@Component({
  tag: 'card-example',
  styleUrl: 'card-example.css'
})
export class CardExample {
  render() {
    return [
      <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>
    ];
  }
}
<template>
  <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 :icon="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 :icon="wifi" slot="start"></ion-icon>
      <ion-label>Card Link Item 1 activated</ion-label>
    </ion-item>

    <ion-item href="#">
      <ion-icon :icon="wine" slot="start"></ion-icon>
      <ion-label>Card Link Item 2</ion-label>
    </ion-item>

    <ion-item class="ion-activated">
      <ion-icon :icon="warning" slot="start"></ion-icon>
      <ion-label>Card Button Item 1 activated</ion-label>
    </ion-item>

    <ion-item>
      <ion-icon :icon="walk" slot="start"></ion-icon>
      <ion-label>Card Button Item 2</ion-label>
    </ion-item>
  </ion-card>
</template>

<script>
import { IonCard, IonCardContent, IonCardSubtitle, IonCardTitle, IonIcon, IonItem, IonLabel } from '@ionic/vue';
import { pin, walk, warning, wifi, wine } from 'ionicons/icons';
import { defineComponent } from 'vue';

export default defineComponent({
  components: { IonCard, IonCardContent, IonCardSubtitle, IonCardTitle, IonIcon, IonItem, IonLabel }
  setup() {
    return { warning };
  }
});
</script>

Properties


button

Description

Nếu true, một thẻ nút sẽ được hiển thị và thẻ sẽ có thể được gắn thẻ.

Attributebutton
Typeboolean
Defaultfalse

color

Description

Màu sắc để sử dụng từ bảng màu ứng dụng của bạn. Tùy chọn mặc định là: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", và "dark".

Attributecolor
Typestring | undefined

disabled

Description

If true, người dùng không thể tương tác với thẻ.

Attributedisabled
Typeboolean
Defaultfalse

download

Description

ThThuộc tính này hướng dẫn các trình duyệt tải xuống một URL thay vì điều hướng đến URL đó, vì vậy người dùng sẽ được nhắc lưu nó dưới dạng tệp cục bộ. Nếu thuộc tính có một giá trị, nó được sử dụng làm tên tệp được điền trước trong lời nhắc Lưu (người dùng vẫn có thể thay đổi tên tệp nếu họ muốn).

Attributedownload
Typestring | undefined

href

Description

Chứa một URL hoặc một đoạn URL mà siêu liên kết trỏ tới. Nếu thuộc tính này được đặt, thẻ liên kết sẽ được hiển thị.

Attributehref
Typestring | undefined

mode

Description

mode xác định kiểu nền tảng nào sẽ sử dụng.

Attributemode
Type"ios" | "md"

rel

Description

Chỉ định mối quan hệ của đối tượng đích với đối tượng liên kết. Giá trị là danh sách các loại liên kết được phân tách bằng dấu cách .

Attributerel
Typestring | undefined

routerAnimation

Description

Khi sử dụng bộ định tuyến, nó chỉ định hoạt ảnh chuyển tiếp khi điều hướng đến một trang khác bằng cách sử dụng href.

Type((baseEl: any, opts?: any) => Animation) | undefined

routerDirection

Description

Khi sử dụng bộ định tuyến, nó chỉ định hướng chuyển đổi khi điều hướng đến một trang khác bằng cách sử dụng href.

Attributerouter-direction
Type"back" | "forward" | "root"
Default'forward'

target

Description

Chỉ định nơi hiển thị URL được liên kết. Chỉ áp dụng khi an hrefđược cung cấp. Từ khóa đặc biệt: "_blank", "_self", "_parent", "_top".

Attributetarget
Typestring | undefined

type

Description

Loại nút. Chỉ được sử dụng khi có một onclickhoặc thuộc buttontính.

Attributetype
Type"button" | "reset" | "submit"
Default'button'

CSS Shadow Parts

NameDescription
nativeNút HTML gốc, phần tử liên kết hoặc div bao bọc tất cả các phần tử con.

CSS Custom Properties

NameDescription
--backgroundBackground of the card
--colorColor of the card

 Ion-Card-Content

ion-card-contentlà thành phần con của ion-cardnó thêm một số phần đệm nội dung. Chúng tôi khuyến nghị rằng bất kỳ nội dung văn bản nào cho thẻ nên được đặt trong dấu ion-card-content.

 Css Custom Properties

mode

Description

 mode xác định kiểu nền tảng nào sẽ sử dụng.

Attributemode
Type"ios" | "md"

Ion-Card-Header

ion-card-header là một thành phần tiêu đề cho ion-card.

Properties

color

Description

Màu sắc để sử dụng từ bảng màu ứng dụng của bạn. Tùy chọn mặc định là: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". 

Attributecolor
Typestring | undefined

mode

Description

mode xác định kiểu nền tảng nào sẽ sử dụng.

Attributemode
Type"ios" | "md"

translucent

Description

Nếu true, tiêu đề thẻ sẽ bị mờ. Chỉ áp dụng khi chế độ "ios"và thiết bị hỗ trợ backdrop-filter.

Attributetranslucent
Typeboolean
Defaultfalse

Ion-Card-Subtitle

ion-card-subtitle là một thành phần con của ion-card

Properties

color

Description

Màu sắc để sử dụng từ bảng màu ứng dụng của bạn. Tùy chọn mặc định là: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". 

Attributecolor
Typestring | undefined

mode

Description

mode xác định kiểu nền tảng nào sẽ sử dụng.

Attributemode
Type"ios" | "md"

CSS Custom properties

NameDescription
--colorColor of the card subtitle

Ion-Card-title

ion-card-subtitle là một thành phần con của ion-card

Properties

color

Description

Màu sắc để sử dụng từ bảng màu ứng dụng của bạn. Tùy chọn mặc định là: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". 

Attributecolor
Typestring | undefined

mode

Description

mode xác định kiểu nền tảng nào sẽ sử dụng.

Attributemode
Type"ios" | "md"

CSS Custom properties

NameDescription
--colorColor of the card subtitle

codersulution

Người đăng: codersulution

Chúa dùng những kẻ thất bại - vì chẳng còn loại người nào khác. Thành công không có dấu chân của kẻ lười biếng!! Đúng vậy! vi lười biếng thì chỉ muốn đi những phương tiện hiện đại. Học hành là không sợ hãi, không biết là hỏi. Chúng ta là người đi học kia mà. Mạnh mẽ và học cho tốt !!!

Đăng nhận xét

0 Nhận xét

myadcash