If I try to define a textalign with justify value in reactjs native, I get the error message that only four values are supported: auto, left, right, center. Is it possible to work around this, and define textalign with justify? Below is the sample code:
var styleTest = StyleSheet.create({
title: {
fontSize : 20,
color : 'rgb(0,0,255)',
textAlign: "justify"
}
});
Just to clarify, I see this when trying out reactjs native for ios, not in reactjs.
The above error happens when calling StyleSheet.create method which calls StyleSheetValidation.validateStyle method. I guess in order to create a non-supported CSS property, I have to do a workaround and call CSS directly. I am curious how to go about including other stylesheet properties that are not supported, in a simple way. I couldn't find documentation on this. Pointers will be very much appreciated.
I have to do a workaround and call CSS directly
It's not actually CSS, it's a description of how it should look using the terms you know from CSS. The actual implementation does a bunch of math and then conveys it to UIKit in a way it understands, similar to how browsers implement CSS.
This has been done from scratch for react-native. It's not using an existing css engine.
I am curious how to go about including other stylesheet properties that are not supported, in a simple way
As you may have guessed by the words 'math' and 'UIKit', there's no simple way to do this, and absolutely no way to do it without modifying the objc code.
I suggest creating an issue or sending a pull request if it's missing something. Not all of CSS will be supported.
Disclaimer: Minimal iOS/react-native experience, I don't know what's required to add text justification. It may be simple.
Related
This might be a very particular use case but I have a React app which uses Victory Charts. I need to get a screenshot of the chart and export it as a png.
I have done some research and here are some ideas that I have so far:
Export it using some functionality within victory.js itself. The closest I could get is: https://github.com/FormidableLabs/victory/issues/781#event-1281057513 But this approach doesn't work. I've tested it. It gives me a reference to the Chart's container though which might be useful.
Use some 'screenshot' library I tried saveSvgAsPng and made this: https://codesandbox.io/s/victory-chart-to-png-k9zo8 But this doesn't work too and I can't figure out why not.
Use some sort of implementation using D3.js upon which victory charts is built. But I have no idea how to do that too.
If you guys have any idea about how this sort of thing can be done, please let me know.
In order to saveSvgAsPng to work, you have to pass an <SVG> element to it.
After reviewing your code at https://codesandbox.io/s/victory-chart-to-png-k9zo8, you evidently passed a Container element to it.
There this.state.ref refers to the Container element but not the <SVG> element. Change this.state.ref to this.state.ref.firstChild which refers to the <SVG> element in the container. And the library works like a charm in downloading the SVG as PNG.
I am pretty new to reactjs. I was assigned with a task which consists of generating the "privacy policy" of the website. The layout of the page kinda looks like a readme of github.
1.header
***some points in block letters***
A. subsection
B. another subsection
- item
- item
C. a)item
b)item
I could easily do with simple header and paragraph tags with some styling. But we've included translations in the page, so all of the texts are coming from a json file incorporated with export default defineMessages() from messages.js.
Is there any way there is some kind of markup or template which will make my work easier?
n.b. Being a novice to reactjs, I tried my best to make the question as much simple as I could. Any help will be appreciated!
I am trying to draw a graph from my ontology which is in RDF format.I am following "https://github.com/scienceai/jsonld-vis" repositry to develop.I am getting error when trying to replicate the above github code.I am adding my code for the aobve implemetation HERE
I came across many comments saying above github repositry works.But i am not to figure it out. Please help
d3.jsonldVis(mockData, '#graph', {
w: 800,
h: 600,
maxLabelWidth: 250,
tipClassName: 'tip-class'
});
If there are any other libraries i can use to implement the above in angularjs,javascript environment please mention.
I'm not sure if this is to be answered but anyway with minor changes the example can be reproduced:
Minor Changes:
The MAIN code to initiate jsonld-vis index.js wasn't being included
CSS included as a script??? Probably a mistake. Added a link tag to include it.
The library is based on d3 version 3 and you were trying to include the latest (i.e. v5.6)
You don't need to use the import statements here. Read more about import here or here
Fork: https://plnkr.co/edit/KkNHWQa0xxiotB4tN7Ru?p=preview
Suggestions? d3 Collapsible Tree is a great viz that you can refer to and customize as per your requirements.
I am trying to understand how things connect in the Admin Dashboard example, the register page here: http://examples.sencha.com/extjs/6.5.0/examples/admin-dashboard/?classic#register
FYI, I have read the entire docs on the quick start and the guide (which includes almost everything), and yet I find few things that I cannot connect. Maybe the docs need improvement or maybe I'm just dumb. I'll find out if its the latter.
This is the entire source code for the application: https://github.com/bjornharrtell/extjs/tree/master/templates/admin-dashboard. I am working with the classic version.
Now for the register page, the main view is this: https://github.com/bjornharrtell/extjs/blob/master/templates/admin-dashboard/classic/src/view/authentication/Register.js
My questions are:
At line 25: cls: 'auth-dialog-register'. Which means an extra css class is being added to the component. Now I searched the scss files and did not find the style definitions for this class anywhere. Since this component is the 'authdialog', I looked at this file in particular: https://github.com/bjornharrtell/extjs/blob/master/templates/admin-dashboard/classic/sass/src/view/authentication/Dialog.scss, but I cannot find 'auth-dialog-register' anywhere. Where is that class defined? Or is it not being used(in that case, bummer)
Similarly at lines: Line 42, Line 57 also, there is a class 'auth-textbox' being attached to text boxes, but I cannot find where its styles are defined.
Moving on, on line 49, for the textfield, a 'triggers' config is defined. In the docs it is here: http://docs.sencha.com/extjs/6.5.1/classic/Ext.form.field.Text.html#cfg-triggers , It really doesn't explain anything, just a bunch of code. Also on the next line in the Register.js file, on line 50, it has a 'glyphed' config inside triggers. Again, I cannot find out in the docs what it is used for. Sure the idea is clear, that it is used for a textbox trigger, but I need to be sure I know what is happening.
My next question is probably connected with the previous one. If you look at the example page: http://examples.sencha.com/extjs/6.5.0/examples/admin-dashboard/?classic#register, you see that all text boxes have an icon saying what the field is for: Email field has an email icon. How did that come? I'm pretty sure it had to do with the triggers config in my previous question. According to the documentation https://docs.sencha.com/extjs/6.0.2/guides/core_concepts/font_ext.html, I should use a 'iconCls' config, but here that is not used.
Please someone explain this. Is it reasonable to have these questions? Or should I have been able to figure them out? I am new to ExtJS and have just started learning it from 2 weeks.
1/2) Seems they are unused classes. I'll open a ticket to remove them.
3) The triggers are button like things that can be appended to the field. As it says in the docs, they are a set of configurations for Ext.form.trigger.Trigger, the options for those can be found here: http://docs.sencha.com/extjs/6.5.1/classic/Ext.form.trigger.Trigger.html
glyphed is not a config, but rather a "label" for that trigger in the field.
4) That is some custom css, applied by the classes used in the trigger.
.password-trigger,
.auth-email-trigger,
.auth-password-trigger,
.auth-envelope-trigger {
&:before{
top: 10px;
left: -18px;
position: relative;
color: $dialog-trigger-color;
font-size: 30px;
}
&.password-trigger:before,
&.auth-password-trigger:before {
content: "\f023";
}
&.auth-email-trigger:before {
content: "\f007";
}
&.auth-envelope-trigger:before {
content: "\f0e0";
}
}
I am creating a SCSS for a component, and looking at ExtJS SCSS I find in Base.scss that a lot of variables (if not all) are defined as:
$form-field-empty-color: dynamic(gray);
$form-field-border-color: dynamic($neutral-color);
$form-field-border-width: dynamic(1px);
$form-field-border-style: dynamic(solid);
...
What is that dynamic function? My fu skill in search seems not to be the at the needed level :C
Thanks!
Ext uses Fashion, which is an extension of SASS. See: https://docs.sencha.com/cmd/guides/fashion.html
It's somewhat similar to !default in SASS, but it defers computation until all variables are known.