欧洲杯官网投注

Ionic Docs Docs

Native

Search docs/
Search docs/
Ionic Docs Docs
  • Structure
  • Responsive Grid
  • Global StylesheetsCSS Utilities
  • Basics
  • Platform Styles
  • CSS VariablesColorsThemesDark ModeAdvancedColor Generator
  • Overview
  • Build Your First App
    LifecycleNavigation/RoutingConfigPlatformTestingStoragePerformanceProgressive Web Apps
  • Overview
  • Quickstart
  • Build Your First App
    LifecycleNavigation/RoutingConfigPlatform UtilsProgressive Web AppsTesting
  • Overview
  • Build Your First App
  • LifecycleNavigation/Routing
  • Animations
  • Gestures
  • iOS App Store
  • Android Play StoreProgressive Web App (PWA)Electron Desktop App
  • Security
  • Debugging
  • Build ErrorsRuntime ErrorsNative ErrorsCORS Errors
  • Fundamentals
  • Cross PlatformWeb ViewWhat are PWAs?
  • How to Contribute
  • Code of Conduct
  • Glossary
  • VersioningRelease NotesGitHub Changelog
  • Support Policy
  • Browser Support
  • Migration
  • Books
  • CoursesGuidesPostsToolsVideos

    Ionic Packages

    Contents

    欧洲杯官网投注Ionic provides different packages that can be used to quickly get started using Ionic Framework or Ionicons in a test environment, Angular, any other framework, or none at all.

    Ionic Framework CDN

    Ionic Framework can be included from a CDN for quick testing in a,欧洲杯官网投注, or any other online code editor!

    It's recommended to use jsdelivr to access the Framework from a CDN. To get the latest version, add the following inside the<head>欧洲杯官网投注 element in an HTML file, or where external assets are included in the online code editor:

    <script type="module" src="http://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script><script nomodule src="http://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script><link rel="stylesheet" href="http://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>
    CopyCopied
    With this it's possible to use all of the Ionic Framework core components without having to install a framework. The CSS bundle will include all of the IonicGlobal Stylesheets.

    This does not install Angular or any other frameworks. This allows use of the Ionic Framework core components without a framework.

    Ionic + Angular

    When using Ionic Framework in an Angular project, install the latest@ionic/angular package fromnpm. This comes with all of the Ionic Framework components and Angular specific services and features.

    $ npm install @ionic/angular@latest --save

    Each time there is a new Ionic Framework release, thisversion will need to be updated to get the latest features and fixes. The version can beupdated using npm, as well.

    For adding Ionic to an already existing Angular project, use the Angular CLI'sng add feature.

    $ ng add @ionic/angular

    This will add the necessary imports to the@ionic/angular package as well as add the styles needed.

    Ionic + React

    To add Ionic to an already existing React project, install the@ionic/react and@ionic/react-router package.

    $ npm install @ionic/react$ npm install @ionic/react-router

    CSS

    To include the necessary CSS in a React project, add the following to the root App component.

    /* 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';/* Optional CSS utils that can be commented out */import '@ionic/react/css/padding.css';import '@ionic/react/css/float-elements.css';import '@ionic/react/css/text-alignment.css';import '@ionic/react/css/text-transformation.css';import '@ionic/react/css/flex-utils.css';import '@ionic/react/css/display.css';
    CopyCopied
    Ionicons CDN

    Ionicons is packaged by default with the Ionic Framework, so no installation is necessary if you're using Ionic. To use Ionicons without Ionic Framework, place the following<script> near the end of your page, right before the closing</body> tag.

    <script type="module" src="http://cdn.jsdelivr.net/npm/ionicons@4.7.4/dist/ionicons/ionicons.esm.js"></script><script nomodule src="http://cdn.jsdelivr.net/npm/ionicons@4.7.4/dist/ionicons/ionicons.js"></script>
    CopyCopied

    See Ionicons usage欧洲杯官网投注 for more information on using Ionicons.

    Previous
    CLI Installation
    Next
    Next Steps