--- name: ionic-components description: Use Ionic Framework UI components instead of custom HTML/CSS when building interfaces. Prefer ion- tags, use Ionic CSS variables for colors, use Ionicons for icons, and only fall back to custom styles when no Ionic equivalent exists. --- # Ionic Components Skill ## Component Priority When building any UI element, always prefer Ionic components over custom HTML/CSS. 1. **Check Ionic first** — before creating any UI block, verify if an Ionic component exists for the use case 2. **Use Ionic component** if available — with proper `ion-` tags and Ionic properties 3. **Custom HTML/CSS only** if Ionic has no equivalent component or lacks required functionality ## Component Properties (Angular) ### String properties — без скобок ```html Submit

``` ### Boolean properties — ALWAYS use square brackets Boolean without brackets is always treated as `true`, even if the value is `"false"`. ```html

Submit

``` ### Dynamic values — всегда в квадратных скобках ```html {{ count }}

Click ``` ### Events — в круглых скобках ```html Submit

``` ### Rule | Type | Syntax | Example | |------|--------|---------| | String (static) | `attr="value"` | `color="primary"` | | Boolean | `[attr]="value"` | `[disabled]="true"` | | Number | `[attr]="value"` | `[min]="0"` | | Dynamic / variable | `[attr]="variable"` | `[color]="myColor"` | | Event | `(event)="handler()"` | `(ionChange)="fn()"` | --- ## Looking Up Components When unsure if an Ionic component exists or how to use it: 1. **Context7 first** (if available) — resolve `ionic` and fetch relevant docs 2. **Fallback** — check https://ionicframework.com/docs/components directly --- ## Icons — Ionicons Always use Ionicons for icons. Browse available icons at https://ionic.io/ionicons ### Setup If using Ionic Framework — Ionicons is included by default, no setup needed. Without Ionic Framework, add before closing ``: ```html ``` ### Basic Usage ```html ``` ### Variants Each icon has three variants: ```html

``` Use `outline` for iOS-style, `sharp` for MD/Android-style, or let the platform decide: ```html ``` ### Size ```html ``` Or via CSS (use multiples of 8): ```css ion-icon { font-size: 32px; } ``` ### Color Use Ionic CSS variables: ```css ion-icon { color: var(--ion-color-primary); } ``` ### Stroke Width (outline variant only) ```css ion-icon { --ionicon-stroke-width: 16px; /* default is 32px */ } ``` ### Icon Slots `ion-icon` uses the `slot` attribute to position itself **inside** a parent component. | Slot | Parent | Effect | |------|--------|--------| | `slot="start"` | `ion-button`, `ion-item`, `ion-input`, `ion-select` | Icon on the left side | | `slot="end"` | `ion-button`, `ion-item`, `ion-input`, `ion-select` | Icon on the right side | | `slot="icon-only"` | `ion-button` | Icon fills the button — no text, larger tap target, adjusted sizing | #### slot="start" and slot="end" ```html

United States

United Kingdom

``` #### slot="icon-only" Use when the button contains only an icon and no text. Ionic automatically applies correct sizing and padding. ```html

``` ❌ Don't use `slot="icon-only"` without text when there's text next to the icon — use `slot="start"` or `slot="end"` instead. ```html

Add Item

Add Item ``` ### Accessibility Decorative icons — hide from assistive technology: ```html ``` Interactive icons — add a label: ```html ``` Icon inside a button — label the button, hide the icon: ```html ``` ### Icon in ion-item ```html

Profile

``` --- ## Slots Slots are used to position content inside Ionic components. Always use the correct slot for the component context. ### Universal Slots (most components) | Slot | Position | |------|----------| | `start` | Left side in LTR, right side in RTL | | `end` | Right side in LTR, left side in RTL | ### ion-button Slots | Slot | Usage | |------|-------| | *(default)* | Button label text | | `start` | Icon or content before text | | `end` | Icon or content after text | | `icon-only` | Icon with no text — adjusts sizing automatically | ```html

Back

Continue

``` ### ion-item Slots | Slot | Usage | |------|-------| | *(default)* | Main content (label, input, etc.) | | `start` | Decorative visuals — icon, avatar, thumbnail | | `end` | Actions or metadata — toggle, badge, timestamp | ```html

Notifications

John Doe

``` ### ion-toolbar Slots | Slot | Position | iOS | MD | |------|----------|-----|----| | `start` | Left | Left | Left | | `end` | Right | Right | Right | | `primary` | Action side | Right | Right | | `secondary` | Secondary side | Left | Right (after primary) | | `content` | Center | Center | Center | ```html

Page Title

``` ### ion-fab-button Slots | Slot | Usage | |------|-------| | *(default)* | Icon inside the FAB button | ```html

``` ### Common Mistakes ❌ Using `slot="icon-only"` outside of a button ❌ Using `slot="start"` on text content in `ion-item` (use default slot) ❌ Placing `ion-buttons` directly in `ion-toolbar` without a slot ❌ Using `slot="fixed"` anywhere other than `ion-content` --- ## Ionic CSS Variables Never use hardcoded colors. Always use Ionic CSS variables: Common variables: - `--ion-color-primary`, `--ion-color-secondary`, `--ion-color-tertiary` - `--ion-color-success`, `--ion-color-warning`, `--ion-color-danger` - `--ion-color-light`, `--ion-color-medium`, `--ion-color-dark` - `--ion-background-color`, `--ion-text-color` - `--ion-font-family` ## Custom Styles If custom styles are needed: - Use Ionic CSS variables for all colors and typography - Follow Ionic's spacing scale where possible - Scope styles to component to avoid conflicts --- ## Examples ### Button ✅ Correct: ```html Submit Delete ``` ❌ Incorrect: ```html ``` ### Input ✅ Correct: ```html ``` ❌ Incorrect: ```html ``` ### List ✅ Correct: ```html

Item 1

Item with icon

``` ❌ Incorrect: ```html

Item 1

``` ### Card ✅ Correct: ```html

Title

Subtitle

Content goes here

``` ❌ Incorrect: ```html

Title

``` ### Colors ✅ Correct: ```css color: var(--ion-color-primary); background: var(--ion-color-light); border-color: var(--ion-color-medium); ``` ❌ Incorrect: ```css color: #3880ff; background: #f4f5f8; border-color: #92949c; ``` ### Icons ✅ Correct: ```html

``` ❌ Incorrect: ```html

```

ionic-components

Installation

SKILL.md