========================
CODE SNIPPETS
========================
TITLE: Ionic React Project Setup
DESCRIPTION: Commands to install the Ionic CLI and start a new Ionic React project.

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

LANGUAGE: sh
CODE:
```
npm i -g @ionic/cli
ionic start myapp --type=react
```

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

TITLE: Ionic Alert Controller Setup
DESCRIPTION: Imports and exposes the Ionic alertController and loadingController globally for easy access in examples. This sets up the necessary controllers for presenting alerts and other components.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/alert/test/basic/index.html#_snippet_0

LANGUAGE: javascript
CODE:
```
import { alertController, loadingController } from '../../../../dist/ionic/index.esm.js';
window.alertController = alertController;
window.loadingController = loadingController;
```

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

TITLE: Ionic Alert Setup and Helper Function
DESCRIPTION: Imports the Ionic alert controller and assigns it to the window object for global access. Includes a helper function to create and present alerts.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/alert/test/standalone/index.html#_snippet_1

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

async function openAlert(opts) {
  const alert = await alertController.create(opts);
  await alert.present();
}
```

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

TITLE: Ionic Toast Setup and Event Listeners
DESCRIPTION: Imports the toast controller and sets up global event listeners for toast dismissal events. This is a foundational setup for using Ionic toasts in an application.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/toast/test/basic/index.html#_snippet_0

LANGUAGE: javascript
CODE:
```
import { toastController } from '../../../../dist/ionic/index.esm.js';
window.toastController = toastController;

window.Ionic = {
  config: {
    innerHTMLTemplatesEnabled: true,
  },
};

window.addEventListener('ionToastDidDismiss', function (e) {
  console.log('didDismiss', e);
});

window.addEventListener('ionToastWillDismiss', function (e) {
  console.log('willDismiss', e);
});
```

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

TITLE: Ionic Modal Navigation Setup
DESCRIPTION: Sets up event listeners for Ionic modals and defines core navigation functions using `ion-nav`. It handles modal presentation events to set the root page and provides methods for pushing new pages, popping back, and returning to the root. Requires `ion-modal` and `ion-nav` components.

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

LANGUAGE: javascript
CODE:
```
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();
};
```

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

TITLE: Ionic Action Sheet Setup and Event Listener
DESCRIPTION: Imports the Action Sheet controller and sets up a global event listener for the 'ionActionSheetDidDismiss' event. It also defines a helper function to create and present action sheets.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/action-sheet/test/basic/index.html#_snippet_0

LANGUAGE: javascript
CODE:
```
import { actionSheetController } from '../../../../dist/ionic/index.esm.js';
window.actionSheetController = actionSheetController;

window.addEventListener('ionActionSheetDidDismiss', function (e) {
  console.log('didDismiss', e);
});

async function openActionSheet(opts) {
  const actionSheet = await actionSheetController.create(opts);
  await actionSheet.present();
}
```

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

TITLE: Build and Install Ionic Core for Angular
DESCRIPTION: Steps to build the core Ionic package and the Angular-specific package, then install them into an Angular project. This includes building both core and angular directories and packing them before installation.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#_snippet_9

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

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

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

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

TITLE: Build Local Ionic Framework Packages
DESCRIPTION: This guide outlines the process to build local Ionic Framework packages, including cloning the repository, installing dependencies, building core and angular packages, and creating a tarball. This is essential for testing local changes before publishing.

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

LANGUAGE: shell
CODE:
```
git clone https://github.com/ionic-team/ionic-framework.git
cd ionic-framework
git pull origin main

cd core
npm install
npm run build

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

cd dist
npm pack
```

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

TITLE: Basic Popover Presentation
DESCRIPTION: Shows how to import and use the `popoverController` to create and present a basic Ionic Popover. This example sets up a simple popover with a list of items.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/popover/test/basic/index.html#_snippet_0

LANGUAGE: javascript
CODE:
```
import { popoverController } from '../../../../dist/ionic/index.esm.js';
window.popoverController = popoverController;

async function presentPopover(opts) {
  const popover = await popoverController.create(opts);
  await popover.present();
}

class ProfilePage extends HTMLElement {
  constructor() {
    super();
  }
  connectedCallback() {
    this.innerHTML = `
 <ion-content>
 <ion-list>
 <ion-list-header><ion-label>Ionic</ion-label></ion-list-header>
 <ion-item button><ion-label>Item 0</ion-label></ion-item>
 <ion-item button><ion-label>Item 1</ion-label></ion-item>
 <ion-item button><ion-label>Item 2</ion-label></ion-item>
 <ion-item button><ion-label>Item 3</ion-label></ion-item>
 </ion-list>
 </ion-content>
 `;
  }
}
customElements.define('profile-page', ProfilePage);
```

LANGUAGE: html
CODE:
```
<profile-page></profile-page>
<button onclick="presentPopover({ component: 'profile-page' })">Show Popover</button>
```

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

TITLE: Loading Initial Page in Ionic Navigation
DESCRIPTION: This asynchronous function finds the 'ion-nav' element in the document and sets its root component to 'page-one', effectively loading the first page when the application starts or this function is called.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/nav-link/test/basic/index.html#_snippet_5

LANGUAGE: JavaScript
CODE:
```
async function loadFirstPage() { const nav = document.querySelector('ion-nav'); await nav.setRoot('page-one'); }
```

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

TITLE: Build and Install Ionic Core for JavaScript
DESCRIPTION: Commands to build the core Ionic package and install it into a JavaScript project using npm. This involves navigating to the core directory, installing dependencies, building the package, and then installing the generated .tgz file.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#_snippet_8

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

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

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

TITLE: Install Ionic Core Dependencies
DESCRIPTION: After cloning, this command installs the necessary Node.js dependencies for the `@ionic/core` package, which is located within the `core` directory of the project. Ensure you are in the `core` directory before running.

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

LANGUAGE: Shell
CODE:
```
cd core
npm install
```

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

TITLE: Ionic Alert Controller API
DESCRIPTION: Demonstrates the usage of the Ionic Alert Controller to create and present alerts. Includes examples of various configurations for headers, messages, buttons, inputs, and event handlers.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/alert/test/standalone/index.html#_snippet_0

LANGUAGE: APIDOC
CODE:
```
alertController.create(options)

  Creates and returns a new alert component.

  Parameters:
    options (object): Configuration object for the alert.
      header (string, optional): The header text of the alert.
      subHeader (string, optional): The sub-header text of the alert.
      message (string, optional): The message text of the alert. Can contain HTML.
      cssClass (string, optional): An additional class or classes to apply to the alert.
      buttons (array, optional): An array of button configurations.
        Each button object can have:
          text (string): The text to display on the button.
          role (string, optional): The role of the button ('cancel', 'destructive', 'default').
          cssClass (string, optional): Custom CSS class for the button.
          handler (function, optional): A function to call when the button is clicked.
      inputs (array, optional): An array of input configurations for prompts.
        Each input object can have:
          name (string): The name of the input.
          type (string): The type of input ('text', 'number', 'date', 'url', etc.).
          placeholder (string, optional): Placeholder text for the input.
          value (any, optional): The initial value of the input.
          min (any, optional): Minimum value for number or date inputs.
          max (any, optional): Maximum value for number or date inputs.

  Returns:
    Promise<HTMLIonAlertElement>: A promise that resolves with the alert element.

  Examples:
    // Basic Alert
    openAlert({
      header: 'Alert',
      subHeader: 'Subtitle',
      message: 'This is an alert message.',
      buttons: ['OK']
    });

    // Alert with Multiple Buttons and Handlers
    openAlert({
      header: 'Confirm!',
      message: 'Message <strong>text</strong>!!!',
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'secondary',
          handler: (blah) => { console.log('Confirm Cancel: blah'); }
        },
        {
          text: 'Okay',
          handler: () => { console.log('Confirm Okay'); }
        }
      ]
    });

    // Alert with Input Prompts
    openAlert({
      header: 'Prompt!',
      inputs: [
        { placeholder: 'Placeholder 1' },
        { name: 'name2', value: 'hello', placeholder: 'Placeholder 2' },
        { name: 'name3', type: 'url', placeholder: 'Favorite site ever' },
        { name: 'name4', type: 'date', min: '2017-03-01', max: '2018-01-12' },
        { name: 'name5', type: 'date' },
        { name: 'name6', type: 'number', min: -5, max: 10 },
        { name: 'name7', type: 'number' }
      ],
      buttons: [
        { text: 'Cancel', role: 'cancel', handler: () => { console.log('Confirm Cancel'); } },
        { text: 'Ok', handler: () => { console.log('Confirm Ok'); } }
      ]
    });

  Related Methods:
    alert.present(): Presents the alert.
    alert.dismiss(): Dismisses the alert.
```

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

TITLE: macOS Docker Headed Test Setup
DESCRIPTION: Steps to configure macOS for running headed Playwright tests in Docker. This involves installing XQuartz, enabling network client connections, and setting up environment variables and file sharing for Docker.

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

LANGUAGE: shell
CODE:
```
brew install --cask xquartz
xhost +localhost
echo host.docker.internal:0 > docker-display.txt
echo /tmp/.X11-unix:/tmp/.X11-unix > docker-display-volume.txt
```

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

TITLE: Ionic Loading Controller Usage
DESCRIPTION: This example demonstrates importing the `loadingController` from the Ionic framework and using it to create and present a loading indicator. It shows a basic asynchronous function that takes options to configure the loading component before displaying it.

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

LANGUAGE: javascript
CODE:
```
import { loadingController } from '../../../../dist/ionic/index.esm.js';

window.loadingController = loadingController;

async function openLoading(opts) {
  const loading = await loadingController.create(opts);
  await loading.present();
}
```

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

TITLE: Ionic Alert Input Configuration Examples
DESCRIPTION: Provides examples of configuring various input types for Ionic alerts, including date pickers, number inputs with min/max constraints, and text inputs with advanced attributes like maxlength and inputmode.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/alert/test/basic/index.html#_snippet_13

LANGUAGE: javascript
CODE:
```
[
  {
    name: 'name1',
    type: 'text',
    placeholder: 'Placeholder 1'
  },
  {
    name: 'name2',
    type: 'date',
    min: '2017-03-01',
    max: '2018-01-12'
  },
  {
    name: 'name3',
    type: 'date'
  },
  {
    name: 'name4',
    type: 'number',
    min: -5,
    max: 10
  },
  {
    name: 'name5',
    type: 'number'
  },
  {
    name: 'name6',
    type: 'text',
    placeholder: 'Advanced Attributes',
    cssClass: 'specialClass',
    attributes: {
      maxlength: 4,
      inputmode: 'decimal'
    }
  }
]
```

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

TITLE: Build and Install Ionic Core for React
DESCRIPTION: Commands to build the core Ionic package and the React-specific packages (React and React Router), then install them into a React project. This process involves building multiple directories and packing them for npm installation.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#_snippet_10

LANGUAGE: bash
CODE:
```
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 ~

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
```

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

TITLE: Action Sheet Button Configuration Example
DESCRIPTION: An example snippet defining the structure of buttons for an action sheet. It illustrates common properties like 'text', 'handler', and 'role' for customizing button appearance and behavior.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/action-sheet/test/basic/index.html#_snippet_10

LANGUAGE: javascript
CODE:
```
[
  { text: 'Mark Unread', handler: () => { console.log('Mark Unread clicked'); } },
  { text: 'Mark Read', handler: () => { console.log('Mark Read clicked'); } },
  { text: 'Edit Title', handler: () => { console.log('Edit Title clicked'); } },
  { text: 'Erase Title', handler: () => { console.log('Erase Title clicked'); } },
  { text: 'Save Image', handler: () => { console.log('Save Image clicked'); } },
  { text: 'Copy Image', handler: () => { console.log('Copy Image clicked'); } },
  { text: 'Erase Image', handler: () => { console.log('Erase Image clicked'); } },
  { text: 'Delete File', role: 'destructive', handler: () => { console.log('Delete File clicked'); } },
  {
    text: 'Cancel',
    role: 'cancel', // will always sort to be on the bottom
    handler: () => { console.log('Cancel clicked'); },
  },
]
```

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

TITLE: Start Ionic Development Server
DESCRIPTION: This command initiates the build process using Stencil, watches for changes in source files, and starts a local HTTP server. It automatically opens the development environment in your browser, typically at http://localhost:3333/.

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

LANGUAGE: Shell
CODE:
```
npm start
```

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

TITLE: Ionic Routing Configuration
DESCRIPTION: Configures properties for a specific route component. This example sets the `componentProps` for a route that renders `page-three`, allowing data to be passed to the page component.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/router-outlet/test/basic/index.html#_snippet_2

LANGUAGE: APIDOC
CODE:
```
ion-route componentProps:
  Sets properties to be passed to the component rendered by the route.

  Example:
  document.querySelector('ion-route[component=page-three]').componentProps = { param: 'route' };

  Parameters:
    - component: The component associated with the route.
    - componentProps: An object containing properties to pass to the component.

  Related:
    - ion-nav-link: Used for declarative navigation within Ionic applications.
```

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

TITLE: JavaScript Content Toggling and Animation Setup
DESCRIPTION: Provides JavaScript functions to toggle the display of HTML elements by their ID and to apply CSS classes for animation. It targets specific elements like 'content', 'header', and 'footer' to manage their visibility and animation states.

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

LANGUAGE: javascript
CODE:
```
const content = document.getElementById('content');

function toggleDisplay(id) {
  const el = document.getElementById(id);
  el.style.display = !el.style.display ? 'none' : null;
}

function myanimation() {
  const content = document.getElementById('content');
  const header = document.getElementById('header');
  const footer = document.getElementById('footer');
  content.classList.add('animation');
  header.classList.add('animation');
  footer.classList.add('animation');
}
```

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

TITLE: Ionic Toast Layout Example
DESCRIPTION: This example demonstrates how to import the Ionic toast controller, define configurations for baseline and stacked toast layouts, and open a toast using a helper function. It showcases the flexibility of toast presentation with different message styles and button placements.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/toast/test/layout/index.html#_snippet_0

LANGUAGE: javascript
CODE:
```
import { toastController } from '../../../../dist/ionic/index.esm.js';
window.toastController = toastController;

async function openToast(opts) {
  const toast = await toastController.create(opts);
  await toast.present();
}

const baselineConfig = {
  icon: 'globe',
  header: 'Toast Header',
  message: 'This is an inline layout toast.',
  buttons: [
    { side: 'start', text: 'Start Button', icon: 'alarm' },
    { side: 'end', text: 'End Button', icon: 'bonfire' },
  ],
};

const stackedConfig = {
  ...baselineConfig,
  message: 'This is a stacked layout toast.',
  layout: 'stacked',
};
```

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

TITLE: Ionic Overlay Components
DESCRIPTION: Lists and describes various overlay components available in Ionic, such as Alerts, Action Sheets, Loading indicators, Modals, and Toasts. Also shows a Datetime picker example.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/core/src/themes/test/css-variables/index.html#_snippet_5

LANGUAGE: html
CODE:
```
<!-- Present Alert -->
<ion-button>Present Alert</ion-button>

<!-- Present Action Sheet -->
<ion-button>Present Action Sheet</ion-button>

<!-- Present Loading -->
<ion-button>Present Loading</ion-button>

<!-- Present Modal -->
<ion-button>Present Modal</ion-button>

<!-- Present Popover -->
<ion-button>Present Popover</ion-button>

<!-- Present Toast -->
<ion-button>Present Toast</ion-button>

<!-- Datetime Picker -->
<ion-item>
  <ion-label>Datetime</ion-label>
  <ion-datetime display-format="MMM DD, YYYY" picker-format="MM DD YYYY" value="2019-12-07"></ion-datetime>
</ion-item>
<ion-item>
  <ion-label>1</ion-label>
</ion-item>
<ion-item>
  <ion-label>2</ion-label>
</ion-item>
<ion-item>
  <ion-label>3</ion-label>
</ion-item>
```

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

TITLE: Ionic Grid System: Custom Styling Example
DESCRIPTION: Provides a CSS example to style elements within the Ionic grid, specifically targeting `ion-col` divs within a `.grid-demo` class. This shows how to apply custom visual treatments.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/grid/test/basic/index.html#_snippet_4

LANGUAGE: css
CODE:
```
.grid-demo ion-col div {
  background-color: #f7f7f7;
  border: 1px solid #ddd;
  padding: 10px 5px;
}
```

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

TITLE: Defining Page One with Back and Forward Navigation in Ionic
DESCRIPTION: This snippet defines the `PageOne` custom HTML element, accessible from the root page. It features an `ion-back-button` for returning to the previous page and an `ion-nav-link` for navigating to `page-two`, illustrating a common intermediate page setup.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/nav/test/routing/index.html#_snippet_1

LANGUAGE: JavaScript
CODE:
```
class PageOne extends HTMLElement { connectedCallback() { this.innerHTML = \` <ion-header> <ion-toolbar> <ion-buttons slot=\"start\"> <ion-back-button></ion-back-button> </ion-buttons> <ion-title>Page One</ion-title> </ion-toolbar> </ion-header> <ion-content class=\"ion-padding\"> <h1>Page One</h1> <ion-nav-link router-direction=\"forward\" component=\"page-two\"> <button class=\"next\">Go to Page Two</button> </ion-nav-link> </ion-content> \`; } }
```

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

TITLE: Build and Install Ionic Core for Vue
DESCRIPTION: Instructions to build the core Ionic package and the Vue-specific packages (Vue and Vue Router), then install them into a Vue project. This involves building several directories and packing them for local npm installation.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#_snippet_11

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

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

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

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
```

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

TITLE: Capacitor Integration and Setup
DESCRIPTION: Steps to integrate Capacitor into an Ionic React project for native builds, including adding platforms and copying resources.

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

LANGUAGE: sh
CODE:
```
ionic init "My React App" --type=react
ionic integrations enable capacitor
ionic capacitor add <android|ios>
ionic capacitor copy
ionic capacitor open <android|ios>
```

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

TITLE: Focus Visible Utility
DESCRIPTION: Adds a visual focus indicator to elements focused via keyboard navigation. It requires the `.ion-focusable` class on elements and the `<ion-app>` component to be present. The utility can also be started manually using the `startFocusVisible` function, which is useful for Shadow DOM implementations.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/__wiki__/Utilities.md#_snippet_0

LANGUAGE: APIDOC
CODE:
```
startFocusVisible()
  - Initializes the focus visible utility.
  - Requirements:
    - Elements must have the `.ion-focusable` class.
    - The `<ion-app>` component must be used on the page for automatic initialization.
  - Usage:
    - Can be imported and called manually to run within Shadow DOM.
  - Purpose:
    - Provides a visual focus indicator for keyboard-navigated elements, addressing limitations of `:focus` on mobile touch interactions and incomplete `:focus-visible` support.
```

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

TITLE: Install Playwright Dependencies
DESCRIPTION: Installs the necessary Playwright package for testing. This command should be run after cloning the repository or when Playwright versions change to ensure correct browser binaries are used.

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

LANGUAGE: bash
CODE:
```
npm ci
```

LANGUAGE: bash
CODE:
```
npx playwright install
```

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

TITLE: Ionic Icon Attribute Examples (HTML/Ionic)
DESCRIPTION: Illustrates various ways to specify icons in Ionic components using attributes. This includes setting the icon name, providing platform-specific icons (iOS/Android), and using custom IDs for dynamic manipulation.

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

LANGUAGE: html
CODE:
```
<ion-icon name="home"></ion-icon>
<ion-icon name="home"></ion-icon>
<ion-icon id="dynamicHomeIcon" name="STAR"></ion-icon>
<ion-icon icon="home"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
<ion-icon ios="logo-apple" md="logo-android"></ion-icon>
<ion-icon name="color-filter"></ion-icon>
<ion-icon name="null"></ion-icon>
```

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

TITLE: Ionic Custom Element Example
DESCRIPTION: Defines a custom HTML element 'list-page' using JavaScript, which renders an ion-content component with basic text. This demonstrates how to integrate Ionic components within custom web components.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/popover/test/arrow/index.html#_snippet_1

LANGUAGE: javascript
CODE:
```
class ListPage extends HTMLElement {
  constructor() {
    super();
    this.innerHTML = `<ion-content class="ion-padding"> Hello </ion-content>`;
  }
}
customElements.define('list-page', ListPage);
```

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

TITLE: Aligning Ionic Tab Button Content to Start - CSS
DESCRIPTION: This CSS snippet targets `ion-tab-button` elements nested within an element with the class `.custom-top`. It sets `justify-content` to `start`, aligning the content (like icons and text) of the tab buttons to the beginning of their flex container, typically the left side in LTR layouts.

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

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

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

TITLE: Popover with Translucent Header and Footer
DESCRIPTION: Illustrates how to create a popover with translucent header and footer elements. This example includes content within the popover body.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/popover/test/basic/index.html#_snippet_2

LANGUAGE: javascript
CODE:
```
class TranslucentHeaderPage extends HTMLElement {
  constructor() {
    super();
  }
  connectedCallback() {
    this.innerHTML = `
 <ion-header translucent>
 <ion-toolbar>
 <ion-title>Header</ion-title>
 </ion-toolbar>
 </ion-header>
 <ion-content class="ion-padding" fullscreen color="primary">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.In rutrum tortor lacus, ac interdum ipsum bibendum vel.Aenean non nibh gravida, ullamcorper mi at, tempor nulla.Proin malesuada tellus ut ullamcorper accumsan.Donec semper justo vulputate neque tempus ultricies.Proin non aliquet ipsum.Praesent mauris sem, facilisis eu justo nec, euismod imperdiet tellus.Duis eget justo congue, lacinia orci sed, fermentum urna.Quisque sed massa faucibus, interdum dolor rhoncus, molestie erat.Proin suscipit ante non mauris volutpat egestas.Donec a ultrices ligula.Mauris in felis vel dui consectetur viverra.Nam vitae quam in arcu aliquam aliquam.Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.Cras non velit nisl.Donec viverra, magna quis vestibulum volutpat, metus ante tincidunt augue, non porta nisi mi sit amet neque.Proin dapibus eros vitae nibh tincidunt, blandit rhoncus est porttitor.
 </ion-content>
 <ion-footer translucent>
 <ion-toolbar>
 <ion-title>Footer</ion-title>
 </ion-toolbar>
 </ion-footer>
 `;
  }
}
customElements.define('translucent-header-page', TranslucentHeaderPage);
```

LANGUAGE: html
CODE:
```
<translucent-header-page></translucent-header-page>
<button onclick="presentPopover({ component: 'translucent-header-page', translucent: true })">Show Translucent Header Popover</button>
```

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

TITLE: Toast Positioning CSS Variables
DESCRIPTION: Utilizes CSS variables to control the positioning of the toast, specifically setting the start and end offsets and maximum width for custom layouts.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/toast/test/basic/index.html#_snippet_4

LANGUAGE: css
CODE:
```
.toast-start-and-end {
  --start: 0;
  --end: 0;
  --max-width: 100%;
}
```

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

TITLE: Create Ionic App Starter
DESCRIPTION: Command to create a new Ionic application using the 'blank' starter template. This is often the first step in creating a minimal reproduction for bug reports.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#_snippet_0

LANGUAGE: bash
CODE:
```
ionic start myApp blank
```

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

TITLE: Verify WSLg Installation
DESCRIPTION: Checks if WSLg is installed and accessible on a Windows system. WSLg is required for running headed tests within the Windows Subsystem for Linux.

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

LANGUAGE: bash
CODE:
```
ls -a -w 1 /mnt/wslg
```

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

TITLE: Ionic Navigation and Toolbar Elements
DESCRIPTION: Shows examples of navigation elements like breadcrumbs and toolbars, including the integration of segments within toolbars. Also includes progress bars.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/core/src/themes/test/css-variables/index.html#_snippet_6

LANGUAGE: html
CODE:
```
<ion-toolbar>
  <ion-segment>
    <ion-segment-button value="all">All</ion-segment-button>
    <ion-segment-button value="favorites">Favorites</ion-segment-button>
  </ion-segment>
</ion-toolbar>

<ion-toolbar>
  <ion-title>Toolbar Title</ion-title>
  <ion-segment>
    <ion-segment-button value="all">All</ion-segment-button>
    <ion-segment-button value="favorites">Favorites</ion-segment-button>
  </ion-segment>
  <ion-buttons slot="end">
    <ion-button>Tertiary</ion-button>
    <ion-button>Success</ion-button>
    <ion-button>Warning</ion-button>
    <ion-button>Medium</ion-button>
    <ion-button>Dark</ion-button>
  </ion-buttons>
</ion-toolbar>

<ion-breadcrumbs>
  <ion-breadcrumb href="#home">Home</ion-breadcrumb>
  <ion-breadcrumb href="#electronics">Electronics</ion-breadcrumb>
  <ion-breadcrumb href="#cameras">Cameras</ion-breadcrumb>
  <ion-breadcrumb href="#film">Film</ion-breadcrumb>
  <ion-breadcrumb href="#35mm">35 mm</ion-breadcrumb>
</ion-breadcrumbs>

<ion-progress-bar value="0.5"></ion-progress-bar>
```

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

TITLE: Ionic Alerts: Date and Number Inputs
DESCRIPTION: Demonstrates configuring Ionic alerts with date and number input fields. Includes examples of setting minimum and maximum values for validation.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/alert/test/translucent/index.html#_snippet_7

LANGUAGE: javascript
CODE:
```
function presentAlertWithDateAndNumberInputs() {
  openAlert({
    header: 'Alert with Inputs',
    inputs: [
      { name: 'name4', type: 'date', min: '2017-03-01', max: '2018-01-12' },
      { name: 'name5', type: 'date' },
      { name: 'name6', type: 'number', min: -5, max: 10 },
      { name: 'name7', type: 'number' },
    ],
    buttons: [
      {
        text: 'Cancel',
        role: 'cancel',
        cssClass: 'secondary',
        id: 'cancel-id',
        handler: () => {
          console.log('Confirm Cancel');
        }
      },
      {
        text: 'Ok',
        handler: () => {
          console.log('Confirm Ok');
        }
      }
    ],
    translucent: true
  });
}
```

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

TITLE: Install Dependencies with npm
DESCRIPTION: Installs all project dependencies listed in package.json. This command is essential before building or running the application to ensure all required packages are available.

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

LANGUAGE: shell
CODE:
```
npm install
```

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

TITLE: Installing Project Dependencies
DESCRIPTION: Installs all necessary Node.js dependencies for a specific package within the Ionic Framework monorepo, such as 'core' or 'angular'.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#_snippet_7

LANGUAGE: bash
CODE:
```
npm install
```

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

TITLE: Ionic Menu Controller Async Example
DESCRIPTION: Demonstrates asynchronous handling of an Ionic menu. This code snippet imports the menuController, sets it globally, and then uses an event listener for 'ionMenuChange' to manage the menu's presence in the DOM. It moves the menu element and appends a menu button to a specified container upon the first menu change event.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/menu-button/test/async/index.html#_snippet_0

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

const buttons = document.querySelector('ion-buttons');
const menuButton = document.createElement('ion-menu-button');
const menu = document.querySelector('ion-menu');
const menuContainer = document.querySelector('#menu-container');
let firstLoad = true;

// When the menu loads, immediately remove it from the DOM
document.body.addEventListener('ionMenuChange', () => {
  if (firstLoad) {
    menuContainer.removeChild(menu);
    buttons.appendChild(menuButton);
    firstLoad = false;
  }
});

const trigger = () => {
  menuContainer.append(menu);
};
```

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

TITLE: Angular Ionic Config Setup
DESCRIPTION: The `Config.set()` method has been removed in Angular. Global configuration should now be set using `IonicModule.forRoot()`. Refer to the Ionic Angular config documentation for detailed examples.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/BREAKING_ARCHIVE/v6.md#_snippet_8

LANGUAGE: apidoc
CODE:
```
Angular Ionic Configuration:

Removed:
  - Config.set()

Recommended:
  - Use IonicModule.forRoot() for global configuration.
  - Refer to https://ionicframework.com/docs/angular/config for examples.

Note: setupConfig function is no longer exported from @ionic/angular.
```

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

TITLE: Present Basic Ionic Alert
DESCRIPTION: Demonstrates how to create and present a simple Ionic Alert with a header, subtitle, message, and a single 'OK' button. This is the most fundamental usage of the alert controller.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/alert/test/basic/index.html#_snippet_3

LANGUAGE: javascript
CODE:
```
async function openAlert(opts) {
  const alert = await alertController.create(opts);
  await alert.present();
}

function presentAlert() {
  openAlert({
    header: 'Alert',
    subHeader: 'Subtitle',
    message: 'This is an alert message.',
    buttons: ['OK'],
    htmlAttributes: {
      'data-testid': 'basic-alert',
    },
  });
}
```

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

TITLE: Configure firstDayOfWeek in ion-datetime
DESCRIPTION: Illustrates how to change the starting day of the week for the calendar view. The `firstDayOfWeek` property can be set to an integer (0 for Sunday, 1 for Monday, etc.). An example function shows how to increment this value.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/datetime/test/show-adjacent-days/index.html#_snippet_6

LANGUAGE: javascript
CODE:
```
const firstDayOfWeek = document.querySelector('#firstDayOfWeek');
function increase() {
  firstDayOfWeek.firstDayOfWeek = firstDayOfWeek.firstDayOfWeek + 1;
  const span = document.getElementById('start-of-week');
  span.innerText = firstDayOfWeek.firstDayOfWeek;
}
```

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

TITLE: Opening Ionic Loading Indicator - JavaScript
DESCRIPTION: Defines an asynchronous function `openLoading` that takes options (`opts`) to create and present an Ionic loading indicator. It utilizes the globally available `loadingController` to instantiate and display the loading overlay, allowing for dynamic configuration of its appearance and behavior.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/loading/test/basic/index.html#_snippet_4

LANGUAGE: JavaScript
CODE:
```
async function openLoading(opts) {
  const loading = await loadingController.create(opts);
  await loading.present();
}
```

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

TITLE: Ionic Framework Configuration
DESCRIPTION: Sets global Ionic configuration options. This example specifically configures the `focusManagerPriority` to control the order in which focusable elements are prioritized by the focus manager, affecting accessibility and keyboard navigation.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/focus-controller/test/generic/index.html#_snippet_4

LANGUAGE: javascript
CODE:
```
window.Ionic = {
  config: {
    focusManagerPriority: ['heading', 'banner', 'content'],
  },
};
```

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

TITLE: Ionic Action Sheet - Basic Translucent Example
DESCRIPTION: Demonstrates the basic presentation of an Ionic Action Sheet with translucent styling. It includes common buttons like 'Delete', 'Share', 'Play', 'Favorite', and 'Cancel', with handlers for each.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/action-sheet/test/translucent/index.html#_snippet_0

LANGUAGE: javascript
CODE:
```
import { actionSheetController } from '../../../../dist/ionic/index.esm.js';
window.actionSheetController = actionSheetController;

async function openActionSheet(opts) {
  const actionSheet = await actionSheetController.create(opts);
  await actionSheet.present();
}

async function presentBasic() {
  var mode = Ionic.mode;
  await openActionSheet({
    header: 'Albums',
    buttons: [
      {
        text: 'Delete',
        role: 'destructive',
        icon: 'trash',
        handler: () => {
          console.log('Delete clicked');
        },
      },
      {
        text: 'Share',
        icon: 'share',
        handler: () => {
          console.log('Share clicked');
        },
      },
      {
        text: 'Play (open modal)',
        icon: 'chevron-forward-circle',
        handler: () => {
          console.log('Play clicked');
        },
      },
      {
        text: 'Favorite',
        icon: mode !== 'ios' ? 'heart' : null,
        handler: () => {
          console.log('Favorite clicked');
        },
      },
      {
        text: 'Cancel',
        role: 'cancel',
        icon: mode !== 'ios' ? 'close' : null,
        handler: () => {
          console.log('Cancel clicked');
        },
      },
    ],
    translucent: true,
  });
}
```

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

TITLE: Previewing Ionic Core Components Locally
DESCRIPTION: Starts a local development server to preview changes made to Ionic Core components. You can then navigate to specific component tests in the browser to see your modifications.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#_snippet_4

LANGUAGE: bash
CODE:
```
npm start
```

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

TITLE: Configure Ionic Picker Columns and Buttons
DESCRIPTION: Configures an Ionic Picker with predefined buttons and a 'Colors' column containing Red, Blue, and Green options. This setup is applied to specific picker elements found in the DOM.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/picker-legacy/test/trigger/index.html#_snippet_0

LANGUAGE: javascript
CODE:
```
const defaultPicker = document.querySelector('#default-picker');
const timeoutPicker = document.querySelector('#timeout-picker');

defaultPicker.buttons = [
  { text: 'Ok' },
  { text: 'Cancel', role: 'cancel' }
];
defaultPicker.columns = [
  {
    name: 'Colors',
    options: [
      { text: 'Red', value: 'red' },
      { text: 'Blue', value: 'blue' },
      { text: 'Green', value: 'green' },
    ],
  },
];

timeoutPicker.buttons = [
  { text: 'Ok' },
  { text: 'Cancel', role: 'cancel' }
];
timeoutPicker.columns = [
  {
    name: 'Colors',
    options: [
      { text: 'Red', value: 'red' },
      { text: 'Blue', value: 'blue' },
      { text: 'Green', value: 'green' },
    ],
  },
];
```

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

TITLE: Basic Toast Opening Function
DESCRIPTION: A utility function to create and present an Ionic toast with provided options. It abstracts the asynchronous creation and presentation process.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/toast/test/basic/index.html#_snippet_1

LANGUAGE: javascript
CODE:
```
async function openToast(opts) {
  const toast = await toastController.create(opts);
  await toast.present();
}
```

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

TITLE: Present Prompt Alert with Various Inputs
DESCRIPTION: An example of an alert used as a prompt, featuring multiple input fields of different types (text, URL, date, number) and custom buttons with handlers.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/alert/test/standalone/index.html#_snippet_7

LANGUAGE: javascript
CODE:
```
function presentAlertPrompt() {
  openAlert({
    header: 'Prompt!',
    inputs: [
      {
        placeholder: 'Placeholder 1',
      },
      {
        name: 'name2',
        id: 'name2-id',
        value: 'hello',
        placeholder: 'Placeholder 2',
      },
      {
        name: 'name3',
        value: 'http://ionicframework.com',
        type: 'url',
        placeholder: 'Favorite site ever',
      },
      {
        name: 'name4',
        type: 'date',
        min: '2017-03-01',
        max: '2018-01-12',
      },
      {
        name: 'name5',
        type: 'date',
      },
      {
        name: 'name6',
        type: 'number',
        min: -5,
        max: 10,
      },
      {
        name: 'name7',
        type: 'number',
      },
    ],
    buttons: [
      {
        text: 'Cancel',
        role: 'cancel',
        cssClass: 'secondary',
        id: 'cancel-id',
        handler: () => {
          console.log('Confirm Cancel');
        },
      },
      {
        text: 'Ok',
        handler: () => {
          console.log('Confirm Ok');
        },
      },
    ],
  });
}
```

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

TITLE: Populate Multiple Picker Columns
DESCRIPTION: This section shows multiple calls to the setPickerColumn function to populate different picker columns with various data sets. It includes examples for string options, numeric ranges, and dual numeric inputs, demonstrating the flexibility of the picker component.

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

LANGUAGE: javascript
CODE:
```
setPickerColumn( '#first', [
  { text: 'Minified', value: 'minified' },
  { text: 'Responsive', value: 'responsive' },
  { text: 'Full Stack', value: 'full-stack' },
  { text: 'Mobile First', value: 'mobile-first' },
  { text: 'Serverless', value: 'serverless' },
], 'full-stack' );

setPickerColumn( '#second', [
  { text: 'Tomato', value: 'tomato' },
  { text: 'Avocado', value: 'avocado' },
  { text: 'Onion', value: 'onion' },
  { text: 'Potato', value: 'potato' },
  { text: 'Artichoke', value: 'artichoke' },
], 'onion' );

let minutes = [];
for (let i = 1; i <= 60; i++) {
  const text = i < 10 ? `0${i}` : `${i}`;
  minutes.push({
    text,
    value: i,
  });
}
setPickerColumn('#numeric-first', minutes, 3);
setPickerColumn('#numeric-second', [
  { text: 'Tomatoes', value: 'tomato' },
  { text: 'Avocados', value: 'avocado' },
  { text: 'Onions', value: 'onion' },
  { text: 'Potatoes', value: 'potato' },
  { text: 'Artichokes', value: 'artichoke' },
], 'onion');

setPickerColumn('#dual-numeric-first', [
  { text: '12', value: 12 },
  { text: '01', value: 1 },
  { text: '02', value: 2 },
  { text: '03', value: 3 },
  { text: '04', value: 4 },
  { text: '05', value: 5 },
  { text: '06', value: 6 },
  { text: '07', value: 7 },
  { text: '08', value: 8 },
  { text: '09', value: 9 },
  { text: '10', value: 10 },
  { text: '11', value: 11 },
], 3);
setPickerColumn('#dual-numeric-second', minutes, 3);

setPickerColumn('#popover-first', [
  { text: 'Minified', value: 'minified' },
  { text: 'Responsive', value: 'responsive' },
  { text: 'Full Stack', value: 'full-stack' },
  { text: 'Mobile First', value: 'mobile-first' },
  { text: 'Serverless', value: 'serverless' },
], 'full-stack');

setPickerColumn('#popover-second', [
  { text: 'Tomato', value: 'tomato' },
  { text: 'Avocado', value: 'avocado' },
  { text: 'Onion', value: 'onion' },
  { text: 'Potato', value: 'potato' },
  { text: 'Artichoke', value: 'artichoke' },
], 'onion');

setPickerColumn('#modal-first', [
  { text: 'Minified', value: 'minified' },
  { text: 'Responsive', value: 'responsive' },
  { text: 'Full Stack', value: 'full-stack' },
  { text: 'Mobile First', value: 'mobile-first' },
  { text: 'Serverless', value: 'serverless' },
], 'full-stack');

setPickerColumn('#modal-second', [
  { text: 'Tomato', value: 'tomato' },
  { text: 'Avocado', value: 'avocado' },
  { text: 'Onion', value: 'onion' },
  { text: 'Potato', value: 'potato' },
  { text: 'Artichoke', value: 'artichoke' },
], 'onion');
```

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

TITLE: Control Ionic Menu Toggle
DESCRIPTION: These JavaScript functions demonstrate how to target an 'ion-menu-toggle' component and set its 'menu' property to control which side menu it opens. The 'menu' property can be set to 'start', 'end', or null to open the default menu.

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

LANGUAGE: javascript
CODE:
```
function openDefault() {
  const menuButton = document.querySelector('ion-menu-toggle');
  menuButton.menu = null;
}

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

function openEnd() {
  const menuButton = document.querySelector('ion-menu-toggle');
  menuButton.menu = 'end';
}
```

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

TITLE: Present Basic Alert
DESCRIPTION: Demonstrates presenting a simple alert with a header, subheader, message, and a single 'OK' button.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/alert/test/standalone/index.html#_snippet_2

LANGUAGE: javascript
CODE:
```
function presentAlert() {
  openAlert({
    header: 'Alert',
    subHeader: 'Subtitle',
    message: 'This is an alert message.',
    buttons: ['OK'],
  });
}
```

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

TITLE: Test Directory Structure Example
DESCRIPTION: Illustrates how E2E tests should be organized into directories based on features, using kebab-case for directory names. This structure makes it easier for developers to locate tests related to specific features.

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

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

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

TITLE: Ionic Action Sheet with Icons
DESCRIPTION: Demonstrates an Ionic Action Sheet where each button is configured with an icon, enhancing visual clarity and user experience.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/action-sheet/test/basic/index.html#_snippet_5

LANGUAGE: javascript
CODE:
```
async function presentIcons() {
  await openActionSheet({
    header: 'Albums',
    buttons: [
      {
        text: 'Delete',
        role: 'destructive',
        icon: 'trash',
        handler: () => {
          console.log('Delete clicked');
        },
      },
      {
        text: 'Share',
        icon: 'share',
        handler: () => {
          console.log('Share clicked');
        },
      },
      {
        text: 'Play (open modal)',
        icon: 'chevron-forward-circle',
        handler: () => {
          console.log('Play clicked');
        },
      },
      {
        text: 'Favorite',
        icon: 'heart',
        role: 'selected',
        handler: () => {
          console.log('Favorite clicked');
        },
      },
      {
        text: 'Cancel',
        role: 'cancel',
        icon: 'close',
        handler: () => {
          console.log('Cancel clicked');
        },
      },
    ],
  });
}
```

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

TITLE: Ionic Animations: CSS Styling for Animation Elements
DESCRIPTION: Provides the necessary CSS to style the elements used in the Ionic animation example. This includes defining the appearance of the animated squares and the status pane.

SOURCE: https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/animation/test/chaining/index.html#_snippet_1

LANGUAGE: css
CODE:
```
.square {
  width: 100px;
  height: 100px;
  background: rgba(0, 0, 255, 0.5);
  text-align: center;
  line-height: 100px;
  margin-left: 25px;
  margin-top: 25px;
  margin-bottom: 25px;
}

.status-pane {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 300px;
  height: 400px;
  padding-right: 10px;
  background: rgba(0, 0, 0, 0.3);
}

li .status {
  float: right;
}
```