Ionic

https://ionicframework.com/docs/
Admin
Ionic is an open source UI toolkit for building performant, high-quality cross-platform mobile,...
Tokens:813,857
Snippets:6,507
Trust Score:10
Update:3 hours ago
Show doc for...
Tokens:
Raw
### ionic start examples

Source: https://ionicframework.com/docs/cli/commands/start

Various examples of using `ionic start` with different arguments and options, including listing templates, specifying a type, and using a git repository URL.

```shell
$ ionic start 
$ ionic start --list
$ ionic start myApp
$ ionic start myApp blank
$ ionic start myApp tabs --capacitor
$ ionic start myApp list --type=vue
$ ionic start "My App" blank
$ ionic start "Conference App" https://github.com/ionic-team/ionic-conference-app
```

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

### ionic start

Source: https://ionicframework.com/docs/cli/commands/start

Creates a new Ionic project. It installs dependencies and sets up the project. Running without arguments prompts for information.

```APIDOC
## ionic start

### Description
Creates a new Ionic project. It installs dependencies and sets up the project. Running without arguments prompts for information.

### Method
CLI Command

### Endpoint
`ionic start [name] [template] [options]`

### Parameters
#### Arguments
- **name** (string) - Required - The name of your new project (e.g. `myApp`, `"My App"`)
- **template** (string) - Optional - The starter template to use (e.g. `blank`, `tabs`; use `--list` to see all)

#### Options
- `--list` (boolean) - Optional - List available starter templates (or `-l`)
- `--type=<type>` (string) - Optional - Type of project to start (e.g. `vue`, `angular`, `angular-standalone`, `react`)
- `--cordova` (boolean) - Optional - Include Cordova integration
- `--capacitor` (boolean) - Optional - Include Capacitor integration
- `--id=<id>` (string) - Optional - Specify an Ionic App ID to link

#### Advanced Options
- `--no-deps` (boolean) - Optional - Do not install npm/yarn dependencies
- `--no-git` (boolean) - Optional - Do not initialize a git repo
- `--link` (boolean) - Optional - Connect your new app to Ionic
- `--project-id=<slug>` (string) - Optional - Specify a slug for your app (used for the directory name and package name)
- `--package-id=<id>` (string) - Optional - Specify the bundle ID/application ID for your app (reverse-DNS notation)

### Examples
```shell
$ ionic start 
$ ionic start --list
$ ionic start myApp
$ ionic start myApp blank
$ ionic start myApp tabs --capacitor
$ ionic start myApp list --type=vue
$ ionic start "My App" blank
$ ionic start "Conference App" https://github.com/ionic-team/ionic-conference-app
```
```

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

### App.addListener and getLaunchUrl usage example

Source: https://ionicframework.com/docs/ja/native/app

Example of using the App plugin to listen for app state changes, URL opens, and restored results, and to get the launch URL.

```typescript
import { App } from '@capacitor/app';

App.addListener('appStateChange', ({ isActive }) => {
  console.log('App state changed. Is active?', isActive);
});

App.addListener('appUrlOpen', data => {
  console.log('App opened with URL:', data);
});

App.addListener('appRestoredResult', data => {
  console.log('Restored state:', data);
});

const checkAppLaunchUrl = async () => {
  const { url } = await App.getLaunchUrl();

  console.log('App opened with URL: ' + url);
};
```

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

### Install @capacitor/camera

Source: https://ionicframework.com/docs/native/camera

Install the plugin and sync the native projects.

```bash
npm install @capacitor/camera
npx cap sync
```

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

### Install @capacitor/keyboard

Source: https://ionicframework.com/docs/ja/native/keyboard

Install the plugin and sync the native projects.

```bash
npm install @capacitor/keyboard
npx cap sync
```

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

### Install @capacitor/filesystem

Source: https://ionicframework.com/docs/ja/native/filesystem

Install the plugin and sync native projects.

```bash
npm install @capacitor/filesystem
npx cap sync
```

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

### Run ionic ssh setup

Source: https://ionicframework.com/docs/cli/commands/ssh-setup

Starts the interactive setup wizard for Ionic SSH keys. Use this command to automatically configure SSH keys for Ionic.

```shell
$ ionic ssh setup
```

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

### useKeyboard usage example

Source: https://ionicframework.com/docs/ja/vue/utility-functions

Uses useKeyboard to get reactive refs for keyboard visibility and height, and watches keyboardHeight to log its value in pixels.

```js
import { watch } from 'vue';
import { useKeyboard } from '@ionic/vue';

const { isOpen, keyboardHeight } = useKeyboard();

watch(keyboardHeight, () => {
  console.log(`Keyboard height is ${keyboardHeight.value}px`);
});
```

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

### Install @capacitor/splash-screen

Source: https://ionicframework.com/docs/ja/native/splash-screen

Install the plugin and sync the native projects.

```bash
npm install @capacitor/splash-screen
npx cap sync
```

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

### Install Ionic CLI and create an Angular project

Source: https://ionicframework.com/docs/angular/overview

Install the Ionic CLI globally with npm, then create a new Angular-based Ionic app using the 'tabs' starter template. After creation, navigate into the project directory and start the development server with 'ionic serve'.

```shell-session
$ npm install -g @ionic/cli
$ ionic start myApp tabs --type angular

$ cd myApp
$ ionic serve █
```

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

### Install @capacitor/device

Source: https://ionicframework.com/docs/ja/native/device

Install the plugin and sync the native projects.

```bash
npm install @capacitor/device
npx cap sync
```

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

### Install @capacitor/screen-reader

Source: https://ionicframework.com/docs/ja/native/screen-reader

Install the plugin and sync the native projects.

```bash
npm install @capacitor/screen-reader
npx cap sync
```

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

### Install @capacitor/text-zoom

Source: https://ionicframework.com/docs/ja/native/text-zoom

Install the plugin and sync native projects.

```bash
npm install @capacitor/text-zoom
npx cap sync
```

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

### Install @capacitor/action-sheet

Source: https://ionicframework.com/docs/ja/native/action-sheet

Install the plugin and sync native projects with Capacitor.

```bash
npm install @capacitor/action-sheet
npx cap sync
```

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

### Install @capacitor/haptics

Source: https://ionicframework.com/docs/ja/native/haptics

Install the plugin and sync native projects.

```bash
npm install @capacitor/haptics
npx cap sync
```

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

### Install @capacitor/status-bar

Source: https://ionicframework.com/docs/ja/native/status-bar

Install the plugin and sync the native projects.

```bash
npm install @capacitor/status-bar
npx cap sync
```

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

### Install @capacitor/motion

Source: https://ionicframework.com/docs/ja/native/motion

Install the plugin and sync native projects with Capacitor.

```bash
npm install @capacitor/motion
npx cap sync
```

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

### Install @capacitor/push-notifications

Source: https://ionicframework.com/docs/ja/native/push-notifications

Install the plugin and sync native projects.

```bash
npm install @capacitor/push-notifications
npx cap sync
```

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

### Install @capacitor/share with npm and sync

Source: https://ionicframework.com/docs/ja/native/share

Install the plugin and sync native projects.

```bash
npm install @capacitor/share
npx cap sync
```

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

### ionic config get examples

Source: https://ionicframework.com/docs/cli/commands/config-get

Examples of using `ionic config get` to retrieve configuration values. The first example prints the entire config, the second gets a specific property, and the last two use the `--global`/`-g` option to read from the global CLI config.

```shell
$ ionic config get 
$ ionic config get id
$ ionic config get --global user.email
$ ionic config get -g npmClient
```

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

### Start the development server

Source: https://ionicframework.com/docs/javascript/quickstart

Run the development server with npm. After starting, open your browser and visit the URL shown in the console.

```shell
npm run dev
```

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

### Install vue-virtual-scroller with npm

Source: https://ionicframework.com/docs/ja/vue/virtual-scroll

Install the vue-virtual-scroller package. Use the 'next' tag to get a version compatible with Vue 3; otherwise, you'll get a version only compatible with Vue 2.

```shell
npm install vue-virtual-scroller@next
```

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

### ionic init examples

Source: https://ionicframework.com/docs/cli/commands/init

Provides several usage examples: initializing without arguments, with a project name, with a name and type, and with the `--multi-app` flag.

```shell
$ ionic init 
$ ionic init "My App"
$ ionic init "My App" --type=angular
$ ionic init --multi-app
```

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

### Install Ionic Core with Vite (npm create vite, npm install, npm run dev)

Source: https://ionicframework.com/docs/javascript/overview

Commands to scaffold a new vanilla JavaScript app with Vite, install dependencies including @ionic/core, and start the development server. Requires Node.js with npm installed.

```shell-session
$ npm create vite@latest my-app -- --template vanilla

$ cd my-app
$ npm install && npm install @ionic/core
$ npm run dev █
```

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

### Vue: ion-tab-bar with script setup

Source: https://ionicframework.com/docs/api/tab-bar

Vue example using ion-tab-bar with ion-tab-button and ion-icon, and a script setup block importing components from @ionic/vue and icons from ionicons/icons.

```html
<template>
  <ion-tabs>
    <!-- Tab bar -->
    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="account">
        <ion-icon :icon="person"></ion-icon>
      </ion-tab-button>
      <ion-tab-button tab="contact">
        <ion-icon :icon="call"></ion-icon>
      </ion-tab-button>
      <ion-tab-button tab="settings">
        <ion-icon :icon="settings"></ion-icon>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</template>

<script setup lang="ts">
  import { IonIcon, IonTabBar, IonTabButton, IonTabs } from '@ionic/vue';
  import { call, person, settings } from 'ionicons/icons';
</script>
```

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

### ionic capacitor build examples

Source: https://ionicframework.com/docs/cli/commands/capacitor-build

Examples of building for no specific platform, Android, and iOS.

```shell
$ ionic capacitor build 
$ ionic capacitor build android
$ ionic capacitor build ios
```

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

### Check Node.js and npm versions

Source: https://ionicframework.com/docs/angular/quickstart

Run these commands to verify Node.js and npm are installed before starting Ionic development.

```shell
node -v
npm -v
```

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

### Example Plugin Usage - Preferences

Source: https://ionicframework.com/docs/ja/native/preferences

Shows how to import the Preferences plugin and use its set, get, and remove methods to store and retrieve a string value.

```typescript
import { Preferences } from '@capacitor/preferences';

const setName = async () => {
  await Preferences.set({
    key: 'name',
    value: 'Max',
  });
};

const checkName = async () => {
  const { value } = await Preferences.get({ key: 'name' });

  console.log(`Hello ${value}!`);
};

const removeName = async () => {
  await Preferences.remove({ key: 'name' });
};
```

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

### Example: Listen for network status changes and get current status

Source: https://ionicframework.com/docs/ja/native/network

Imports Network, adds a listener for 'networkStatusChange', and defines an async function to log the current status using getStatus().

```typescript
import { Network } from '@capacitor/network';

Network.addListener('networkStatusChange', status => {
  console.log('Network status changed', status);
});

const logCurrentNetworkStatus = async () => {
  const status = await Network.getStatus();

  console.log('Network status:', status);
};
```

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

### ionic start command syntax

Source: https://ionicframework.com/docs/cli/commands/start

Shows the basic syntax for the `ionic start` command. Use it to create a new Ionic project with a specified name and template.

```shell
$ ionic start [name] [template] [options]
```

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

### Update src/App.tsx to use Ionic components

Source: https://ionicframework.com/docs/ja/react/add-to-existing

Replace the contents of src/App.tsx with this example to start using Ionic components like IonButton and IonDatetime. It imports the required Ionic CSS and calls setupIonicReact().

```tsx
import { IonButton, IonDatetime, setupIonicReact } from '@ionic/react';
import './App.css';

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

setupIonicReact();

const App: React.FC = () => (
  <>
    <IonButton>Button</IonButton>
    <IonDatetime></IonDatetime>
  </>
);

export default App;
```

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

### Install Capacitor and Add Native Platforms

Source: https://ionicframework.com/docs/ja/javascript/quickstart

Install Capacitor core, CLI, and platform packages, then initialize the project, build the app, and add iOS and Android platforms. Run these commands in the project root.

```shell
npm install @capacitor/core @capacitor/cli @capacitor/ios @capacitor/android
npx cap init

npm run build

npx cap add ios
npx cap add android
```

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

### Using Ionic Storage to set and get data

Source: https://ionicframework.com/docs/core-concepts/cross-platform

Example of a class using Ionic's Storage library to asynchronously set and get key-value pairs. The setData method stores a value and logs the result, while getData retrieves the value and logs it. This works across native and web platforms by automatically selecting the appropriate storage backend.

```tsx
class MyClass {
  constructor(public storage: Storage) {}

  async setData(key, value) {
    const res = await this.storage.set(key, value);
    console.log(res);
  }

  async getData(key) {
    const keyVal = await this.storage.get(key);
    console.log('Key is', keyVal);
  }
}
```

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

### Create a new app with ionic start --no-deps

Source: https://ionicframework.com/docs/cli/configuration

Run from the apps/ directory to create a new app and register it in the root config. Use --no-deps to skip dependency installation when dependencies are hoisted.

```shell
$ cd apps/
$ ionic start "My New App" --no-deps
```

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

### getPlatforms method usage

Source: https://ionicframework.com/docs/react/platform

Use getPlatforms() to get an array of platform names the app is currently running on. For example, on an iPhone it returns ["iphone", "ios", "mobile", "mobileweb"].

```tsx
import { getPlatforms } from '@ionic/react';

getPlatforms(); // returns ["iphone", "ios", "mobile", "mobileweb"] from an iPhone
```

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

### List all available Ionic templates

Source: https://ionicframework.com/docs/developing/starting

Use `ionic start --list` to see all available starter templates across all project types.

```shell-session
$ ionic start --list
```

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

### Push Notifications Example: Listeners, Registration, and Delivered Notifications

Source: https://ionicframework.com/docs/ja/native/push-notifications

Shows how to add listeners for registration, registrationError, pushNotificationReceived, and pushNotificationActionPerformed events, request permissions, register for push notifications, and get delivered notifications. The registerNotifications function throws an error if the user denies permissions.

```typescript
import { PushNotifications } from '@capacitor/push-notifications';

const addListeners = async () => {
  await PushNotifications.addListener('registration', token => {
    console.info('Registration token: ', token.value);
  });

  await PushNotifications.addListener('registrationError', err => {
    console.error('Registration error: ', err.error);
  });

  await PushNotifications.addListener('pushNotificationReceived', notification => {
    console.log('Push notification received: ', notification);
  });

  await PushNotifications.addListener('pushNotificationActionPerformed', notification => {
    console.log('Push notification action performed', notification.actionId, notification.inputValue);
  });
}

const registerNotifications = async () => {
  let permStatus = await PushNotifications.checkPermissions();

  if (permStatus.receive === 'prompt') {
    permStatus = await PushNotifications.requestPermissions();
  }

  if (permStatus.receive !== 'granted') {
    throw new Error('User denied permissions!');
  }

  await PushNotifications.register();
}

const getDeliveredNotifications = async () => {
  const notificationList = await PushNotifications.getDeliveredNotifications();
  console.log('delivered notifications', notificationList);
}
```

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

### Install @capacitor/clipboard with npm and cap sync

Source: https://ionicframework.com/docs/ja/native/clipboard

Install the plugin and synchronize the native projects.

```bash
npm install @capacitor/clipboard
npx cap sync
```

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

### Install nvm

Source: https://ionicframework.com/docs/developing/tips

Installs nvm (Node Version Manager) using the official install script. Run this in a terminal.

```shell
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
```

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

### Install @capacitor/network with npm and cap sync

Source: https://ionicframework.com/docs/ja/native/network

Install the plugin and sync native projects. Run these commands in your project root.

```bash
npm install @capacitor/network
npx cap sync
```

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

### Verify Git installation

Source: https://ionicframework.com/docs/intro/environment

Run this command in a new terminal window to verify that Git is installed. The output should show the installed Git version.

```shell
git --version
```

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

### Install @capacitor/app-launcher with npm and cap sync

Source: https://ionicframework.com/docs/ja/native/app-launcher

Install the plugin and sync native projects using npm and npx cap sync.

```bash
npm install @capacitor/app-launcher
npx cap sync
```

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

### Install Swiper.js

Source: https://ionicframework.com/docs/angular/slides

Installs the Swiper.js library as a dependency.

```shell
npm install swiper@latest
```
Tokens:
Raw