### Verify WSL Installation

Source: https://github.com/ionic-team/ionic-framework/blob/main/docs/core/testing/usage-instructions.md

Verify that Windows Subsystem for Linux (WSL) is installed by launching it from the start menu.

```bash
ls -a -w 1 /mnt/wslg
```

--------------------------------

### Install Core Dependencies

Source: https://github.com/ionic-team/ionic-framework/blob/main/docs/core/testing/preview-changes.md

Navigate to the core directory and install the necessary npm packages.

```bash
cd core
npm install
```

--------------------------------

### Install WSL

Source: https://github.com/ionic-team/ionic-framework/blob/main/docs/core/testing/usage-instructions.md

Install WSL if it is not already present on your system. This command will install a default Linux subsystem.

```bash
wsl --install
```

--------------------------------

### Install Dependencies

Source: https://github.com/ionic-team/ionic-framework/blob/main/packages/vue-router/README.md

Install project dependencies using npm.

```shell
npm install
```

--------------------------------

### Start Focus Visible Utility Manually

Source: https://github.com/ionic-team/ionic-framework/wiki/Utilities

Import and start the focus-visible utility manually if you need it to run inside the Shadow DOM. This is an alternative to relying on `<ion-app>` to automatically start the utility.

```typescript
import {
  startFocusVisible
} from '@ionic/core/utils/focus-visible';

startFocusVisible();
```

--------------------------------

### Start Ionic Core Development Server

Source: https://github.com/ionic-team/ionic-framework/blob/main/docs/core/testing/preview-changes.md

Build Ionic components with Stencil, watch for source file changes, and start a local HTTP server. This command also opens the development server at http://localhost:3333/ in your browser.

```bash
npm start
```

--------------------------------

### Directory Structure Example

Source: https://github.com/ionic-team/ionic-framework/blob/main/docs/core/testing/best-practices.md

Tests should be organized per feature using kebab-case for directory names. This example shows a typical structure.

```diff
basic/component.e2e.ts
feature-a/component.e2e.ts
feature-b/component.e2e.ts
feature-c/component.e2e.ts
```

--------------------------------

### Install Core Dependencies

Source: https://github.com/ionic-team/ionic-framework/blob/main/packages/vue/README.md

Install dependencies for @ionic/core before building.

```shell
cd core && npm install
```

--------------------------------

### Basic Animation Setup

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/animation/test/multiple/index.html

Initializes elements and creates animation instances. This sets up the foundation for defining individual and grouped animations.

```javascript
import { createAnimation } from '../../../../dist/ionic/index.esm.js';

const squareA = document.querySelector('.square-a');
const squareB = document.querySelector('.square-b');
const squareC = document.querySelector('.square-c');
const squareCText = document.querySelectorAll('.square-c .text');
const squareCSubText = document.querySelectorAll('.square-c .text-sub');

const rootAnimation = createAnimation();
const animationA = createAnimation();
const animationB = createAnimation();
const animationC = createAnimation();
const animationCSubA = createAnimation();
const animationCSubB = createAnimation();
```

--------------------------------

### Open Alert Controller

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/alert/test/a11y/index.html

Imports and exposes the alert controller globally for use in examples.

```javascript
import { alertController } from '../../../../../dist/ionic/index.esm.js'; window.alertController = alertController;
```

--------------------------------

### Install Playwright Dependency

Source: https://github.com/ionic-team/ionic-framework/blob/main/docs/core/testing/usage-instructions.md

Install the Playwright dependency in the core directory. This command should be run whenever the Playwright version changes.

```bash
npm ci
```

--------------------------------

### Default Accordion Example

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/accordion/test/standalone/index.html

Demonstrates the basic usage of the Accordion component with default content and headers.

```html
<ion-accordion-group>
  <ion-accordion value="first">
    <ion-item slot="header" color="light">
      <ion-label>First Accordion</ion-label>
    </ion-item>
    <div class="ion-padding" slot="content">
      First content
    </div>
  </ion-accordion>
  <ion-accordion value="second">
    <ion-item slot="header" color="light">
      <ion-label>Second Accordion</ion-label>
    </ion-item>
    <div class="ion-padding" slot="content">
      Second content
    </div>
  </ion-accordion>
  <ion-accordion value="third">
    <ion-item slot="header" color="light">
      <ion-label>Third Accordion</ion-label>
    </ion-item>
    <div class="ion-padding" slot="content">
      Third content
    </div>
  </ion-accordion>
</ion-accordion-group>
```

--------------------------------

### Open ActionSheet

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/action-sheet/test/trigger/index.html

Basic example to open an ActionSheet. Ensure the ion-action-sheet element is present in your HTML.

```html
<ion-action-sheet trigger="open-action-sheet"></ion-action-sheet>
<ion-button id="open-action-sheet">Open ActionSheet</ion-button>
```

--------------------------------

### Toggle with Helper Text (Label Start)

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/toggle/test/bottom-content/index.html

Configure a toggle to display helper text below the label, starting at the beginning of the line.

```html
<ion-toggle helper-text="Label Start">Label</ion-toggle>
```

--------------------------------

### Default Chip with Icon

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/chip/test/states/index.html

Demonstrates a default chip with an icon. No specific setup is required beyond including the chip component.

```html
<ion-chip>
  <ion-icon name="star"></ion-icon>
  <ion-label>Default Chip</ion-label>
</ion-chip>
```

--------------------------------

### Item with Avatar and View Button

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/item/test/media/index.html

Example of an item with an avatar and a 'View' button.

```html
<media type="avatar"></media>
<div class="item-text-wrap">
  <ion-item>
    <ion-label>
      Avatar, right button View
    </ion-label>
  </ion-item>
</div>
<ion-button fill="clear" slot="end">View</ion-button>
```

--------------------------------

### Basic Push Example

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/grid/test/offsets/index.html

Use the 'push' attribute to shift a column to the right.

```html
<ion-col push="1">
  ion-col push 1
</ion-col>

<ion-col push="1">
  ion-col push 1
</ion-col>
```

--------------------------------

### Install Packed Core, React, and React Router in React App

Source: https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md

Install the locally packed core, React, and React Router libraries into an external React Ionic app.

```bash
npm install file:/~/ionic-core-7.0.1.tgz
npm install file:/~/ionic-react-7.0.1.tgz
npm install file:/~/ionic-react-router-7.0.1.tgz
```

--------------------------------

### Example of Theming Sass Variables (Default)

Source: https://github.com/ionic-team/ionic-framework/blob/main/docs/sass-guidelines.md

Define colors and design-related values in variables to easily manage themes. This example shows default theme variables.

```scss
// ionic.theme.default.scss

$background-color-value:        #fff;
$background-color-rgb-value:    255, 255, 255;

$text-color-value:              #000;
$text-color-rgb-value:          0, 0, 0;

$background-color:              var(--ion-background-color, $background-color-value);
$background-color-rgb:          var(--ion-background-color-rgb, $background-color-rgb-value);
$text-color:                    var(--ion-text-color, $text-color-value);
$text-color-rgb:                var(--ion-text-color-rgb, $text-color-rgb-value);
```

--------------------------------

### Create New Ionic App

Source: https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md

Use this command to start a new Ionic application with the blank starter template, which is ideal for creating code reproductions.

```bash
ionic start myApp blank
```

--------------------------------

### Build Core Package

Source: https://github.com/ionic-team/ionic-framework/blob/main/packages/angular/README.md

Navigate to the 'core' directory, install its dependencies, and build the core package. This is a prerequisite for building the Angular package.

```bash
cd core
npm install
npm run build
```

--------------------------------

### Custom Accordion Colors Example

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/accordion/test/standalone/index.html

Illustrates how to apply custom background and border colors to Accordion items.

```html
<div class="custom-colors">
  <ion-accordion-group>
    <ion-accordion value="first">
      <ion-item slot="header" color="light">
        <ion-label>Danger</ion-label>
      </ion-item>
      <div class="ion-padding" slot="content">
        Some content
      </div>
    </ion-accordion>
    <ion-accordion value="second">
      <ion-item slot="header" color="light">
        <ion-label>Primary</ion-label>
      </ion-item>
      <div class="ion-padding" slot="content">
        Some content
      </div>
    </ion-accordion>
  </ion-accordion-group>
</div>
```

--------------------------------

### Responsive Offset Example

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/grid/test/offsets/index.html

Apply offsets that change based on screen size using responsive attributes like 'offset-md'.

```html
<ion-col offset="2" offset-md="5">
  ion-col offset="2" offset-md="5"
</ion-col>

<ion-col offset="2" offset-md="5">
  ion-col offset="2" offset-md="5"
</ion-col>
```

--------------------------------

### Basic Offset Example

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/grid/test/offsets/index.html

Use the 'offset' attribute to create space to the left of a column.

```html
<ion-col offset="5">
  ion-col offset=5
</ion-col>

<ion-col offset="2">
  ion-col offset="2"
</ion-col>
```

--------------------------------

### Default Grid Padding

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/grid/test/padding/index.html

Demonstrates the default padding behavior of grid columns. No specific setup is required for this default behavior.

```html
<ion-grid>
  <ion-row>
    <ion-col>ion-col</ion-col>
    <ion-col>ion-col</ion-col>
    <ion-col>ion-col</ion-col>
    <ion-col>ion-col</ion-col>
  </ion-row>
</ion-grid>
```

--------------------------------

### Handle ionReorderStart Event

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/reorder-group/test/basic/index.html

Logs a message when the reordering process starts. This event is triggered when the user begins dragging an item.

```javascript
reorderGroup.addEventListener('ionReorderStart', () => {
console.log('ionReorderStart');
});
```

--------------------------------

### Build Angular Package

Source: https://github.com/ionic-team/ionic-framework/blob/main/packages/angular/README.md

After building the core package, navigate to the 'packages/angular' directory. Install its dependencies, sync the core build, and then build the Angular package.

```bash
cd ../packages/angular
npm install
npm run sync
npm run build
```

--------------------------------

### Open and Close Loading After Delay

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/loading/test/is-open/index.html

This example shows how to open an ion-loading component and then automatically close it after a specified delay using JavaScript.

```javascript
const loading = document.querySelector('ion-loading');
const openLoading = (timeout) => {
  loading.isOpen = true;
  if (timeout) {
    setTimeout(() => {
      loading.isOpen = false;
    }, timeout);
  }
};

loading.addEventListener('ionLoadingDidDismiss', () => {
  loading.isOpen = false;
});

// To open and close after 500ms:
// openLoading(500);
```

--------------------------------

### Title with Groups and Contacts

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/title/test/basic/index.html

This example shows a title for managing groups and contacts, with cancel and add buttons.

```html
<ion-title>Groups</ion-title>

<ion-buttons slot="end">
  <ion-button>
    <ion-icon slot="icon-only" name="add"></ion-icon>
  </ion-button>
</ion-buttons>
```

```html
<ion-title>Contacts</ion-title>

<ion-buttons slot="end">
  <ion-button>
    <ion-icon slot="icon-only" name="add"></ion-icon>
  </ion-button>
</ion-buttons>
```

--------------------------------

### Push and Pull Example

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/grid/test/offsets/index.html

Combine 'push' and 'pull' attributes to reorder columns. 'push' moves a column right, 'pull' moves it left.

```html
<ion-col push="3">
  ion-col push 3
</ion-col>

<ion-col pull="9">
  ion-col pull 9
</ion-col>

<ion-col size="3" size-md="6" push="9" push-md="6">
  ion-col size="3" size-md="6" push="9" push-md="6"
</ion-col>

<ion-col size="9" size-md="6" pull="3" pull-md="6">
  ion-col size="9" size-md="6" pull="3" pull-md="6"
</ion-col>
```

--------------------------------

### List WSL Subsystems

Source: https://github.com/ionic-team/ionic-framework/blob/main/docs/core/testing/usage-instructions.md

Check the installed Linux subsystems and their versions using the `wsl --list --verbose` command.

```bash
wsl --list --verbose
```

--------------------------------

### Customizing Activated State (CSS)

Source: https://github.com/ionic-team/ionic-framework/wiki/Button-States

Example of user customization for the activated state using CSS variables to set a solid red background.

```css
ion-button {
  --background-activated: red;
  --background-activated-opacity: 1;
}
```

--------------------------------

### Open and Close Modal with Timeout

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/modal/test/is-open/index.html

This example demonstrates opening a modal and then automatically closing it after a specified delay using `setTimeout`.

```javascript
const modal = document.querySelector('ion-modal');
const openModal = (timeout) => {
  modal.isOpen = true;
  if (timeout) {
    setTimeout(() => {
      modal.isOpen = false;
    }, timeout);
  }
};

openModal(500);
```

--------------------------------

### Basic FAB Test Setup

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/fab/test/basic/index.html

Sets up helper functions for manipulating DOM elements and managing FAB states. This includes inserting elements and closing FAB lists.

```javascript
function insertAfter(el, referenceNode) {
  referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling);
}

function add() {
  var newEle = document.createElement('f');
  var ref = document.querySelector('f');
  insertAfter(newEle, ref);
}

function closeLists() {
  var fabs = document.querySelectorAll('ion-fab');
  for (var i = 0; i < fabs.length; i++) {
    fabs[i].activated = false;
  }
}
```

--------------------------------

### Align Tab Buttons to Start

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/tab-bar/test/translucent/index.html

Customize the alignment of tab buttons within the tab bar. This example aligns them to the start of the bar.

```css
.custom-top ion-tab-button {
  justify-content: start;
}
```

--------------------------------

### Add, Update, and Remove Slotted Content

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/textarea/test/slot/index.html

This example shows how to dynamically add, update, and remove content from the 'label', 'start', and 'end' slots of Ionic Textarea components. It uses JavaScript to manipulate DOM elements and append them to the respective slots.

```javascript
const solidAsync = document.querySelector('#solid-async');
const asyncDecos = document.querySelector('#async-decorations');
const getSlottedLabel = () => {
  return solidAsync.querySelector('[slot="label"]');
};
const getSlottedStartDeco = () => {
  return asyncDecos.querySelector('[slot="start"]');
};
const getSlottedEndDeco = () => {
  return asyncDecos.querySelector('[slot="end"]');
};
const addSlot = () => {
  if (getSlottedLabel() === null) {
    const labelEl = document.createElement('div');
    labelEl.slot = 'label';
    labelEl.innerHTML = 'Comments <span class="required">
    *</span>';
    solidAsync.appendChild(labelEl);
  }
  if (getSlottedStartDeco() === null) {
    const startEl = document.createElement('div');
    startEl.slot = 'start';
    startEl.innerHTML = 'Start';
    asyncDecos.insertAdjacentElement('afterbegin', startEl);
  }
  if (getSlottedEndDeco() === null) {
    const endEl = document.createElement('div');
    endEl.slot = 'end';
    endEl.innerHTML = 'End';
    asyncDecos.insertAdjacentElement('beforeend', endEl);
  }
};
const removeSlot = () => {
  const slottedLabel = getSlottedLabel();
  if (slottedLabel !== null) {
    slottedLabel.remove();
  }
  const slottedStartDeco = getSlottedStartDeco();
  if (slottedStartDeco !== null) {
    slottedStartDeco.remove();
  }
  const slottedEndDeco = getSlottedEndDeco();
  if (slottedEndDeco !== null) {
    slottedEndDeco.remove();
  }
};
const updateSlot = () => {
  const slottedContent = getSlottedLabel();
  if (slottedContent !== null) {
    slottedContent.textContent = 'This is my really really really long text';
  }
};
```

--------------------------------

### Serve Angular App

Source: https://github.com/ionic-team/ionic-framework/blob/main/packages/angular/README.md

Serve your Angular application to view the changes. This command starts a development server and automatically reloads the app when files change.

```bash
ng serve
```

--------------------------------

### Basic Animation Setup with Gesture Control

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/animation/test/gesture/index.html

This snippet demonstrates setting up multiple animations (animationA, animationB, animationC) and a root animation that combines them. It integrates with a drag gesture on a track element to control the progress of the root animation in real-time.

```typescript
import { createAnimation, createGesture } from '../../../../dist/ionic/index.esm.js';

function clamp(val) {
  if (val > 1) { return 1; }
  else if (val < 0) { return 0; }
  return val;
}

const squareA = document.querySelectorAll('.square-a');
const squareB = document.querySelectorAll('.square-b');
const squareC = document.querySelectorAll('.square-c');
const track = document.querySelector('.track');
const cursor = document.querySelector('.track .cursor');

const rootAnimation = createAnimation();
const animationA = createAnimation('animation-a');
const animationB = createAnimation('animation-b');
const animationC = createAnimation('animation-c');

const gesture = createGesture({
  el: track,
  gestureName: 'drag',
  gesturePriority: 100,
  treshold: 5,
  onStart: () => {
    rootAnimation.progressStart();
  },
  onMove: (ev) => {
    const start = ev.startX;
    const width = track.clientWidth;
    const lower = start;
    const upper = width - start;
    const current = clamp((ev.currentX - lower) / upper);
    rootAnimation.progressStep(current);
    cursor.style.transform = `translateX(${ev.currentX - 10}px)`;
  },
  onEnd: (ev) => {
    rootAnimation.progressEnd(true, 0);
    rootAnimation.pause();
    cursor.style.transform = `translateX(${0}px)`;
  },
});

gesture.enable(true);

animationA
  .addElement(squareA)
  .duration(2000)
  .delay(5000)
  .easing('linear')
  .iterations(Infinity)
  .keyframes([
    { transform: 'scale(1) rotate(0deg)', opacity: 1, offset: 0 },
    { transform: 'scale(1.5) rotate(45deg)', opacity: 0.5, offset: 0.5 },
    { transform: 'scale(1) rotate(0deg)', opacity: 1, offset: 1 },
  ]);

animationB
  .addElement(squareB)
  .duration(500)
  .delay(2000)
  .easing('ease-in-out')
  .iterations(Infinity)
  .keyframes([
    { transform: 'scale(1) rotate(0deg)', opacity: 1, offset: 0 },
    { transform: 'scale(0.5) rotate(-45deg)', opacity: 0.5, offset: 0.5 },
    { transform: 'scale(1) rotate(0deg)', opacity: 1, offset: 1 },
  ]);

animationC
  .addElement(squareC)
  .duration(2000)
  .delay(500)
  .easing('ease-in-out')
  .iterations(Infinity)
  .keyframes([
    { transform: 'scale(1) skew(0deg)', opacity: 1, offset: 0 },
    { transform: 'scale(1.5) skew(15deg)', opacity: 0.5, offset: 0.5 },
    { transform: 'scale(1) skew(0deg)', opacity: 1, offset: 1 },
  ]);

rootAnimation.addAnimation([animationA, animationB, animationC]);
//rootAnimation.play();
```

--------------------------------

### Card Open Modal Setup

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/modal/test/card-nav/index.html

Initializes the modal and navigation components, sets the modal's dismissability, and defines the presenting element. This code is used to set up the environment for card-based navigation within a modal.

```javascript
const modal = document.querySelector('ion-modal');
const nav = document.querySelector('ion-nav');
modal.canDismiss = true;
modal.presentingElement = document.querySelector('.ion-page');
```

--------------------------------

### Menu Toggle - Open Start

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/menu-toggle/test/basic/index.html

This snippet demonstrates how to programmatically open the menu aligned to the 'start' side. The 'menu' property of the 'ion-menu-toggle' component is set to 'start'.

```javascript
function openStart() { const menuButton = document.querySelector('ion-menu-toggle'); menuButton.menu = 'start'; }
```

--------------------------------

### Install Vue Dependencies

Source: https://github.com/ionic-team/ionic-framework/blob/main/packages/vue/README.md

Install dependencies for the @ionic/vue package.

```shell
cd packages/vue && npm install
```

--------------------------------

### Basic Back Button Setup

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/back-button/test/basic/index.html

Sets up event listeners for all back button elements on the page. Use this to perform actions when a back button is clicked.

```html
<ion-back-button></ion-back-button>

<style>
  h3 {
    padding-left: 16px;
  }
  p {
    padding-left: 8px;
  }
  ion-back-button {
    display: inline-block !important;
    vertical-align: middle;
  }
</style>

<script>
  var buttons = document.querySelectorAll('ion-back-button');
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', (event) => onClick(event));
  }

  function onClick(ev) {
    console.log('clicked the button', ev.target.innerText);
  }
</script>
```

--------------------------------

### Import and Initialize Loading Controller

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/loading/test/standalone/index.html

Imports the loading controller and makes it globally accessible. This is the initial setup required for using the loading component.

```typescript
import { loadingController } from '../../../../../dist/ionic/index.esm.js';
window.loadingController = loadingController;
```

--------------------------------

### Create and Present a Basic Modal

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/modal/test/card/index.html

Demonstrates how to create a modal component with header, content, and footer, and then present it. Includes event listeners for dismiss, add, and replace actions.

```typescript
async function createModal(presentingEl, opts) {
  // create component to open
  const element = document.createElement('div');
  element.innerHTML = 
` <ion-header id="modal-header">
    <ion-toolbar>
      <ion-buttons slot="end">
        <ion-button class="add">Add</ion-button>
        <ion-button class="dismiss">Close</ion-button>
        <ion-button class="replace">Replace</ion-button>
      </ion-buttons>
    </ion-toolbar>
  </ion-header>
  <div class="content-wrapper">${renderContent()}</div>
  <ion-footer>
    <ion-toolbar>
      <ion-title>Footer</ion-title>
    </ion-toolbar>
  </ion-footer>
`
  ;

  // listen for close event
  const button = element.querySelector('ion-button.dismiss');
  button.addEventListener('click', () => {
    modalController.dismiss();
  });

  const create = element.querySelector('ion-button.add');
  create.addEventListener('click', async () => {
    const topModal = await modalController.getTop();
    presentModal(topModal, opts);
  });

  const wrapper = element.querySelector('.content-wrapper');
  const replace = element.querySelector('ion-button.replace');
  replace.addEventListener('click', () => {
    wrapper.innerHTML = renderContent();
  });

  // present the modal
  const modalElement = await modalController.create({
    presentingElement: presentingEl,
    component: element,
    ...opts,
  });

  return modalElement;
}

async function presentModal(presentingEl, opts) {
  const modal = await createModal(presentingEl, opts);
  await modal.present();
}
```

--------------------------------

### Import and Initialize Menu Controller

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/menu/test/multiple/index.html

Imports the menuController from the Ionic distribution and makes it globally accessible. This is a common setup step for menu functionality.

```javascript
import { menuController } from '../../../../../dist/ionic/index.esm.js';
window.menuController = menuController;
```

--------------------------------

### Install Vue Router Dependencies

Source: https://github.com/ionic-team/ionic-framework/blob/main/packages/vue/README.md

Install dependencies for the @ionic/vue-router package.

```shell
cd packages/vue-router && npm install
```

--------------------------------

### Open and Close Picker Programmatically

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/picker-legacy/test/is-open/index.html

Demonstrates how to open the picker by setting `isOpen` to true and close it after a specified delay. It also shows how to set picker buttons and columns.

```html
const picker = document.querySelector('ion-picker-legacy');
picker.buttons = [
  { text: 'Ok' },
  { text: 'Cancel', role: 'cancel' }
];
picker.columns = [
  {
    name: 'Colors',
    options: [
      { text: 'Red', value: 'red' },
      { text: 'Blue', value: 'blue' },
      { text: 'Green', value: 'green' },
    ],
  },
];

const openPicker = (timeout) => {
  picker.isOpen = true;
  if (timeout) {
    setTimeout(() => {
      picker.isOpen = false;
    }, timeout);
  }
};
```

--------------------------------

### Install Packed Core in JavaScript App

Source: https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md

Install the locally packed core library into an external JavaScript Ionic app.

```bash
npm install file:/~/ionic-core-7.0.1.tgz
```

--------------------------------

### Build and Sync React Test App

Source: https://github.com/ionic-team/ionic-framework/blob/main/docs/react/testing.md

Build the core, react, and react-router packages, then build the React test app, install dependencies, and sync local changes. Remember to clear the build cache and restart the dev server when re-syncing.

```shell
# Build a test app using apps/react17 as a reference
./build.sh react17
```

--------------------------------

### Modal Navigation Setup

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/nav/test/modal-navigation/index.html

Initializes modal event listeners and navigation functions. This code sets up the root page for the navigation stack when the modal is presented and defines functions for navigating forward, backward, and to the root.

```javascript
const modal = document.querySelector('ion-modal');
const nav = document.querySelector('ion-nav');

modal.addEventListener('willPresent', () => {
  nav.setRoot('page-one');
});

const dismiss = () => modal.dismiss();
const navigate = (component, componentProps) => {
  nav.push(component, componentProps);
};
const navigateBack = () => {
  nav.pop();
};
const navigateToRoot = () => {
  nav.popToRoot();
};
```

--------------------------------

### Toggle with Error Text (Label Start)

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/toggle/test/bottom-content/index.html

Configure a toggle to display error text below the label, starting at the beginning of the line.

```html
<ion-toggle error-text="Label Start">Label</ion-toggle>
```

--------------------------------

### Initialize Ionic React Project

Source: https://github.com/ionic-team/ionic-framework/blob/main/packages/react/README.md

Use the Ionic CLI to initialize a new Ionic React project. This command sets up the basic structure for your application.

```sh
ionic start myapp --type=react
```

--------------------------------

### Example Screenshot Test Artifact Name

Source: https://github.com/ionic-team/ionic-framework/blob/main/docs/core/testing/usage-instructions.md

An example of a specific artifact name for screenshot test results, showing the 2nd out of 5 test runners.

```text
test-results-2-5 --> Test results from job runner 2 out of 5.
```

--------------------------------

### Example of Theming Sass Variables (iOS)

Source: https://github.com/ionic-team/ionic-framework/blob/main/docs/sass-guidelines.md

Define colors and design-related values in variables to easily manage themes. This example shows iOS-specific theme variables.

```scss
// ionic.theme.default.ios.scss

$backdrop-ios-color:            var(--ion-backdrop-color, #000);
$overlay-ios-background-color:  var(--ion-overlay-background-color, var(--ion-color-step-100, #f9f9f9));
```

--------------------------------

### Run Build Script

Source: https://github.com/ionic-team/ionic-framework/blob/main/packages/vue-router/README.md

Execute the build script for the project using npm.

```shell
npm run build
```

--------------------------------

### Animation Delay for Content and Footer

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/content/test/basic/index.html

Sets specific animation delays for the content and footer elements. The content animation starts after 500ms, and the footer animation starts after 1000ms.

```css
ion-content.animation {
  animation-delay: 500ms;
}

ion-footer.animation {
  animation-delay: 1000ms;
}
```

--------------------------------

### Install Packed Core, Vue, and Vue Router in Vue App

Source: https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md

Install the locally packed core, Vue, and Vue Router libraries into an external Vue Ionic app.

```bash
npm install file:/~/ionic-core-7.0.1.tgz
npm install file:/~/ionic-vue-7.0.1.tgz
npm install file:/~/ionic-vue-router-7.0.1.tgz
```

--------------------------------

### Presenting and Dismissing Modals

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/modal/test/dismiss-behavior/index.html

Demonstrates how to create, present, and dismiss modals using the modal controller. Includes functionality to dismiss modals by a specific ID or using the default dismissal behavior. Also shows how to present multiple modals up to a maximum limit.

```javascript
import { modalController } from '../../../../../dist/ionic/index.esm.js'; window.modalController = modalController;
const sharedId = 'shared-modal-id';
const maxModals = 5;
let modalCount = 0;

function createModalComponent(modalNumber) {
  const element = document.createElement('div');
  const canPresentNext = modalNumber < maxModals;
  const presentNextButton = canPresentNext ? 
    `<ion-button id="present-next-modal" onclick="presentNextModal(${modalNumber + 1})">Present Modal ${ modalNumber + 1 }</ion-button>
  ` : '';
  element.innerHTML = 
    ` <ion-header>
        <ion-toolbar>
          <ion-title>Modal ${modalNumber}</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content class="ion-padding">
        <p>This is modal number ${modalNumber}</p>
        ${presentNextButton}
        <ion-button class="dismiss-by-id">Dismiss By ID</ion-button>
        <ion-button class="dismiss-default">Dismiss Default</ion-button>
      </ion-content>
    
  `;
  return element;
}

window.presentFirstModal = async () => {
  modalCount = 0;
  await presentNextModal(1);
};

window.presentNextModal = async (modalNumber) => {
  if (modalNumber > maxModals) {
    return;
  }
  modalCount = Math.max(modalCount, modalNumber);
  const element = createModalComponent(modalNumber);
  const modal = await modalController.create({
    component: element,
    htmlAttributes: {
      id: sharedId,
      'data-testid': `modal-${modalNumber}`,
    },
  });

  await modal.present();

  const dismissByIdButton = element.querySelector('ion-button.dismiss-by-id');
  dismissByIdButton.addEventListener('click', () => {
    modalController.dismiss(undefined, undefined, sharedId);
  });

  const dismissDefaultButton = element.querySelector('ion-button.dismiss-default');
  dismissDefaultButton.addEventListener('click', () => {
    modalController.dismiss();
  });
};

```

--------------------------------

### Install Packed Core and Angular in Angular App

Source: https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md

Install the locally packed core and Angular libraries into an external Angular Ionic app. Removes existing Angular configuration.

```bash
rm -rf .angular/
npm install file:/~/ionic-core-7.0.1.tgz
npm install file:/~/ionic-angular-7.0.1.tgz
```

--------------------------------

### Create and Configure a Basic Animation

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/animation/test/basic/index.html

This snippet shows how to create a root animation, add an element to it, and configure its duration, iterations, easing, and keyframes. It also includes an event listener for when the animation finishes.

```typescript
import { createAnimation } from '../../../../dist/ionic/index.esm.js';

const squareA = document.querySelector('.square-a');

const rootAnimation = createAnimation('root-animation-id');
rootAnimation
  .addElement(squareA)
  .duration(500)
  .iterations(2)
  .easing('linear')
  .keyframes([
    { background: 'rgba(255, 0, 0, 0.5)', offset: 0, borderRadius: '0px' },
    { background: 'rgba(0, 255, 0, 0.5)', offset: 0.33, borderRadius: '10px' },
    { background: 'rgba(0, 0, 255, 0.5)', offset: 0.66, borderRadius: '20px' },
    { background: 'rgba(255, 0, 0, 0.5)', offset: 1, borderRadius: '30px' },
  ])
  .onFinish(() => {
    const ev = new CustomEvent('ionAnimationFinished');
    window.dispatchEvent(ev);
  });
```

--------------------------------

### Install Local Ionic Angular Package

Source: https://github.com/ionic-team/ionic-framework/blob/main/packages/angular/README.md

Install the locally built `@ionic/angular` package into your new Angular application using the tarball created earlier. This replaces the version from npm.

```bash
npm install ~/Downloads/ionic-angular.tgz
```

--------------------------------

### Title with Contact List Example

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/title/test/basic/index.html

This snippet illustrates a title used in a contact list scenario, showing options to add contacts to favorites. It includes 'Choose a contact' and 'Choose multiple contacts' examples.

```html
<ion-title>Choose a contact to add to Favorites</ion-title>

<ion-buttons slot="end">
  <ion-button>
    <ion-icon slot="icon-only" name="add"></ion-icon>
  </ion-button>
</ion-buttons>
```

```html
<ion-title>Choose multiple contacts to add to your Favorites</ion-title>

<ion-buttons slot="end">
  <ion-button>
    <ion-icon slot="icon-only" name="checkmark"></ion-icon>
  </ion-button>
</ion-buttons>
```

--------------------------------

### Open Loading

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/loading/test/is-open/index.html

This snippet demonstrates how to open an ion-loading component by setting its `isOpen` property to true.

```html
<ion-loading></ion-loading>

<button onclick="document.querySelector('ion-loading').isOpen = true">Open Loading</button>
```

--------------------------------

### Icon Only Item Button

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/item/test/buttons/index.html

Example of an ion-item button containing only an icon.

```html
<button ion-item icon-only>Icon Only</button>
```

--------------------------------

### Initialize Ionic Project and Enable Capacitor

Source: https://github.com/ionic-team/ionic-framework/blob/main/packages/react/README.md

Initialize an Ionic project with a specific app name and type, then enable Capacitor integration. This is a prerequisite for building native applications.

```sh
ionic init "My React App" --type=react
ionic integrations enable capacitor
```

--------------------------------

### Item with Button on Right

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/item/test/media/index.html

Example of an item with a button positioned on the right.

```html
<div class="item-text-wrap">
  <ion-item>
    <ion-label>
      Button on right
    </ion-label>
  </ion-item>
</div>
<ion-button fill="clear" slot="end">View</ion-button>
```

--------------------------------

### Secondary Item Button

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/item/test/buttons/index.html

Example of a secondary-styled button within an ion-item.

```html
<button ion-item class="secondary">Button</button>
```

--------------------------------

### Basic Infinite Scroll Implementation

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/infinite-scroll/test/basic/index.html

This snippet shows the core JavaScript logic for setting up an infinite scroll. It listens for the 'ionInfinite' event, simulates a network request with a delay, completes the scroll, and appends new items to the list.

```javascript
const list = document.getElementById('list');
const infiniteScroll = document.getElementById('infinite-scroll');

function toggleInfiniteScroll() {
  infiniteScroll.disabled = !infiniteScroll.disabled;
}

infiniteScroll.addEventListener('ionInfinite', async function () {
  await wait(500);
  infiniteScroll.complete();
  appendItems();
  // Custom event consumed in the e2e tests
  window.dispatchEvent(new CustomEvent('ionInfiniteComplete'));
});

function appendItems() {
  for (var i = 0; i < 30; i++) {
    const el = document.createElement('ion-item');
    el.textContent = `${1 + i}`;
    list.appendChild(el);
  }
}

function wait(time) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, time);
  });
}

appendItems();
```

--------------------------------

### Basic Picker Implementation

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/picker-legacy/test/basic/index.html

This snippet shows how to import and use the `pickerController` to create and present a basic picker with predefined options and buttons. It includes logic to handle the selected value and update an index.

```typescript
import { pickerController } from '../../../../../dist/ionic/index.esm.js';
window.pickerController = pickerController;

const options = [
  { text: '1', value: '01' },
  { text: '2', value: '02' },
  { text: '3', value: '03' },
  { text: '4', value: '04' },
  { text: '5', value: '05' },
  { text: '6', value: '06' },
  { text: '7', value: '07' },
  { text: '8', value: '08' },
  { text: '9', value: '09' },
  { text: '10', value: '10' },
  { text: '11', value: '11' },
  { text: '12', value: '12' },
];

let selectedIndex = 0;

async function presentPicker(customClass) {
  const pickerElement = await pickerController.create({
    buttons: [
      {
        text: 'Cancel',
        role: 'cancel',
      },
      {
        text: 'Save',
        cssClass: 'save-btn',
        handler: (ev) => {
          const v = ev.hours.value;
          selectedIndex = options.findIndex((opt) => opt.value === v);
        },
      },
    ],
    columns: [
      {
        name: 'hours',
        selectedIndex: selectedIndex,
        prefix: 'total',
        suffix: 'hours',
        options: [...options],
      },
    ],
    htmlAttributes: {
      'data-testid': 'basic-picker',
    },
    cssClass: customClass,
  });
  await pickerElement.present();
}
```

--------------------------------

### Item with Avatar and Button (Right)

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/item/test/media/index.html

Example of an item with an avatar on the right and a button.

```html
<media type="avatar" slot="end"></media>
<div class="item-text-wrap">
  <ion-item>
    <ion-label>
      Avatar right, a.item
    </ion-label>
  </ion-item>
</div>
<ion-button fill="clear" slot="end"><ion-icon name="arrow-forward"></ion-icon></ion-button>
```

--------------------------------

### Item with Avatar and Button (Left)

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/item/test/media/index.html

Example of an item with an avatar on the left and a button.

```html
<media type="avatar" slot="start"></media>
<div class="item-text-wrap">
  <ion-item>
    <ion-label>
      Avatar left, button.item
    </ion-label>
  </ion-item>
</div>
<ion-button fill="clear" slot="end"><ion-icon name="arrow-forward"></ion-icon></ion-button>
```

--------------------------------

### Preview Changes in Dark Mode

Source: https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md

Append '?palette=dark' to the URL to test components in dark mode.

```bash
http://localhost:3333/src/components/alert/test/basic?palette=dark
```

--------------------------------

### Create and Configure a Basic Animation

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/animation/test/hooks/index.html

This snippet demonstrates how to create a new animation, add an element to it, set its duration, easing, and apply various before/after lifecycle hooks and styles. It also includes event listeners for play, pause, stop, and destroy actions.

```typescript
import { createAnimation } from '../../../../dist/ionic/index.esm.js';

const squareA = document.querySelector('.square-a');
const rootAnimation = createAnimation();

rootAnimation
  .addElement(squareA)
  .duration(1000)
  .easing('linear')
  .beforeAddClass(['test-class'])
  .beforeRemoveClass(['hello-world'])
  .beforeStyles({ color: 'purple' })
  .beforeClearStyles(['padding-bottom'])
  .beforeAddRead(() => {
    const ev = new CustomEvent('beforeRead');
    window.dispatchEvent(ev);
  })
  .beforeAddWrite(() => {
    const ev = new CustomEvent('beforeWrite');
    window.dispatchEvent(ev);
  })
  .afterAddRead(() => {
    const ev = new CustomEvent('afterRead');
    window.dispatchEvent(ev);
  })
  .afterAddWrite(() => {
    const ev = new CustomEvent('afterWrite');
    window.dispatchEvent(ev);
  })
  .afterAddClass(['hello-world'])
  .afterRemoveClass(['test-class'])
  .afterStyles({ 'padding-bottom': '20px' })
  .afterClearStyles(['color'])
  .keyframes([
    { background: 'rgba(255, 0, 0, 0.5)', offset: 0 },
    { background: 'rgba(0, 255, 0, 0.5)', offset: 0.33 },
    { background: 'rgba(0, 0, 255, 0.5)', offset: 0.66 },
    { background: 'rgba(255, 0, 0, 0.5)', offset: 1 },
  ])
  .onFinish(() => {
    const ev = new CustomEvent('ionAnimationFinished');
    window.dispatchEvent(ev);
  });

document.querySelector('.play').addEventListener('click', () => {
  rootAnimation.play();
});
document.querySelector('.pause').addEventListener('click', () => {
  rootAnimation.pause();
});
document.querySelector('.stop').addEventListener('click', () => {
  rootAnimation.stop();
});
document.querySelector('.destroy').addEventListener('click', () => {
  rootAnimation.destroy();
});
```

--------------------------------

### ion-input

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/api.txt

The ion-input component provides a way to get text input from the user.

```APIDOC
## Properties

- **autocapitalize** (string) - Automatically capitalize the input's value. Defaults to 'off'.
- **autocomplete** (string) - The autocomplete attribute for the input. Defaults to 'off'.
- **autocorrect** (string) - The autocorrect attribute for the input. Defaults to 'off'.
- **autofocus** (boolean) - Automatically focus the input when the page loads.
- **clearInput** (boolean) - If true, a clear icon is displayed to clear the input.
- **clearInputIcon** (string | undefined) - The icon to use for the clear input button.
- **clearOnEdit** (boolean | undefined) - If true, the input is cleared when the user starts editing.
- **color** ("danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | string & Record<never, never> | undefined) - The color of the input.
- **counter** (boolean) - If true, a character counter is displayed.
- **counterFormatter** (((inputLength: number, maxLength: number) => string) | undefined) - A custom formatter for the character counter.
- **debounce** (number | undefined) - The debounce time in ms for the input event.
- **disabled** (boolean) - If true, the input is disabled.
- **enterkeyhint** ("done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined) - The hint for the enterkey.
- **errorText** (string | undefined) - Text to display when the input has an error.
- **fill** ("outline" | "solid" | undefined) - How the input should be filled. Defaults to undefined.
- **helperText** (string | undefined) - Text to display as a helper for the input.
- **inputmode** ("decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined) - The inputmode attribute for the input.
- **label** (string | undefined) - The label for the input.
- **labelPlacement** ("end" | "fixed" | "floating" | "stacked" | "start") - The placement of the label. Defaults to 'start'.
- **max** (number | string | undefined) - The maximum value for the input.
- **maxlength** (number | undefined) - The maximum length of the input.
- **min** (number | string | undefined) - The minimum value for the input.
- **minlength** (number | undefined) - The minimum length of the input.
- **mode** ("ios" | "md") - The mode of the component.
- **multiple** (boolean | undefined) - If true, the input can accept multiple values.
- **name** (string) - The name of the input.
- **pattern** (string | undefined) - The pattern for the input.
- **placeholder** (string | undefined) - The placeholder for the input.
- **readonly** (boolean) - If true, the input is read-only.
- **required** (boolean) - If true, the input is required.
- **shape** ("round" | undefined) - The shape of the input.
- **spellcheck** (boolean) - Whether to spellcheck the input.
- **step** (string | undefined) - The step for the input.
- **type** ("date" | "datetime-local" | "email" | "month" | "number" | "password" | "search" | "tel" | "text" | "time" | "url" | "week") - The type of the input. Defaults to 'text'.
- **value** (null | number | string | undefined) - The value of the input. Defaults to ''.

### Methods

- **getInputElement()** => Promise<HTMLInputElement> - Get the native input element.
- **setFocus()** => Promise<void> - Set focus to the input.

### Events

- **ionBlur** - Emitted when the input blurs.
- **ionChange** - Emitted when the input value changes.
- **ionFocus** - Emitted when the input focuses.
- **ionInput** - Emitted when the input value is entered.

### CSS Properties

- **--background** - The background of the input.
- **--border-color** - The border color of the input.
- **--border-radius** - The border radius of the input.
- **--border-style** - The border style of the input.
```

--------------------------------

### Item with Thumbnail (Right Side)

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/item/test/media/index.html

Example of an item with a thumbnail displayed on the right side.

```html
<media type="thumbnail" slot="end"></media>
<div class="item-text-wrap">
  <ion-item>
    <ion-label>
      Media/Thumbnail right side, a.item
    </ion-label>
  </ion-item>
</div>
```

--------------------------------

### Open Modal

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/modal/test/is-open/index.html

This snippet shows how to open a modal by setting its `isOpen` property to `true`.

```html
<ion-modal trigger="open-modal"></ion-modal>
<ion-button id="open-modal">Open Modal</ion-button>
```

--------------------------------

### Disabled Item Button with Left Icon

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/item/test/buttons/index.html

Example of a disabled ion-item button with an icon on the left.

```html
<button disabled ion-item left-icon>Left Icon</button>
```

--------------------------------

### Open Custom Menu by ID

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/menu/test/basic/index.html

Demonstrates opening a custom-configured menu by its `menu-id`. This requires the menu to be defined with the corresponding ID.

```javascript
async function openCustom() {
  // Open the menu by menu-id
  await menuController.enable(true, 'custom-menu');
  await menuController.open('custom-menu');
}
```

--------------------------------

### Icon in an Item with Detail

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/icon/test/basic/index.html

An example of an icon within an ion-item that has the detail attribute set to true.

```html
<ion-item detail="true">
  <ion-icon slot="start" name="star"></ion-icon>
  <ion-label>Text</ion-label>
  <ion-note slot="end">Text</ion-note>
</ion-item>
```

--------------------------------

### Detail Icons with Arrow Down and Home

Source: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/icon/test/dir/index.html

Examples of detail icons using arrow down and home icons.

```html
Detail with icon arrow down Detail with icon home
```

--------------------------------

### Build and Pack Core, React, and React Router for React App

Source: https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md

Commands to build core, React, and React Router packages and create .tgz files for use in an external React Ionic app.

```bash
cd core
npm i
npm run build
npm pack --pack-destination ~

cd ../packages/react
npm i
npm run sync
npm run build
npm pack --pack-destination ~

cd ../react-router
npm i
npm run sync
npm run build
npm pack --pack-destination ~
```

--------------------------------

### Download Playwright Browsers

Source: https://github.com/ionic-team/ionic-framework/blob/main/docs/core/testing/usage-instructions.md

Download the correct browser binaries for Playwright. This is necessary after installing or updating Playwright.

```bash
npx playwright install
```

--------------------------------

### Changelog Entry - Documentation Change

Source: https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md

Example of a commit message for documentation changes that does not appear in the generated changelog.

```git
docs(changelog): update steps to update
```