Hello,
If I can use scss for custom UI design in Ionic2 application, but what and how I can use for custom original design components like Vector Buttons Scalable Vector Graphics format created in Illustrator for example, or something else
Any example or advice would be helpful
Hello,
you can embed svg as often descriped as img tag, base64, etc.
To get more controll over it you should embbed it as svg tag like any other html element.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200">
<ellipse cx="200" cy="100" rx="190" ry="90" style="fill: red; stroke: green; stroke-width: 2" />
</svg>
If you use Illustrator as editor, then you must take care of option in save dialog. Also embed ilustrator many things into svg file, that not necessary in html. Better strip svg files from these things before you use it
Best regards, anna-liebt
Hello,
maybe I understood it wrong.
You can use css on svg like on any other html tag. see here http://tutorials.jenkov.com/svg/svg-and-css.html
At the end scss is compiled to css.
Best regards, anna-liebt
@anna_liebt @robinyo Hello
Thank you!
I’m wondering, what is a best practice to create custom UI components design, scss with SVG or maybe something else, If SVG works same way, what is a proper using for responsive UI in ionc2 Android app, if I will go with SVG and CSS - Cascading Style Sheets and Theming your Ionic 3 App - Bespoke SVG icons. And how properly use touch events for btn-up and btn-down with custom design .png image:
<button (click)="click()" block> <img src="assets/img/btn_up.png" style="width : 100% ; height : 100%" ng-click="nextpage()" > </button>
should I use (tap) instead (click)
<button ion-button clear (tap)="nextPage()"><img src="assets/img/btn_up.png" alt=" " /></button>Hello,
mostly is a ui library like ionic, primeng, etc a good choice. Most case will covered by such ui library. if you use svg, then you have a greatst flexibility, but must implement anything yourself. For example, if you use a button, then it scale to his text lenght, change font-size, button scales as expected. If you use textfield in svg, you must do your scaling by yourself. Otherwise you can make astonishing effects with svg elements. Your decision, if it is worth.
Mostly you are with click on the good side. If in some cases click isn’t working as expected, then may is tap a better choice or maybe …
Best regrads, anna-liebt
@anna_liebt Thank you!