I often read people mentioning about directive in Ionic, example :
<ion-toolbar color="primary">
or
<ion-header no-border>
i have gone through ionic documentation (current, not v1), and i can't find a place where the directive as color and no-border are covered.
Where can i find a comprehensive listing of those directive, and a way to know which component they can apply to ?
Cheers
Before you start,have to know some basics in ionic 3. In ionic, Ionic team have introduced lots of predefined directive for better rendering.
color and no-border are predefined directive in ionic 3 and I don't think you can get these comprehensive list of directive details.
If you know the basics of ionic 1, you can get used to it easily.Otherwise it will take some time to learn.
Remember one thing, Ionic documentation doesn't have the full directive details and how to use it.
Best thing is, You can find the answer on various sites,blogs,forum,when it is needed...
This is the link for creating ionic directive in ionic 2&3.
https://www.joshmorony.com/how-to-create-a-directive-in-ionic-2-parallax-header/
Related
Let me preface this by saying my knowledge of node apps and javascript is very limited, all my programming knowledge comes from a python data analyst background.
So, I am trying to learn frontend and build an app in Svelte. I will serve this app with another backend so I will not be using SvelteKit. I am also using Ionic for my UI framework. I will probably use Routify for routing but this is beyond the scope of this question. Also, I know svelte isn't officially supported by Ionic but i'm not interested in using another framework.
The simple method would be to include the Ionic CDN in the svelte index.html. However, I would like to keep my files in one place when I build the final app and not require a CDN or even possibly a network connection if I decide to use Capacitor to build for mobile devices. So, I'm not sure how to proceed. I would like to bundle Ionic (Ionic/Core - IonicIcons) with the default JS and CSS bundles that svelte builds using Rollup. Googling around a bit iv'e discovered I apparently need to use something called "rollup-plugin-css-only" to bundle the CSS and somehow include the JS files in commonjs in the "rollup.config.js". I tried adding the path to the JS files to commonjs but I couldn't see any changes to the bundled JS the svelte outputs. I also have no idea how to use add the css or use "rollup-plugin-css-only". Instructions and explanations iv'e found haven't been very helpful.
So, in summary... I'm trying to bundle Ionic into my svelte project without using a CDN and haven't figured out how too do it yet. I also may not be understanding this workflow correctly so let me know if I got something wrong. I just need an explanation or example of Ionic bundled in a svelte app. I would also like to mention that the workflow I am looking to accomplish will also allow custom themes in Ionic with the CSS processing.
'm not planning on using JQuery much at all in my new Ionic 2 app.
However I do need to include the Datatables JQuery plugin, as I'm looking for a consistent UI across platforms.
Datatables is available on npm, as separate js and css packages.
I don't have any clue about how to start including the plugin in my app and then initialising the datatables, which I would normally do with $(.table).datatable();
Has anyone done this? Could give me any pointers in this 101 question...
Tom
I couldn't find anything about this. basically i want to create a base template, with all the head tag and container in body or menu, etc... so that other templates can extend it.
how would i achieve this with Ionic framework?
The way you have phrased your question leads one to think you have not quite understood how Ionic works...
A typical Ionic app has only one index.html file with a <head>. The rest of the .html files are just content templates to be rendered as the content of that page. So you don't need the "base template" you are asking about, that is all taken care of by Ionic, from the index.html.
I would suggest reading and following http://ionicframework.com/docs/guide/starting.html
I'm new to Ionic and would like to implement a typeahead for displaying the users list without using Bootstrap and would love if provided with an example .
I was looking for something similar for an ionic app I was building. I can provide a few links that you can look at and choose the most appropriate for your case.
https://github.com/sn0opr/ionic-autocomplete
https://github.com/guylabs/ion-autocomplete
http://www.sitepoint.com/creating-a-typeahead-widget-with-angularjs/
The last link is written is great tutorial written in pure angular. The first two links are projects you need to include in your app and then use them as directives to achieve your goal. Cheers!
It is not clear to me how to "build" a UI with Appgyver Steroids. It looks like it uses only the CSS side of Ionic to render views, and not the javascript side.
This way is not possible to design UI with Ionic angular directives.
Am I wrong?
So my question is: which is the right way to design views in a Steroids app? Just by HTML and Ionic CSS classes? Is there a guide, maybe with example?
Is it possible to simply include Ionic javascript and use its directives? Some drawbacks?
Merituuli from AppGyver here.
We don't use the angular directives of Ionic because Steroids has methods to use native tabs and drawer elements, thus making the solution Ionic made unnecessary.
If you however want to include the Ionic angular directives you can do that by downloading the files you want to use from http://code.ionicframework.com/#, adding them to the /vendor folder and including them in your application.html.
If you need guides, tutorials and examples of using Steroids tabs, modals etc: https://academy.appgyver.com/categories/3-user-interface-and-design/contents
Hope this helps!