I have the following hash:
styles = {
fontSize: {
use: true,
values: {
sm: .875rem,
base: 1rem,
lg: 1.125rem,
}
},
fontWeight: {
use: false,
values: {
light: 300,
normal: 400,
bold: 700,
}
}
}
I would like to create a for in loop that processes the values only if use is set to true.
I have this code which will loop through the different style types:
for style in styles
items = styles[style]
for item in items
{item}
for property, value in items[item]
{property} value
What I can't figure out is how to test if use is set to true or false and to then process (or not) the values.
Any ideas on how to do this?
Have you considered using a conditional statement, such as an if <value> statement, inside of the loop?
e.g.
for style in styles
{style}
items = styles[style]
if items.use
for property, value in items.values
{property} value
View demo online here.
Related
I want to add border around the car image on click of the marker. how can i do it?
<gmap-marker
:key="index"
v-for="(m, index) in markers"
:position="{
lat: m.location.latitude,
lng: m.location.longitude,
}"
:icon="markerOptions"
>
</gmap-marker>
</gmap-cluster>
markerOptions: {
url: require('~/assets/images/car.svg'),
scaledSize: { width: 50, height: 50, f: 'px', b: 'px' },
},
You can do this by using 2 types of icons - one with your current car icon then another car icon with border.To do this, here are the steps:
Put your 2 icons(url) inside the data.
data: {
center: {
lat: 10.0,
lng: 10.0
},
icon: 'http://maps.google.com/mapfiles/kml/shapes/donut.png',
newIcon: 'http://maps.google.com/mapfiles/kml/shapes/target.png',
Then you also make a variable for a selected marker flag inside data with value null:
selectedMarker: null
Inside <google-marker/> put a method value in your #click then pass the marker and the key:
#click="markerClicked(m, key)"
Then on the methods, declare the markerClicked then pass the key to the selectedMarker you declared earlier. This will hold the value of the key of the selected marker:
markerClicked: function(marker, key) {
this.selectedMarker = key
},
Inside <google-marker/> put a method value in your :icon. This will handle which icon you will show.
:icon=getIcon(key)
Then on the methods, declare the getIcon passing the key. Then you will check if the selectedMarker is equal to this key. If yes, this means that this is the active marker and you will show a new Icon which has the border and if it is not equal, you will just show the marker without border.
getIcon: function(key) {
if (this.selectedMarker == key) {
return this.newIcon
}else{
return this.icon
}
}
Here's a working code.
Hi am trying to style a div dynamically in VueJs.But facing this problem that the this.currentProgressLevel is not applied to the width property inside the currentStyle object.I am attaching the screenshot of code i am using. The width property is not working when i use ${this.currentProgressLevel *75}px Why it might not be working?When i change the this.currentProgressLevel with 0.33 manually it works but then it will be hardcoded, why the value is not taken from the data variable currentProgressLevel? Below is the code i am using:
In script :
data(){
return{
currentProgressLevel:.33,
currentStyle:{
width: ${this.currentProgressLevel *75}px ,
height:‘6px’,
background:‘green’
}
}}
You should turn currentStyle into computed like this:
computed: {
currentStyle () {
return {
width: `${this.currentProgressLevel *75}px`,
height:‘6px’,
background:‘green’
}
}
}
For reactive data, you should move 'currentStyle' to computed. in this case, you just catch the initial value of 'currentProgressLevel'.
computed:{
currentStyle(){
return {
width: ${this.currentProgressLevel *75}px ,
height:‘6px’,
background:‘green’
}
}
}
I have a situation in which I want to display data in a FluentUI DetailsList, where column names can be very long, while the column content can be very narrow. In such a case, the header will be truncated.
See this codepen.
Is there any way to change this behavior, such that the header text wraps over multiple lines?
While I found this unanswered question from 2 years ago, I couldn't find an answer on the topic on neither Stackoverflow, Github or the offical documentation.
Here are some approaches I tried:
inject a CSS class with word-break: break-all; via the headerClassName field of IColumn
setting isMultiLine on the columns
The DetailsHeader component itself whose rendering I can override with onRenderDetailsHeader does not seem to offer any props for customizing how the text is displayed
Is there even a way to achieve the desired behaviour (wrapping over multiple lines instead of truncating long column headers)?
Most of FluentUI Components uses text-overflow: ellipsis. What you can do is to modify that "rule". Inside DetailsList you have onRenderDetailsHeader method which allows you to change header styles.
const onRenderDetailsHeader = (headerProps, defaultRender) => {
if (!headerProps || !defaultRender) {
//technically these may be undefined...
return null;
}
return defaultRender({
...headerProps,
styles: {
root: {
selectors: {
'.ms-DetailsHeader-cell': {
whiteSpace: 'normal',
textOverflow: 'clip',
lineHeight: 'normal',
},
'.ms-DetailsHeader-cellTitle': {
height: '100%',
alignItems: 'center',
},
},
},
},
})
}
<DetailsList
...
onRenderDetailsHeader={onRenderDetailsHeader}
/>
Codepen working solution
Note:
Play around with minWidth, maxWidth props inside this._columns to get expected behavior.
I'm trying to migrate my application which currently uses react-bootstrap-table to react-bootstrap-table-next but I'm having a problem.
What I am trying to do:
is to get the object of the selected line.
My code
const selectRow = {
mode: 'radio',
hideSelectColumn: true,
clickToSelect: true,
bgColor: 'red',
onSelect: (row) => {
console.log(row)
}
};
<div className="col-lg-12">
<BootstrapTable keyField='id' data={ products } columns={ columns } selectRow={ selectRow } />
</div>
result obtained
When I click on the line, it assigns the color red and prints the object to the selected line
but when I try to put the object in the state:
const selectRow = {
mode: 'radio',
hideSelectColumn: true,
clickToSelect: true,
bgColor: 'red',
onSelect: (row) => {
console.log(row)
this.setState({banco: row});
}
};
The selected line object is assigned to {banco} property as expected, but the line does not turn red.
I think you need to check this. As the above link mention, right now there's only one workaround is when you need to call setState in selectRow.onSelect, please also manage the selection by yourself via selectRow.selected I'm the creator of react-bootstrap-table and we will improve this issue in the future. Please follow above link to have a workaround, thanks
I'm using the Dgrid Selection grid for a grid that uses check boxes for selecting the content. However, only child node of the tree should show the checkbox as the parents are just categories and can't be selected. Previously I used the editor plugin for this, but it created difficulty with clearing selections (specifically, the "clearSelection" method of the grid did nothing). I switched to the selector plugin, so now selecting and deselecting rows works fine, but now I can't seem to figure out a way to hide the check box on some rows and not others.
Original code
var columns = [
editor({
label: " ",
field: "itemSelected",
sortable: false,
width: 33,
canEdit: function(object) {
// only add checkboxes for child objects
return object.type === "child";
}
}, "checkbox"),
tree({
label: "Item",
field: "shortItemId",
width: 150,
shouldExpand: function() {
return 1;
}
}),
{
label: "Grouping Name",
field: "groupingName"
}
];
var itemGrid = new SelectionGrid({
store: itemStore,
style: {
width: '99%',
height: '99%'
},
columns: columns,
sort: [{attribute: "shortItemId", descending: false}]
});
I used the "editOn" parameter of the editor to hide the check box, but the selector plugin only has the "disabled" parameter, which doesn't hide the field at all.
Is there a way I can get the check box hidden using the selector like I did with the editor?
Looking at the dgrid/selector source, it seems that the input is always created and added to the DOM, regardless of whether it has been disabled. Presumably this is to allow it to be flexible enough to enable and disable checkboxes on the fly without the need to constantly re-create DOM nodes. While it is not possible to prevent these nodes from being rendered, it is possible to hide them with CSS, since the cell node is given a class with the format field-{fieldName} (or in this particular case, field-itemSelected):
// JavaScript
var columns = [
selector({
label: " ",
field: "itemSelected",
sortable: false,
width: 33,
// Disable any checkbox that is not of type "child"
disabled: function (item) {
return item.type !== 'child';
}
}),
...
];
/* CSS */
.field-itemSelected input[disabled] {
display: none;
}