I want to customise the layout of drop-down of React select library more than given in the documentation
we can do the customization in two ways.
1) applying **inline style** as given below:
render(){const optionStyle={width: 100px};return(<div style={optionStyle}><select><option value="a">A</option><option value="b">B</option></select></div>
);};
2) another way is applying **stylesheet** as follows:
import React from 'react';import './style.css';class OptionComponent extends React.Component{render()return<div className="row"><select><option>A</option><option>B</option></select></div>);};}
className = "row" is the css class "row".
Related
Is there a way of using a dataset query inside of a custom element. On the support page (https://support.wix.com/en/article/custom-element-faqs) its says the following:
'Can I Connect Custom Elements to Data in a Collection?
Yes, you can connect custom elements to collections using Corvid's Data and Dataset APIs.'
But I don't know how to do it. I have have tried importing wixData from wix-data at the top of my custom element however this stops my custom element from displaying.
I need to create checkboxes based on the number of items in a dataset. I have been able to create the checkboxes based on a static array in the custom element but want to do it based on the dataset so I don't have to manually keep changing the array in the custom element.
Below is what I need in my custom element.
import wixData from 'wix-data';
wixData.query('testdata')
.limit(1000)
.find()
.then(results => {
console.log(results.items)
});
You need to pass the Number of checkbox via attribute. Doc link
$w('#customElementId').setAttribute('checkboxs-count', 5 );
Then on the custom element you need to listen for the attribute change.
And update the UI based on that.
Here is a pseudo code
wixData module only exist on the Wix codebase.
You need to import the data from the database using wixDatae and pass the data to custom element via setAttribute. like this
// page code
import wixData from 'wix-data';
wixData.query('testdata')
.limit(1000)
.find()
.then(results => {
// got the data from the database now pass the data to custom element using setAttribute method
$w('#customElementId').setAttribute('checkboxs-count', results.length );
});
And You need to write the custom element code to create the checkboxes and you can listen if the checkbox change and update the database via .on() method on the custom element selector.
so, the page code should look like this.
$w('#customElementId').on('checkbox-change', (event) => {
console.log(`Checkbox Number ${event.detail.number} changed. Update Wix Database` );
});
Hope this explain how to communicate database with custom element.
I like to have all the media queries at one place, usually in the App.css file because when I want to change something depending on the size I see all the components involved at once.
I am looking for a nice way to do so with styled components. There styles are usually attached to the file where the styled components are defined. I don't want to use wrappers to refer to them with className.
Does someone has a good way to handle this?
After a discussion following solution came up:
const reducer = (accumulated, [condition, css]) =>
accumulated +
`
#media(${condition}) {
${css[componentName]}
}
`
const addMedia = componentName => Object.entries(theme.media).reduce(reducer, "")
Now you have all the media queries at one place and you need just to add them within the styled component via:
${addMedia("componenName")}
I'm currently playing around with deck.gl.
Taking the UK accident example (3d-heatmap). How can I change the language used to display the POI in mapboxGL?
Where should I put the mapboxGL equivalent of:
map.setLayoutProperty('country-label-lg', 'text-field', '{name_fr}');
This is mostly related to the usage of react-map-gl rather than deck.gl, given that's what the example is using.
You can grab the mapbox map instance using the getMap() method of the < MapGL> component, and call the method to change the layout property:
<MapGL ... ref='map' />
const map = this.refs.map.getMap()
map.setLayoutProperty('country-label-lg', 'text-field', '{name_fr}')
I have used https://github.com/vuejs-templates/webpack to set up a simple Vue site. This template comes with one single file component (App.vue). I am trying to figure out how would I build a site with multiple single file components?
For example, let's say I have a webpage that has four single file components on it: a table component that can sort and paginate the table data, a filter component that filters the table data, a button component that has a number of buttons like new/edit/delete, and a header component that has a drop down with options that when selected swap out the available filters and the data in the table.
I assume I would create four .vue pages (Table.vue, Filter.vue, Button.vue, and Header.vue) but I'm not really certain how to include them all on the same page. I assume I would use App.vue as the container for the other four single file components, but I'm not sure how to include the other four .vue pages into the App single file component. Should there be references to them in main.js?
Import them into whichever parent component definition you are using them in and register them in the components property of the parent component:
import MyTable from 'path/to/Table'
import MyFilter from 'path/to/Filter'
import MyButton from 'path/to/Button'
import MyHeader from 'path/to/Header'
export default {
components: { MyTable, MyFilter, MyButton, MyHeader },
}
Then, you can use their tags in the parent component's template:
<my-table></my-table>
<my-filter></my-filter>
<my-button></my-button>
<my-header></my-header>
Alternatively, you could register them globally in main.js:
import Table from 'path/to/Table'
Vue.component('my-table', Table);
This way you could use the <my-table> tag in any component without having to register it to that component.
In react-native for components such as ToolbarAndroid, Switch, ProcessBar, ToastAndroid, ListView, etc. the following is required and I have not been able to find an explanation why this is necessary:
var UIExplorerBlock = require('./UIExplorerBlock');
var UIExplorerPage = require('./UIExplorerPage');
and respectively
<UIExplorerPage>
<UIExplorerBlock>
..
</UIExplorerBlock>
</UIExplorerPage>
Those components are part of the UI Explorer sample application. They are using them to keep the sample code DRY.
You should not be using the UIExplorer* components in your own code.