Thanks David. It worked! Really appreciate the prompt response. In addition to the Stencil setup the "display:block" styling was very important (as you pointed out in the documentation), and in addition if one is only using a few ionicons then "size=large" is also important. If you'd like me to compile my observations so as to update the documentation for Ionic let me know - there are many users of other browsers (Samsung, Kai) in my part of the world and I suspect your solution may be in use longer than you think!
web-social-share is built using Stencil (stenciljs.com/docs/angular). Therefore after npm install you need to:
i) update the relevant module (e.g. home.module) with schemas : [CUSTOM_ELEMENTS_SCHEMA]
ii) update main.ts with a "defineCustomElements" call.
Typically you may add these 2 lines:
import {defineCustomElements} from 'web-social-share/dist/loader';
defineCustomElements();
However, in practice, you probably already have a defineCustomElements e.g. if you're using pwa-elements. So you need to do something like:
import * as socialShare from 'web-social-share/dist/loader';
socialShare.defineCustomElements();
As stated in the documents using the "display:block" attribute within the web-social-share element is important - don't skip that.
If you're using ionicons you will probably need to add a "size=large" attribute.
As hinted in the docs: you would want to include an "import {WebSocialShareInput} from 'web-social-share';" so that you can specify the type of your shareOptions object i.e. if you activate the element via a line like "webshare.share = share", then "share" should have been defined as type WebSocialShareInput.
I think we should add "Angular" next to "Ionic". This hasn't to be done, or has to be done differently, with other frameworks but, beside that, coolio 🤙.
We can maybe provide these notes in the repo in a separate new markdown file, like IONIC.md and add a note in the README.md like "For Ionic find more information here" or something which points to this specific doc.
What do you think? If that works for you, can you even send a PR?
Thanks David. It worked! Really appreciate the prompt response. In addition to the Stencil setup the "display:block" styling was very important (as you pointed out in the documentation), and in addition if one is only using a few ionicons then "size=large" is also important. If you'd like me to compile my observations so as to update the documentation for Ionic let me know - there are many users of other browsers (Samsung, Kai) in my part of the world and I suspect your solution may be in use longer than you think!
Sweet happy to hear it worked out!
Sure if you don't mind compiling your observations, never against.
Thanks for giving it a try and for the feedback 😀.
Wasn't sure how best to send this so I'm just putting it here and you decide how best to use it.
SOME NOTES ON USING WEB-SOCIAL-SHARE IN IONIC VIA NPM
Typically you may add these 2 lines:
import {defineCustomElements} from 'web-social-share/dist/loader';
defineCustomElements();
However, in practice, you probably already have a defineCustomElements e.g. if you're using pwa-elements. So you need to do something like:
import * as socialShare from 'web-social-share/dist/loader';
socialShare.defineCustomElements();
As stated in the documents using the "display:block" attribute within the web-social-share element is important - don't skip that.
If you're using ionicons you will probably need to add a "size=large" attribute.
As hinted in the docs: you would want to include an "import {WebSocialShareInput} from 'web-social-share';" so that you can specify the type of your shareOptions object i.e. if you activate the element via a line like "webshare.share = share", then "share" should have been defined as type WebSocialShareInput.
Really nice @phkla1 👍
I think we should add "Angular" next to "Ionic". This hasn't to be done, or has to be done differently, with other frameworks but, beside that, coolio 🤙.
We can maybe provide these notes in the repo in a separate new markdown file, like
IONIC.mdand add a note in theREADME.mdlike "For Ionic find more information here" or something which points to this specific doc.What do you think? If that works for you, can you even send a PR?
Hi @daviddalbusco . Yes, good idea on PR. I'll do that shortly.
❤️