I am trying to use svelte-chartjs with chartjs-plugin-zoom. In order to programmatically adjust zoom. In order to do this you have to bind onto the element. This can be illustrated in the React-ChartJS-2 - see buttons below.
Is there a prop in svelte-chartjs to make that binding?
Something like:
<Line chartRef={myrefvar} {options} />
Use bind:property (tutorial) to get the chart reference ยป REPL
<script>
...
let chartRef
const onZoomPluse = () => {
chartRef.zoom(1.1);
};
</script>
<Line bind:chart={chartRef} options={options} data={data} />
<button on:click={onZoomPluse}>zoom +10%</button>
Related
create product stack navigation having two screen product and check out
const ProductStack = createStackNavigator();
function ProductStackNavigation() {
return (
<ProductStack.Navigator initialRouteName="Product">
<ProductStack.Screen
name="Product"
options={{
headerTitle: "Product",
headerShown: true,
}}
component={Product} />
<ProductStack.Screen
name="CheckOut"
options={{
headerTitle: "CheckOut",
headerShown: true,
}}
component={CheckOut} />
</ProductStack.Navigator>
)
}
---
**create other favourite stack navigation having one screen favourite**
const FavouriteStack = createStackNavigator();
function FavouriteStackNavigation() {
return (
<FavouriteStack.Navigator initialRouteName="Favourite">
<FavouriteStack.Screen
name="Favourite"
options={{
headerTitle: "Favourite",
headerShown: true,
}}
component={Favourite} />
</FavouriteStack.Navigator>
)
}
create tab navigation conatain two stack first contain product stack and second contain favourite stack navigate from favourite screen to product screen
const BottomTab = createBottomTabNavigator();
function TabNavigation() {
return (
<BottomTab.Navigator
tabBarOptions={{
activeTintColor: '#fafafa',
labelStyle: { marginBottom: 10 }
}}
>
<BottomTab.Screen
name="product"
children={() => <ProductStackNavigation />}
options={{
tabBarLabel: 'product',
}}
/>
<BottomTab.Screen
name="Favourite"
children={() => <FavouriteStackNavigation />}
options={{
tabBarLabel: 'Favourite',
}}
/>
</BottomTab.Navigator>
)
}
how to navigate favourite screen to checkout screen inside favourite tab
You actually dont need to create "FavouriteStack". You can simply place the component Favourite in the BottomStack.Screen like this:
<BottomTab.Screen
name="Favourite"
component={Favourite}
options={{
tabBarLabel: 'Favourite',
}}
/>
And regarding navigation from Favourite to Checkout you can use useNavigation hook from "#react-natvigation/native"
const navigation = useNavigation();
and perform navigation using
navigation.navigate("ProductStack", {
screen:"Checkout"
})
Remember you need to have ProductStack as screen as well somewhere so that you can access that stack. You cant navigate to detached stacks from main navigation container. You can only switch the stacks using ternary operator.
isFavourite ? <FavouriteNavigator /> : <Productnavigator />
Semantic UI React Checkbox can be used like this:
import React from 'react'
import { Checkbox } from 'semantic-ui-react'
const TermsOfServiceCheckbox = () => (
<Checkbox label='I accept the Terms of Service' />
)
export default TermsOfServiceCheckbox
How do I set the Checkbox label so that the text Terms of Service is a link to a URL?
label prop implements the item shorthand, so you can also pass there:
<Checkbox label={<label><a href='/'>I accept the Terms of Service</a></label>} />
<Checkbox label={<label>I accept the <a href='/'>Terms of Service</a></label>} />
<Checkbox label={{ children: <a href='/'>I accept the Terms of Service</a> }} />
I am currently Jest to test React component, component's inline style would be changed according to different props value.
this is an example about what I wanna do:
let firstChild = TestUtils.findRenderedDOMComponentWithTag(renderedComponent, 'div');
expect(firstChild.getDOMNode().style).toEqual({
fontSize: '20px'
});
This is the component props:
let renderedComponent = TestUtils.renderIntoDocument(
<CircleIcon
size="small" />
And this is the component dom to test with:
return (
<div className="circle-icon" style={boxStyle}>
<span className={this.props.icon}></span>
</div>
);
If I can get what is inside boxStyle, I can assert the test result from it.
Thanks a lot!
actually it works.
usage:
firstChild.getDOMNode().style.backgroundColor
I've created a component like this:
templates/components/files-dropzone.hbs
<p>Awesome text</p>
<textarea id="drop-textarea" rows="10" cols="50">
{{value}}
</textarea>
components/files-dropzone.js
import Ember from 'ember';
export default Ember.Component.extend({
value: '',
valueChanged: function() {
console.log("yup") // is never triggered
}.observes('value'),
})
I'm using this component like this in another template:
<div class="large-7 columns padding-left-reset"
{{files-dropzone value=body}}
</div>
While the textarea contains the correct value for body when I load the page it doesn't bind it. I'm observing body and it doesn't change when I change the text inside the textarea.
EDIT: The value-attribute in the component itself doesn't change as well
What am I doing wrong?
I don't think that Ember knows that it should bind the {{value}} to the text area.
It should work, using the textarea helper:
{{textarea value=value id="drop-textarea" rows="10" cols="50"}}
Do you want to adapt the behaviour of the text area in some way?
I'm using Ember and Highlight.JS and I want to dynamically edit an XML document and show a syntax highlighted version in a live preview. Currently I have a preview, but the code is not syntax highlighted.
<script type="text/x-handlebars">
<p>Name {{input type="text" value=name}}</p>
Non-Syntax Highlighted output
<pre>
<person>
<name>{{name}}</name>
</person>
</pre>
</script>
<script type="text/x-handlebars" data-template-name="myxmltemplate">
<person>
<name>{{name}}</name>
</person>
</script>
JSBin with this code
To get syntax highlighting, I need to render myxmltemplate above to a string, not directly to the page. This string can be fed into highlightjs to be turned into syntax highlighted HTML. How can I do this?
The problem is that the template gets inserted / rendered after highlight.js has initialized. Therefore you need initialize the highlighting every time the view gets rendered. This can easily be done using the Ember.Views didInsertElement hook.
App.ApplicationView = Ember.View.extend({
didInsertElement: function() {
// From http://highlightjs.org/usage/ see Custom Initialization
this.$('pre').each(function(i, e) {hljs.highlightBlock(e)});
}
});
JSFiddle: http://emberjs.jsbin.com/masomafu/2/edit