Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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 - ![GitHub stars](https://img.shields.io/github/stars/kukks/Blazor.Ionic?style=flat-square&cacheSeconds=604800) ![last commit](https://img.shields.io/github/last-commit/kukks/Blazor.Ionic?style=flat-square&cacheSeconds=86400) 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).