https://github.com/kukks/Blazor.Ionic

Integration of Ionic5 into Blazor
https://github.com/kukks/Blazor.Ionic

Last synced: 3 months ago
JSON representation

Integration of Ionic5 into Blazor

• Host: GitHub
• URL: https://github.com/kukks/Blazor.Ionic
• Owner: Kukks
• License: mit
• Created: 2020-11-27T11:48:51.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2022-01-14T13:32:16.000Z (almost 3 years ago)
• Last Synced: 2024-07-31T19:42:52.128Z (3 months ago)
• Language: HTML
• Size: 9.77 MB
• Stars: 41
• Watchers: 6
• Forks: 8
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• awesome-blazor - Blazor.Ionic -   Ionic framework integration for Blazor. (Libraries & Extensions / Component bundles)

README

        
# Blazor.Ionic

[See demo here](https://kukks.github.io/Blazor.Ionic) 

## Installation

* Add Ionic to your solution. 

  * You can use the [CDN packages](https://ionicframework.com/docs/intro/cdn)

  * or by grabbing the ionic NPM Package `@ionic/core` and copying the contents of `@ionic\core\dist` and `@ionic\core\css\ionic.bundle.css` to `wwwroot.ionic`. Reference them in your index.html like this:

  ```

    

    

    

  ``` 

  * If you are using Ionic on Xamarin Mobile Blazor Bindings, the SVGS will not load unless you include the following javascript

  ```

  

          var originalFetch = window.fetch;

  

          window.fetch = function () {

              var args = [];

              for (var _i = 0; _i < arguments.length; _i++) {

                  args[_i] = arguments[_i];

              }

              var url = args[0];

              if (typeof url === 'string' && url.match(/\.svg/)) {

                  return new Promise(function (resolve, reject) {

                      var req = new XMLHttpRequest();

                      req.open('GET', url, true);

                      req.addEventListener('load', function () {

                          resolve({ ok: true, status: 200, text: function () { return Promise.resolve(req.responseText); } });

                      });

                      req.addEventListener('error', reject);

                      req.send();

                  });

              }

              else {

                  return originalFetch.apply(void 0, args);

              }

          };

  

  ```

* Add Blazor.Ionic to your project 

`Install-Package BlazorIonic`

* Add Blazor.Ionic's javascript to your index.cshtml

``

* In your `Imports.razor`, add the following `@using Blazor.Ionic`

## Usage

You should be able to make use most of the original components from Ionic [documented here](https://ionicframework.com/docs/components).