Hello i want to put a style opacity:0.3 on img
<ion-content [style]="getBackgroundImg()">
getBackgroundImg() {
const img = this.mediaDetails.image_path;
const style = `background-image: url(${img}); `;
return this.sanitizer.bypassSecurityTrustStyle(style);
}
Note: i want put opacity only on const img not on the whole ion-content. It doesnt take the opacity in the object
You can add the opacity property in a style e.g.
const style = `background-image: url(${img}); opacity:0.3 `;
Related
I built an editor using draftjs. When I click image control, a dialog pops up. The dialog allows the user to enter source, target, and also different styles of the image like padding, border, etc.
I can see the image with the border and padding in the editor when I upload the image. But then I click toHtml control and then fromHTML and the styles are lost. I am using draft-js-export-html/draft-js-import-html for this.
This is Image.js
const Image = ({ contentState, entityKey, block }) => {
const eKey = entityKey || block.getEntityAt(0);
const entity = contentState.getEntity(eKey);
const { alt, height, src, width, horizontalPadding, verticalPadding, border } = entity.getData();
const imageStyle = {
padding: `(${verticalPadding} || 0)px (${horizontalPadding} || 0)px`,
border: `${border}px solid red`
};
return <img alt={alt} height={height} src={src} style={imageStyle} width={width} />;
};
How do we store these styles for the image so that they are not lost when we toggle between toHtml and fromHTMl?
I am using const in my material-UI theme in order to define colors
for example
const tableHeader=grey[400]
in order to use semantic constant names I want to create several constants and give them the same color
for example somthing like
const tableHeader, borderDefault = grey[400]
is there any such way
(the eaxmple above don't work)
apart from Maryja Piaredryj answer, there's another way. Store these colors in the material-UI theme, and then use this using makeStyles or useTheme.
const theme = createMuiTheme({
custom: {
palette: {
borders: grey[400]
}
}
});
Now use this in makeStyles as a regular theme property
const useStyles = makeStyles((theme) => ({
borderStyle:{
borderColor:theme.custom.palette.borders;
}
}));
Unfortunately, you should assign value to every variable separately.
But you can think of choosing another data structure to store color variables, smth like
const THEME = {
borders: grey[400]
}
const tableHeader = THEME.borders;
const borderDefault = THEME.borders;
I have a problem accessing this anchor in a div.
<div class="contractor">
<a title="Andrew" href="/humans/">Andrew</a>
</div>
How do you complete this beginning? I need the title, the href and the Text inside.
var contr = document.getElementsByClassName('contractor');
console.log(contr);
I need plain JavaScript, no jQuery
To get the data you need from the anchor, you can do the following by using query selector:
const anchor = document.querySelector(".contractor a");
const title = anchor.getAttribute("title");
const href = anchor.getAttribute("href");
const text = anchor.text;
You can use the ParentNode API. If you're confident that the contractor div will only have an HTMLAnchorElement child, you could do the following:
const contractors = document.getElementsByClassName(`contractor`);
const contractor = constractors[0];
const anchor = contractor.firstElementChild;
const title = anchor.title;
const href = anchor.href;
If there might be more than one child element under each contractor div, then you would instead use the ParentNode.children property instead of firstElementChild.
I want to add an icon as below in the mapboxgl view. Working with Angular2
When I click the icon it should automatically switch the styles (streets-v9, satelllite-v9)
I am following the link mapboxgl example
Did you see this API method?
https://www.mapbox.com/mapbox-gl-js/api/#map#setstyle
With that you can set a new style for the map when you e.g. click an icon or press a button or what ever you wish.
Take this as a reference to build upon:
https://jsfiddle.net/andi_lo/706pot8L/
mapboxgl.accessToken = 'pk.eyJ1IjoiZmFyYWRheTIiLCJhIjoiTUVHbDl5OCJ9.buFaqIdaIM3iXr1BOYKpsQ';
let map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-1.77, 52.73],
zoom: 3,
});
let icon = document.getElementById('icon');
icon.addEventListener('click', function(e) {
map.setStyle('mapbox://styles/mapbox/light-v9');
}, false)
#icon {
position: absolute;
top: 15px;
left: 15px;
color: black;
}
#map {
height: 500px;
}
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css" rel="stylesheet"/>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js"></script>
<div id="map"></div>
<button id="icon">
Switch layers
</button>
What you want is a "control" that switches layers. Mapbox-GL-JS doesn't include such a thing, nor is there one listed as a plugin (yet).
You should use Mapbox-GL-JS's iControl class to create the control, then add styling and behaviour following Mapbox's instructions:
function LayerSwitchControl() { }
LayerSwitchControl.prototype.onAdd = function(map) {
this._map = map;
this._container = document.createElement('div');
this._container.className = 'mapboxgl-ctrl';
// change this next line to include a layer-switching icon
this._container.textContent = 'Hello, world';
return this._container;
};
LayerSwitchControl.prototype.onRemove = function () {
this._container.parentNode.removeChild(this._container);
this._map = undefined;
};
You'll then need to add code to:
Add the control
Respond to click events as appropriate.
This is my working code,
This is zoom level control
I have a div
<div class="blue>;
The class blue is:
.blue {
background-color: blue;
}
Now I know I can set the background color of the div in the console using:
$0.style.backgroundColor = "#ffcc00"
But what if I want to get the value of the background color for that element using the console?
It's possible you may want computed style:
var style = getComputedStyle(document.body, null); // Gets the style for a passed element and optional pseudo selecter (eg. :hover)
console.log(style.backgroundColor);
It's important to note that computed style is the rendered result. If you have multiple rules for the same element, this will only display the ones that have been applied.
You can do :
var blue = document.getElementsByClassName('blue')[0];
blue.style.getPropertyCSSValue('background-color');
or you do:
blue.style.getPropertyValue('background-color');