I would like to show canvas on template rendered using React Component.
We know that in Blaze's Style we could perform that with something like,
Template.test.onRendered = function(){
// draw the canvas
}
How do we call canvas onRendered if using component?
I believe you're looking for componentDidMount(). The Meteor Chef has a few good blog posts on his blog. Here's a link to one of his first React walkthroughs.
Related
I am trying to build my own components with the library element-plus as a base.
I have great success so far when it comes to easy stuff like colors, which can be overridden easily forwarding the default theme
However, when it comes to things built-in a component, I find myself stuck.
For example, the Alert component is fairly customizable by default.
I was able with css to modify both color and shape, as well as using built-in API to custom the closing icon for example.
Image of Alert Component
However, I failed so far to change the success / info etc icons element-plus provides, since they are added programmatically inside the component code. Furthermore, the color of this icon is inherited from the background and I failed to change it alone.
My Alert Component Here
The source of the Alert component can be found here
And it seems the element plus components are not customizable further from what they explicitly let you modify.
Am I missing something ? Can this be achieved by extending the components ? Or by heavy css ?
Thanks a lot,
I am trying to get a dynamic style-sheet change for a singlepage-application to work in Angular. The idea is to create different themes and let the users choose from them in a dedicated menu. There may be many themes, so nevermind that the example below only has two variants. The functionality is ready. As of now, I have collected all styles in single large scss-files, one for each theme. (Note that I am well aware that in Angular you often split the styles in many sub-scss files, for each component. But for this idea to work, I wanted to have it all in single files for each theme). I have the menu working, and use localstorage for the app to remember which theme has been chosen, since the site has to be reloaded for the changes to take effect.
Now for the problem:
In app.component.ts, the style sheet is defined, in standard form (i.e. styleUrls: [filename]). When using a static file path/name there, and when using a variable, defined just outside the #component-code, the styles works perfectly. But for the dynamic theme change, I have a simple fetch of the variable from localstorage:
var settingsString = localStorage.getItem('usergraphicsdata');
if (isDefined(settingsString)) {
let myUserSettings = JSON.parse(settingsString);
const themename = myUserSettings.theme;
It all works there too. Different console.logs confirms it understands everything it should. But then comes the problem.
if(themename == "theme1"){
var stylePath = "./app.component_theme1.scss";
var graphicFolder = '/assets/theme1/';
} else if(themename == "theme2"){
var stylePath = "./app.component_theme2.scss";
var graphicFolder = '/assets/theme2/';
}
}
Then comes the #component with its styleUrls: [stylePath]
For some reason the if-conditions are not regarded, and the result is always that the theme declared first (in the above case "theme1") will be active. So if I just change the order in the condition, and put the code for theme 2 first, that will be chosen for the site, disregarding which theme variable is actually fetched from localstorage
I have tried several other variants as well, but this one seems to be closest to a solution. Could it be an issue with Angular limiting style changes in runtime contra build? Or have I forgotten something basic in the if-condition?
Best regards and sorry for my limited english.
Per
why don't you solve it with routing? Duplicate the component for each theme, just with a different css-file but use for all those components the same html-file and put in the menu a link to that component (with a specific theme). The added value would be that the theme name also appears in the url and you can easily apply different logic without things getting to be convoluted (different typescript-files).
Something like this:
#Component({
selector: 'sunflower',
templateUrl: './detail.component.html',
styleUrls: ['./sunflower.component.scss']
})
export class SunflowerComponent {
#Component({
selector: 'roses',
templateUrl: './detail.component.html',
styleUrls: ['./roses.component.scss']
})
export class RosesComponent {
If you tried it, please share the problems you've encountered.
update
I made an extremely basic demo (that I've tested), you can find it here:
repo
Take care & good luck.
How to inject the style of Vue components into the iframe. (for both standard components and async compoents)
I'm making an vue app which is a html5 widget load with js.
In my app, most of js and css are using in iframes, and they rely on the parent window's objects.
Unlike most iframe apps, It dose not load with an url but is made by vue components (just like this forum thread https://forum.vuejs.org/t/render-inside-iframe/6419)
I'm using some workarounds such as cssinjs, inject raw css into iframe within js logic. It should split styles to a single out of .vue file in my way.
Is there a proper way to to that?
Some relates:
https://github.com/webpack-contrib/style-loader/pull/146
https://forum.vuejs.org/t/render-inside-iframe/6419
I have a React project that is using CSS modules (for components) + React-Bootstrap with CDN-hosted CSS.
I have a requirement that when my app loads (per user), I make a call to an endpoint to get a dynamic style guide.
For simplicity, it would be something like this:
{
"color_background": "#edeae3",
"color_error": "#9e2d2d",
"color_highlight": "#69b5ce",
"color_success": "#498e49",
}
The app should then be rendered in those colors. I know there is the ability to customize static Bootstrap styling (e.g. http://getbootstrap.com/customize/), but I'm not sure how to do it dynamically.
Any guidance would be appreciated.
Just wondering if there is anyone out there who has tried to use semantic-ui with emberjs?
Were there any major pitfalls? semantic-ui looks nice and regular ... which for a relative novice to browser development, looks like a big plus vs the other 'all-inclusive' css frameworks ...
I haven't used Semantic UI with Ember but I've implemented and built individual jQuery plugins and css frameworks with Ember.
CSS & HTML
The css in Semantic UI doesn't affect Ember because Ember is a javascript framework and it's css classes all have the 'ember-' prefix. Though, it's worth noting that the css wildcard selector [class*='input'] would still target .ember-input. Thus, make sure Semantic UI's framework's selectors are efficient and non-invasive. You could probably make Semantic UI's pre-given class names easier to work with by extending Ember views or using components with tagNames and classNames set in the views/components. Alternatively, you could use register Handlebars helper that return html. For example:
Em.Handlebars.helper('button', function(unescapedText) {
var type = Handlebars.Utils.escapeExpression(unescapedText);
buttonString = '<button class="semantic-ui-button">' + text + '</button>';
return new Handlebars.SafeString(buttonString);
});
Obviously, this is a very simplified answer. You could get more complex and use block handlebars helpers with content in it (e.g. a dropdown list component with any number of different LIs in it). You could even create an Ember object which contains a key-value-pair map for all the Semantic UI classes to look up the class, tagName, and more of each Semantic UI component. For example:
App.SemanticUi = Em.Object.create({
components: [
button: {
class: 'semantic-ui-button',
tagName: 'button',
}
],
});
App.Handlebars.helper('button', function() {
// Some logic ...
var class = App.SemanticUi.get('components')[button];
// Some more logic...
});
This is just a theoretical use case.
Javascript
As for the javascript, you could optimize Semantic UI's js files for Ember by rebuilding them as components. However, I would not recommend this because it will be hard to maintain as Semantic UI releases new builds and features. Your best option is probably to load the plugins with your Ember App and then run additional customizable functions (like those found in Semantic UI's examples directory) on didInsertElement like so:
App.HomeView = Em.View.extend({
customFunctions: function() {
// Custom Semantic UI logic with DOM targeting here
$('.ui.dropdown').dropdown({
// Dropdown stuff, etc
});
}.on('didInsertElement'),
});
If you come across issues with Semantic UI not adding module functions correctly, I would look at the order in which the plugin and the elements in the DOM are loading and interacting with one another. Also, if you're running your Ember Apps on Rails or Yeoman, or a similar setup, the asset pipeline might interfere here.
If you're planning on using semantic UI just for the CSS then you shouldn't have any issues. Otherwise, I hope someone can give you a more specific answer with regards to the javascript modules.