Ionic Framework

ClawSkills 作者 capawesome-team v1.0.0

Comprehensive Ionic Framework expert skill consolidating core concepts, component reference, CLI usage, theming, layout, page lifecycle, framework-specific patterns for Angular/React/Vue, navigation, upgrading, Capacitor integration, and Capawesome Cloud CI/CD. Provides inline guidance for the most common Ionic development tasks and links to detailed skills for deeper coverage. Do not use for Capacitor-only apps without Ionic UI components (use capacitor-app-development), for creating a new Ionic app from scratch (use ionic-app-creation), or for detailed framework-specific patterns beyond what is summarized here (use ionic-angular, ionic-react, or ionic-vue).

源码 ↗

安装 / 下载方式

TotalClaw CLI推荐

totalclaw install clawskills:robingenz~ionic-framework

cURL直接下载，无需登录

curl -fsSL https://skills.taituai.com/api/skills/clawskills%3Arobingenz~ionic-framework/file -o ionic-framework.md

Git 仓库获取源码

git clone https://github.com/openclaw/skills/commit/47a0ecbaa6a25b2882bfa7fb545613710fddbfd6

# Ionic Framework

Comprehensive reference for Ionic Framework development — core concepts, components, theming, lifecycle, navigation, framework-specific patterns (Angular, React, Vue), upgrading, and Capawesome Cloud integration.

## Core Concepts

Ionic Framework is a UI toolkit for building cross-platform apps with web technologies. It provides 80+ pre-built UI components as Web Components prefixed with `ion-` (e.g., `<ion-button>`, `<ion-content>`).

- **Platform modes**: Components adapt styling to the platform. iOS devices use `ios` mode; Android and all other platforms use `md` (Material Design). The `<html>` element receives a class (`ios` or `md`).
- **Capacitor integration**: Ionic handles the UI; Capacitor handles native device APIs. See the `capacitor-app-development` skill for Capacitor guidance.
- **Framework support**: Ionic integrates with Angular (`@ionic/angular`), React (`@ionic/react`), and Vue (`@ionic/vue`).

## Creating a New App

```bash
npm install -g @ionic/cli
ionic start <name> <template> --type=<framework> --capacitor --package-id=<id>
```

| `--type` value       | Framework                       |
| -------------------- | ------------------------------- |
| `angular`            | Angular (NgModules)             |
| `angular-standalone` | Angular (Standalone Components) |
| `react`              | React                           |
| `vue`                | Vue                             |

| Template   | Description                 |
| ---------- | --------------------------- |
| `blank`    | Empty project, single page  |
| `tabs`     | Tab-based layout            |
| `sidemenu` | Side menu layout            |

For details, see [ionic-app-creation](https://github.com/capawesome-team/skills/blob/main/skills/ionic-app-creation/SKILL.md).

## Ionic CLI

Run `ionic --help` for the full and always up-to-date command list.

| Command              | Description                                             |
| -------------------- | ------------------------------------------------------- |
| `ionic start`        | Scaffold a new Ionic project.                           |
| `ionic serve`        | Start a local dev server with live reload (port 8100).  |
| `ionic build`        | Build the web app for production.                       |
| `ionic generate`     | Generate pages, components, services (framework-dependent). |
| `ionic info`         | Print system/environment info.                          |
| `ionic repair`       | Remove and recreate dependencies and platform files.    |

Useful `ionic serve` flags: `--external` (all network interfaces), `--port=<port>`, `--prod`, `--no-open`.

## Components Overview

Ionic provides 80+ UI components organized by category. For full API reference (properties, events, methods, slots, CSS custom properties), see the linked reference files.

### Layout

`ion-app` (root container), `ion-content` (scrollable area), `ion-header`, `ion-footer`, `ion-toolbar`, `ion-title`, `ion-buttons`, `ion-back-button`, `ion-grid`/`ion-row`/`ion-col`, `ion-split-pane`.

Key usage:

```html
<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/home"></ion-back-button>
    </ion-buttons>
    <ion-title>Page Title</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <!-- Scrollable content -->
</ion-content>
```

For details, see [components-layout.md](https://github.com/capawesome-team/skills/blob/main/skills/ionic-app-development/references/components-layout.md).

### Navigation

`ion-tabs`, `ion-tab-bar`, `ion-tab-button`, `ion-menu`, `ion-menu-button`, `ion-menu-toggle`, `ion-router-outlet`, `ion-nav`, `ion-breadcrumbs`.

For details, see [components-navigation.md](https://github.com/capawesome-team/skills/blob/main/skills/ionic-app-development/references/components-navigation.md).

### Form

`ion-input`, `ion-textarea`, `ion-select`/`ion-select-option`, `ion-checkbox`, `ion-toggle`, `ion-radio`/`ion-radio-group`, `ion-range`, `ion-datetime`/`ion-datetime-button`, `ion-searchbar`, `ion-segment`/`ion-segment-button`, `ion-input-otp`.

Key properties shared by most form components: `label`, `labelPlacement` (`floating`, `stacked`, `fixed`, `start`), `fill` (`outline`, `solid`), `errorText`, `helperText`, `disabled`, `value`, `placeholder`.

Key events:
- `ionInput` — fires on each keystroke (use for `ion-input`/`ion-textarea`).
- `ionChange` — fires when value is committed (use for `ion-select`, `ion-toggle`, `ion-checkbox`, `ion-range`).

```html
<ion-input label="Email" labelPlacement="floating" fill="outline"
           type="email" placeholder="you@example.com"
           errorText="Invalid email" helperText="Enter your email">
</ion-input>

<ion-select label="Country" labelPlacement="floating" fill="outline" interface="popover">
  <ion-select-option value="us">United States</ion-select-option>
  <ion-select-option value="de">Germany</ion-select-option>
</ion-select>
```

For details, see [components-form.md](https://github.com/capawesome-team/skills/blob/main/skills/ionic-app-development/references/components-form.md).

### Overlays

`ion-modal`, `ion-alert`, `ion-toast`, `ion-action-sheet`, `ion-loading`, `ion-popover`.

All overlays share: `isOpen` prop for declarative control, `trigger` prop to open from a button ID, `backdropDismiss`, `animated`, and lifecycle events (`didPresent`, `didDismiss`, `willPresent`, `willDismiss`).

**Sheet modal** (bottom sheet):

```html
<ion-modal [isOpen]="isOpen" [breakpoints]="[0, 0.5, 1]" [initialBreakpoint]="0.5" [handle]="true">
  <ion-content>Sheet content</ion-content>
</ion-modal>
```

For details, see [components-overlay.md](https://github.com/capawesome-team/skills/blob/main/skills/ionic-app-development/references/components-overlay.md).

### Data Display

`ion-list`, `ion-item`, `ion-item-sliding`/`ion-item-options`/`ion-item-option`, `ion-card`/`ion-card-header`/`ion-card-content`, `ion-accordion`/`ion-accordion-group`, `ion-chip`, `ion-badge`, `ion-label`, `ion-note`.

For details, see [components-data-display.md](https://github.com/capawesome-team/skills/blob/main/skills/ionic-app-development/references/components-data-display.md).

### Scroll

`ion-refresher`/`ion-refresher-content` (pull-to-refresh), `ion-infinite-scroll`/`ion-infinite-scroll-content`, `ion-reorder-group`/`ion-reorder`.

For details, see [components-scroll.md](https://github.com/capawesome-team/skills/blob/main/skills/ionic-app-development/references/components-scroll.md).

### Actions & Media

`ion-button`, `ion-fab`/`ion-fab-button`, `ion-icon`, `ion-avatar`, `ion-thumbnail`, `ion-spinner`, `ion-skeleton-text`, `ion-progress-bar`.

For details, see [components-action.md](https://github.com/capawesome-team/skills/blob/main/skills/ionic-app-development/references/components-action.md) and [components-media.md](https://github.com/capawesome-team/skills/blob/main/skills/ionic-app-development/references/components-media.md).

## Theming

### Colors

Nine default colors: `primary`, `secondary`, `tertiary`, `success`, `warning`, `danger`, `light`, `medium`, `dark`. Apply via the `color` attribute:

```html
<ion-button color="primary">Save</ion-button>
<ion-button color="danger">Delete</ion-button>
```

Customize a color by overriding all six CSS variables in `:root`:

```css
:root {
  --ion-color-primary: #3880ff;
  --ion-color-primary-rgb: 56, 128, 255;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #3171e0;
  --ion-color-primary-tint: #4c8dff;
}
```

### Global CSS Variables

Key variables: `--ion-background-color`, `--ion-text-color`, `--ion-font-family`, `--ion-safe-area-top/right/bottom/left`, `--ion-margin`, `--ion-padding`.

### Dark Mode

Three approaches (import from `@ionic/angular/css/`, `@ionic/react/css/`, or `@ionic/vue/css/`):

1. **System preference** (default): `@import '@ionic/<framework>/css/palettes/dark.system.css';`
2. **Always dark**: `@import '@i