Ionic基础组件 #

一、按钮组件（Button） #

1.1 基本用法 #

html

<!-- 基本按钮 -->
<ion-button>默认按钮</ion-button>

<!-- 不同类型 -->
<ion-button>Default</ion-button>
<ion-button fill="solid">Solid</ion-button>
<ion-button fill="outline">Outline</ion-button>
<ion-button fill="clear">Clear</ion-button>

1.2 按钮颜色 #

html

<!-- 预设颜色 -->
<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>

1.3 按钮尺寸 #

html

<!-- 不同尺寸 -->
<ion-button size="small">Small</ion-button>
<ion-button size="default">Default</ion-button>
<ion-button size="large">Large</ion-button>

1.4 按钮形状 #

html

<!-- 不同形状 -->
<ion-button shape="round">Round</ion-button>
<ion-button shape="default">Default</ion-button>

1.5 按钮扩展 #

html

<!-- 块级按钮 -->
<ion-button expand="block">Block Button</ion-button>

<!-- 全宽按钮 -->
<ion-button expand="full">Full Button</ion-button>

1.6 带图标的按钮 #

html

<!-- 图标在左侧 -->
<ion-button>
  <ion-icon slot="start" name="star"></ion-icon>
  收藏
</ion-button>

<!-- 图标在右侧 -->
<ion-button>
  发送
  <ion-icon slot="end" name="send"></ion-icon>
</ion-button>

<!-- 仅图标按钮 -->
<ion-button>
  <ion-icon slot="icon-only" name="heart"></ion-icon>
</ion-button>

1.7 按钮状态 #

html

<!-- 禁用状态 -->
<ion-button disabled>禁用按钮</ion-button>

<!-- 加载状态 -->
<ion-button>
  <ion-spinner slot="start" name="crescent"></ion-spinner>
  加载中...
</ion-button>

1.8 按钮组 #

html

<!-- 按钮组 -->
<ion-buttons>
  <ion-button>取消</ion-button>
  <ion-button>确定</ion-button>
</ion-buttons>

<!-- 工具栏按钮 -->
<ion-toolbar>
  <ion-buttons slot="start">
    <ion-button>
      <ion-icon name="menu"></ion-icon>
    </ion-button>
  </ion-buttons>
  <ion-title>标题</ion-title>
  <ion-buttons slot="end">
    <ion-button>
      <ion-icon name="search"></ion-icon>
    </ion-button>
  </ion-buttons>
</ion-toolbar>

1.9 样式定制 #

scss

// 自定义按钮样式
ion-button {
  --background: #3880ff;
  --background-hover: #4285f4;
  --background-activated: #3367d6;
  --background-focused: #2962ff;
  
  --color: #ffffff;
  --color-hover: #ffffff;
  --color-activated: #ffffff;
  --color-focused: #ffffff;
  
  --border-radius: 8px;
  --border-width: 1px;
  --border-style: solid;
  --border-color: transparent;
  
  --box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  
  --padding-top: 12px;
  --padding-bottom: 12px;
  --padding-start: 20px;
  --padding-end: 20px;
}

二、图标组件（Icon） #

2.1 基本用法 #

html

<!-- 基本图标 -->
<ion-icon name="heart"></ion-icon>

<!-- 不同尺寸 -->
<ion-icon name="heart" size="small"></ion-icon>
<ion-icon name="heart" size="large"></ion-icon>

<!-- 指定大小 -->
<ion-icon name="heart" style="font-size: 32px;"></ion-icon>

2.2 图标颜色 #

html

<!-- 预设颜色 -->
<ion-icon name="heart" color="primary"></ion-icon>
<ion-icon name="heart" color="danger"></ion-icon>
<ion-icon name="heart" color="success"></ion-icon>

<!-- 自定义颜色 -->
<ion-icon name="heart" style="color: #ff0000;"></ion-icon>

2.3 图标类型 #

Ionic使用Ionicons图标库：

html

<!-- 实心图标 -->
<ion-icon name="heart"></ion-icon>

<!-- 线框图标 -->
<ion-icon name="heart-outline"></ion-icon>

<!-- 常用图标 -->
<ion-icon name="home"></ion-icon>
<ion-icon name="search"></ion-icon>
<ion-icon name="person"></ion-icon>
<ion-icon name="settings"></ion-icon>
<ion-icon name="notifications"></ion-icon>
<ion-icon name="mail"></ion-icon>
<ion-icon name="call"></ion-icon>
<ion-icon name="camera"></ion-icon>
<ion-icon name="image"></ion-icon>
<ion-icon name="location"></ion-icon>

2.4 图标槽位 #

html

<!-- 列表项图标 -->
<ion-item>
  <ion-icon name="mail" slot="start"></ion-icon>
  <ion-label>邮件</ion-label>
</ion-item>

<!-- 按钮图标 -->
<ion-button>
  <ion-icon slot="start" name="download"></ion-icon>
  下载
</ion-button>

<!-- 输入框图标 -->
<ion-item>
  <ion-icon name="search" slot="start"></ion-icon>
  <ion-input placeholder="搜索..."></ion-input>
</ion-item>

2.5 动画图标 #

html

<!-- 旋转动画 -->
<ion-icon name="refresh" class="rotating"></ion-icon>

<!-- 脉冲动画 -->
<ion-icon name="heart" class="pulsing"></ion-icon>

scss

// 旋转动画
.rotating {
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

// 脉冲动画
.pulsing {
  animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

三、加载组件（Spinner） #

3.1 基本用法 #

html

<!-- 默认加载器 -->
<ion-spinner></ion-spinner>

<!-- 不同类型 -->
<ion-spinner name="crescent"></ion-spinner>
<ion-spinner name="dots"></ion-spinner>
<ion-spinner name="bubbles"></ion-spinner>
<ion-spinner name="circles"></ion-spinner>
<ion-spinner name="lines"></ion-spinner>
<ion-spinner name="lines-small"></ion-spinner>

3.2 加载器颜色 #

html

<!-- 预设颜色 -->
<ion-spinner color="primary"></ion-spinner>
<ion-spinner color="secondary"></ion-spinner>
<ion-spinner color="danger"></ion-spinner>

<!-- 自定义颜色 -->
<ion-spinner style="color: #ff0000;"></ion-spinner>

3.3 加载器尺寸 #

html

<!-- 不同尺寸 -->
<ion-spinner style="transform: scale(0.5);"></ion-spinner>
<ion-spinner style="transform: scale(1);"></ion-spinner>
<ion-spinner style="transform: scale(1.5);"></ion-spinner>

3.4 加载状态 #

html

<!-- 页面加载 -->
<ion-content>
  <div class="loading-container" *ngIf="isLoading">
    <ion-spinner name="crescent"></ion-spinner>
    <p>加载中...</p>
  </div>
  
  <div *ngIf="!isLoading">
    <!-- 内容 -->
  </div>
</ion-content>

3.5 样式定制 #

scss

ion-spinner {
  --color: #3880ff;
  width: 50px;
  height: 50px;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

四、徽章组件（Badge） #

4.1 基本用法 #

html

<!-- 基本徽章 -->
<ion-badge>99</ion-badge>

<!-- 带颜色 -->
<ion-badge color="primary">新</ion-badge>
<ion-badge color="danger">99+</ion-badge>
<ion-badge color="success">完成</ion-badge>

4.2 徽章位置 #

html

<!-- 图标徽章 -->
<ion-icon name="notifications">
  <ion-badge color="danger">5</ion-badge>
</ion-icon>

<!-- 按钮徽章 -->
<ion-button>
  <ion-icon name="mail"></ion-icon>
  <ion-badge color="danger">3</ion-badge>
</ion-button>

<!-- 列表项徽章 -->
<ion-item>
  <ion-label>消息</ion-label>
  <ion-badge slot="end" color="danger">12</ion-badge>
</ion-item>

4.3 徽章样式 #

scss

ion-badge {
  --background: #eb445a;
  --color: #ffffff;
  --padding-start: 8px;
  --padding-end: 8px;
  --padding-top: 4px;
  --padding-bottom: 4px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 10px;
}

五、头像组件（Avatar） #

5.1 基本用法 #

html

<!-- 图片头像 -->
<ion-avatar>
  <img src="assets/avatar.jpg" alt="头像">
</ion-avatar>

<!-- 占位头像 -->
<ion-avatar>
  <ion-icon name="person"></ion-icon>
</ion-avatar>

5.2 头像尺寸 #

html

<!-- 小头像 -->
<ion-avatar style="width: 30px; height: 30px;">
  <img src="avatar.jpg">
</ion-avatar>

<!-- 大头像 -->
<ion-avatar style="width: 80px; height: 80px;">
  <img src="avatar.jpg">
</ion-avatar>

5.3 头像位置 #

html

<!-- 列表项头像 -->
<ion-item>
  <ion-avatar slot="start">
    <img src="avatar.jpg">
  </ion-avatar>
  <ion-label>
    <h2>用户名</h2>
    <p>用户描述</p>
  </ion-label>
</ion-item>

<!-- 头像带徽章 -->
<ion-avatar>
  <img src="avatar.jpg">
  <ion-badge>在线</ion-badge>
</ion-avatar>

六、缩略图组件（Thumbnail） #

6.1 基本用法 #

html

<!-- 图片缩略图 -->
<ion-thumbnail>
  <img src="image.jpg" alt="缩略图">
</ion-thumbnail>

6.2 缩略图尺寸 #

html

<!-- 小缩略图 -->
<ion-thumbnail slot="start" style="--size: 50px;">
  <img src="image.jpg">
</ion-thumbnail>

<!-- 大缩略图 -->
<ion-thumbnail style="--size: 100px;">
  <img src="image.jpg">
</ion-thumbnail>

6.3 缩略图形状 #

scss

// 圆形缩略图
ion-thumbnail {
  --border-radius: 50%;
}

// 圆角缩略图
ion-thumbnail {
  --border-radius: 8px;
}

七、芯片组件（Chip） #

7.1 基本用法 #

html

<!-- 基本芯片 -->
<ion-chip>默认芯片</ion-chip>

<!-- 带颜色 -->
<ion-chip color="primary">Primary</ion-chip>
<ion-chip color="success">Success</ion-chip>
<ion-chip color="danger">Danger</ion-chip>

7.2 芯片内容 #

html

<!-- 带图标 -->
<ion-chip>
  <ion-icon name="heart"></ion-icon>
  <ion-label>收藏</ion-label>
</ion-chip>

<!-- 带头像 -->
<ion-chip>
  <ion-avatar>
    <img src="avatar.jpg">
  </ion-avatar>
  <ion-label>用户名</ion-label>
</ion-chip>

<!-- 可关闭 -->
<ion-chip>
  <ion-label>标签</ion-label>
  <ion-icon name="close-circle"></ion-icon>
</ion-chip>

7.3 芯片样式 #

scss

ion-chip {
  --background: #e0e0e0;
  --color: #333333;
  height: 32px;
  font-size: 14px;
}

八、分割线组件（Divider） #

8.1 基本用法 #

html

<!-- 基本分割线 -->
<ion-item-divider>
  <ion-label>分组标题</ion-label>
</ion-item-divider>

<!-- 列表分割 -->
<ion-list>
  <ion-item-divider>
    <ion-label>组一</ion-label>
  </ion-item-divider>
  <ion-item>项目1</ion-item>
  <ion-item>项目2</ion-item>
  
  <ion-item-divider>
    <ion-label>组二</ion-label>
  </ion-item-divider>
  <ion-item>项目3</ion-item>
  <ion-item>项目4</ion-item>
</ion-list>

8.2 分割线样式 #

scss

ion-item-divider {
  --background: #f4f5f8;
  --color: #333333;
  --padding-start: 16px;
  font-weight: bold;
}

九、骨架屏组件（Skeleton Text） #

9.1 基本用法 #

html

<!-- 骨架屏加载 -->
<div *ngIf="isLoading">
  <ion-list>
    <ion-item>
      <ion-avatar slot="start">
        <ion-skeleton-text animated></ion-skeleton-text>
      </ion-avatar>
      <ion-label>
        <h3><ion-skeleton-text animated style="width: 60%;"></ion-skeleton-text></h3>
        <p><ion-skeleton-text animated style="width: 80%;"></ion-skeleton-text></p>
      </ion-label>
    </ion-item>
  </ion-list>
</div>

9.2 骨架屏样式 #

scss

ion-skeleton-text {
  --background: #e0e0e0;
  --background-rgb: 224, 224, 224;
  height: 16px;
  border-radius: 4px;
}

十、最佳实践 #

10.1 组件组合 #

html

<!-- 用户卡片 -->
<ion-card>
  <ion-item>
    <ion-avatar slot="start">
      <img src="avatar.jpg">
    </ion-avatar>
    <ion-label>
      <h2>用户名</h2>
      <p>用户描述</p>
    </ion-label>
    <ion-badge slot="end" color="success">在线</ion-badge>
  </ion-item>
  <ion-card-content>
    <p>这是用户发布的内容...</p>
  </ion-card-content>
  <ion-row>
    <ion-col>
      <ion-button fill="clear" expand="block">
        <ion-icon slot="start" name="heart-outline"></ion-icon>
        点赞
      </ion-button>
    </ion-col>
    <ion-col>
      <ion-button fill="clear" expand="block">
        <ion-icon slot="start" name="chatbubble-outline"></ion-icon>
        评论
      </ion-button>
    </ion-col>
  </ion-row>
</ion-card>

10.2 响应式设计 #

scss

// 响应式按钮
ion-button {
  @media (max-width: 576px) {
    font-size: 14px;
    --padding-start: 12px;
    --padding-end: 12px;
  }
  
  @media (min-width: 576px) {
    font-size: 16px;
    --padding-start: 20px;
    --padding-end: 20px;
  }
}

10.3 无障碍支持 #

html

<!-- 添加无障碍属性 -->
<ion-button aria-label="添加到收藏">
  <ion-icon name="heart"></ion-icon>
</ion-button>

<ion-icon 
  name="notifications" 
  aria-label="通知"
  role="img">
</ion-icon>

十一、总结 #

11.1 组件对比 #

组件	用途	特点
Button	用户交互	多种样式、颜色、尺寸
Icon	图标显示	丰富的图标库
Spinner	加载状态	多种动画效果
Badge	数量提示	小巧、醒目
Avatar	用户头像	支持图片和图标
Chip	标签展示	可组合、可关闭

11.2 下一步 #

掌握了基础组件后，接下来让我们学习表单组件，了解Ionic的表单处理！