I'm trying to right align text inside a react-navigation v3 sidedrawer.
drawerPosition: "right",
drawerWidth: 280,
contentOptions: {
itemsContainerStyle: {
textAlign: "right", // nope
alignItems: "right" // nope
},
itemStyle: {
textAlign: "right". // nope
},
activeTintColor: "#0ca9dd",
labelStyle: {
fontSize: 18,
alignItems: "right" // nope
textAlign: "right" // nope
},
},
What very simple, basic step am I missing?
Related
I am trying to create a multiline footer with pdfmake; what I was able to do until now:
const docDefinition = {
footer: [
{
stack: [
{ text: "Line 1" },
{ text: "Line 2" },
{ text: "Line 3" },
{ text: "Line 4" }
], style: 'footer'
}
],
styles: {
footer: {
fontSize: 6, bold: true, alignment: 'center'
}
}
};
While this creates what I want, the style is not correct. As soon as I increase the font size, the bottom line starts to disappear. If I set the font size to 12, only the first two lines appear in the generated PDF on the server-side.
What change do I need to make here?
You just need to add margin to the page and you can accommodate as many lines as you want. e.g. Enter the code below in pdfmake playground: http://pdfmake.org/playground.html
// playground requires you to assign document definition to a variable called dd
let textFooter = `
A 12.4% discretionary service charge will be added to your bill. All prices are inclusive of VAT. Thank You!\n\n
This is line 2 - 263139\n
Line 3 comes here\n
Go big or go home!!!
`;
var dd = {
header: function(currentPage, pageCount, pageSize) {
return [
{ text: 'simple text\naaa\nbbb\nccc\nddd', alignment: 'center', fontSize: 9 },
]
},
footer: function(currentPage, pageCount, pageSize) {
return [
{ text: textFooter, alignment: 'center', fontSize: 9 },
]
},
// margin: [left, top, right, bottom]
pageMargins: [ 40, 60, 40, 100 ],
content: [
'First paragraph',
'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
]
}
In the code above, I have set margin bottom to 100 which gives us space to include 4 lines.
I am trying to build a custom shape - a diamond that stays centered over the text in its label (bonus if we can make the shape expand as the label changes).
Right now, I am transforming a rectangle by 45 degrees to create the diamond. Problem is this seems to rotate around to top left corner and not the center point.
How can I make JointJS rotate this shape around it's center? Or is there a better way to accomplish this?
Here is a JSFiddle.
http://jsfiddle.net/dfqpbLyn/3/
var baseRhombus = joint.shapes.standard.Rectangle.define('crt.BaseRhombus',
{
attrs: {
label: {
textAnchor: 'middle',
textVerticalAnchor: 'middle',
fontSize: 25,
text: 'Test'
},
body: {
strokeWidth: 1,
stroke: 'green',
fill: 'gray',
//transform-origin: center center,
transform: 'rotate(45, center, center)',
}
}
},
{
markup:
[
{
tagName: 'rect',
selector: 'body'
},
{
tagName: 'text',
selector: 'label'
}
]
},
{
initialize: function (width, height, x, y) {
var newElement = new this({
id: 'g1',
position: {x:x, y:y},
size: {width: width, height: height},
//position: { x: x, y: y },
});
return newElement;
}
}
);
var baseRhombus = joint.shapes.crt.BaseRhombus.initialize(250, 250, 60, 50);
Thanks!
Will
Figured it out. Used
transform: 'rotate(45, 50, 50) on the body of my element, but calculated the transform origin based on the current width and height of the element. The documentation around transform was a bit difficult to find but once I found an example of it in use it became clear.
I want to make my string clickable and add hyperlink to string. so wherever display my string is clickable. any suggestions
The Text component in React Native have a onPress as one of its props. You can use it to handle the clicking action.
<Text onPress={()=>{Linking.openURL('https://google.com')}>My Text</Text>
source: https://facebook.github.io/react-native/docs/text#onpress
You can use the react-native-parsed-text library.
Example:
import ParsedText from 'react-native-parsed-text';
class Example extends React.Component {
static displayName = 'Example';
handleUrlPress(url) {
Linking.openURL(url);
}
render() {
return (
<View style={styles.container}>
<ParsedText
style={styles.text}
parse={
[
{type: 'url', style: styles.url, onPress: this.handleUrlPress},
]
}
childrenProps={{allowFontScaling: false}}
>
My text with URL here
</ParsedText>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
url: {
color: 'red',
textDecorationLine: 'underline',
},
});
Here is a link of the library documentation: https://github.com/taskrabbit/react-native-parsed-text
I use ZingCharts for my dashboard charts and I am stucked on this problem. I made a codepen to show my problem. I got array of strings which represent average respond time for some task in hours and I cant figure out why my chart never show 1st string value of array as you can see on codepen.
Here i also post my angular function for this chart
//bar chart with average task time respond
$scope.avgRespondTaskTime = {
gui: {
contextMenu: {
empty: true,
}
},
type: 'bar',
legend: {
//width: "100%",
layout: "center",
position: "50%",
margin: "0px 0px 0px 0px",
borderColor: "transparent",
backgroundColor: "transparent",
marker: {
borderRadius: 10,
borderColor: "transparent"
}
},
tooltip: {
text: "%v hours"
},
"scale-x": {
"label": {
"text": "Project name",
},
"labels": projectNames
},
"scale-y": {
"label": {
"text": "Average Time",
},
},
series: [
{
text: "Completed in Time",
values: $scope.avg_respondTime,
backgroundColor: "#00a65a"
},
]
};
https://codepen.io/spsrulez/pen/ygEvNg
So I solved my problem with using moment.js using this function
moment.duration("your string represent time").asHours()
which I store into array $scope.avg_respondTime
Hope it helps someone in future.
I have a basic Rect shape like this:
var rectShape = new joint.shapes.basic.Rect({
position: { x: 60, y: 10 },
size: { width: 160, height: 35 },
attrs: {
rect: {
fill: '#F5F5F5'
},
text: {
fill: '#FC8A26',
'font-size': 12,
'font-weight': 'bold',
'font-variant': 'small-caps'
}
}
});
I use clone() to create more rectangles like that one:
var rect1 = rectShape.clone().translate(520, 10).attr('text/text','rect1');
I want to have 2 different words inside the rect, one at the size 12 and the other at the size 8. Any idea on how I can do that?
Thank you!
you need to create a custom shape with new SVG markup containing a text element that contains a <tspan> for each word that you want. You could adapt the markup from the standard Rect element. Give each element a different class name, for example replace the <text/> element in the Rect markup with <text><tspan class="word1"/><tspan class="word2"/></text>. The shape definition would look like this:
joint.shapes.my.twoTextRect = joint.shapes.basic.Generic.extend({
markup: '<g class="rotatable"><g class="scalable"><rect/></g><text><tspan class="word1"></tspan> <tspan class="word2"></tspan></text></g>',
defaults: joint.util.deepSupplement({
type: 'my.twoTextRect',
attrs: {
rect: { fill: 'white', stroke: 'black', 'stroke-width': 1, 'follow-scale': true, width: 160, height: 35 },
text: { ref: 'rect' },
'.word1': { 'font-size': 12 },
'.word2': { 'font-size': 8 }
},
size: { width: 160, height: 35 }
}, joint.shapes.basic.Generic.prototype.defaults)
});
Then to create your shape instance:
var rectShape = new joint.shapes.my.twoTextRect();
To set the text of the <tspan> SVG elements you can use
rectShape.attr('.word1/text', 'word 1');
rectShape.attr('.word2/text', 'word 2');
This results in an element that looks like this:
You can clone the element like this:
var clone = rectShape.clone().translate(520, 10).attr({'.word1': {text: 'clone1'}, '.word2': {text: 'clone2' }});
And this makes a new element: