We are currently migrating a hybrid application from a selfmade framework to ionic 2. In the old app we had multiple sass files that compiled into a singe css file containing different themes that were applied to the app by switching a class on the body (like ".skin-red").
Is there a way to achieve that with the $varaiables map of ionic or will i have to create multiple style files with a custom written task and change the used css file at runtime with js code? (which i'd rather not do)
Follow this User-Selected Style Themes in an Ionic 2 Application tutorial.
Or you can set all colors using ts variable and update color hash code run time.
HTML:
<ion-header>
<ion-toolbar color="primary" [style.background]="headerBackground">
<ion-title>
</ion-title>
</ion-toolbar>
</ion-header>
TS:
public headerBackground = '#ddd';
Should be shared variable.
Related
We're using the Angular flavor of Material 2 (https://material.angular.io/) for a main project, but would like to create a separate static (HTML/CSS) prototyping workspace that is able to access just the Material 2 CSS styles from that main project. The idea is that this separate directory will pull the compiled CSS from the Angular project, but allow for experimentation in HTML/CSS styling without configuring any JS.
Is it possible to compile the full CSS (components, typography, etc.) from the Angular Material 2 project, without needing AngularJS? It seems like there are styles being inserted by JS using the <style> tag.
Here's a basic demo of the SCSS file I've tried to build to load the Material styles:
#import "~#angular/material/theming";
#include mat-core();
This works for adding things like typography and the class names, but it doesn't add all of the possible styles for those classes. For example, the card component only gets very basic styles—it's missing the other styles such as padding that seem to be injected via JS.
I also tried the material-components-web project, which has compiled CSS here. It comes very close to doing the job. But unfortunately just renaming .mdc- to .mat- is not enough. The component names and usage aren't quite the same.
For example, material-components-web uses BEM: mdc-card__actions.
Whereas the Angular versions calls it .mat-card-actions.
I am using Xamarin to support
Android
iOS
Windows 8.1
WPF
I can create a PCL project that each of those platforms can see from their platform specific project.
What I want to be able to do is host a HTML page and associated javascript files in the PCL.
All the examples I have seen for loading Local Html files are when there is a copy of the HTML in each platform specific project. I don't want 4 copies of the HTML I want one copy in the PCL.
Can this be done?
We tried to do the same thing a few months ago and as far as I remember we couldn't. The solution for us to make it work was downloading (or extracting in your case) html files to the local directory for each platform using PCLStorage nuget and load directly from local path with custom renderers.
We used custom renderers for each platform for WebView instead of crossx webview. One thing to note that instead of using UIWebView you must use WKWebView if you're targeting iOS9+.
Simply pass your main directory of html files to each renderer and try native controls to use local content. Unfortunately xamarin's crossx WebView does not provide flexible actions when it comes to local content.
I am using Intel XDK to use develop ionic app. I wanted to override the default color variables for ionic. I followed the followings steps exactally:
Writing a Sass Theme
and finally gulp sass command to complile sass.
I got the my desired color for balanced variable, but all the ionic icons are not displaying
I do not know what went wrong.
Yo can use custom CSS elements to overwrite color properties. Use Intel xdk console to inspect the element first then create a custom css for that element.
I have three different Extjs projects, all the three using MVC architecture. Out of these three one is going to be common to the other two projects. I would want the common project to be controlling and deciding which project to be loaded. But however I also want to separate the project codes and not have them binded together in a single project. is it possible ? if so how ?
Change:
In Simple Words how can i access few js files in extjs which is not inside the app folder.
We can use the Paths{} attribute inside Ext.loader to set a different path apart from the app path to access files outside app folder. The appFolder attribute of app.js is set to app by default. You can also change that to map a different app path. You can verify these in Sencha Docs.
Following documentation, I downloaded Semantic UI with:
npm install semantic-ui
then, I customised few variables per site, also few on element level, button for example.
This is all well, and I haven't had any problem changing those.
Then in theme.config file, I could specify:
#button: 'mytheme';
to pickup those custom style overrides
For my theme to be separate from Semantic UI core, I crated directory in the following path,
src/themes/mytheme
,and after running gulp build, I expected to have that mytheme exported over to dist/themes/mytheme along with basic and default which were already there. But that was not the case. So to be able to use my new button styles, I had to move manually newly generated button.css from dist/components after that gulp build task.
Am I doing this wrong? How to have all override files in one place like packaged theme? So I could then add <link> declaration after semantic.min.css to use my overrides.