I'd like to have a hide and show shorthand to write things like this:
hide = 'display: none !important'
show = 'display: block !important'
.my-button
{show}
+mobile()
{hide}
There's something like this available in the current Stylus syntax?
You can use #block for this. See an example.
Related
We've been using pointerEvents: 'box-none' for a particular View where we want the things behind it to be clickable. From the React docs: https://reactnative.dev/docs/view
'box-none': The View is never the target of touch events but its subviews can be. It behaves like if the view had the following classes in CSS:
.box-none {
pointer-events: none;
}
.box-none * {
pointer-events: auto;
}
But we just updated to React 18, and now that view seems to be snagging all of the pointer events instead of letting them pass through to the background.
Any ideas what might be going wrong? Any fix suggestions?
From React docs in the yellow box:
https://reactnative.dev/docs/view#pointerevents
"Since pointerEvents does not affect layout/appearance, and we are already deviating from the spec by adding additional modes, we opt to not include pointerEvents on style. On some platforms, we would need to implement it as a className anyways. Using style or not is an implementation detail of the platform."
so you need to put it as direct prop on the ViewElement like this:
<View pointerEvents="box-none"></View>
instead of:
<View style={{pointerEvents: 'box-none'}}></View>
I have looked at different solutions on SO, but nothing has worked so far, and I couldn't find anything in the documentation. I have done things like:
in my Icon context provider:
style:{transform: [{ rotate: '90deg' }]}
as well as inserting the style directly into the icon tag like:
<BiCard style = {{transform: [{ rotate: '90deg' }]}}>
But none of this seems to be working. I have tried rotateX and rotateY as well. Is there some newer way to do this?
you should pass a string to your transform property not an array.
If you pass as below it should work as expected:
<BiCard style = {{transform: 'rotate(90deg)' }} />
Is there a way to define a custom header template for a dynamic dialog?
For the normal dialog you have the possibility to define the p-header tag, with your custom html code.
But I don't find any way to do this for a dynamic dialog.
There is no official way mentioned in PrimeNG documents to add custom template to DynamicDialog header. When we open a DynamicDialog, we only attach a body of Dialogbox and not header/footer.
You can add dynamic title to DynamicDialog while opening it. Hope this will help.
const ref = this.dialogService.open(DialogComponent, {
data: this.data,
header: this.title,
width: '60%'
});
You can modify css of DynamicDialog header like:
::ng-deep .p-dialog .p-dialog-header {
border-bottom: 1px solid #000;
}
Important Note:
You can use simple Dialog in PrimeNG where you can create custom headers,body & Footers. It will work same like DynamicDialog. Do mention modal=true like below:
<p-dialog [(visible)]="display" [modal]="true">
<p-header>
Header content here
</p-header>
Content
<p-footer>
//buttons
</p-footer>
The answer is a little bit late. But maybe someone else is also searching for a workaround. Afaik it is still not possible since this issue on GitHub is still open.
However in documentation to DynamicDialog there is mentioned, that you can not show the header with the parameter showHeader. This means you could easily just hide the default header and in the component for your dialog design your own header.
How I can fix it ?
'&:focus':{
'&:hover':{
borderColor: colors.electro
},
`&~${ classes.error }`:{
display: 'none'
},
}
How would I do the equivalent of classes.error?
You simply use $classname since there is no classes object in JSS.
Make sure you have jss-nested. You can find documentation there.
Replace the last section of your code with this:
'& $error':{
display: 'none'
},
This is assuming you have another classin your JSS that is called error. It will use the generated name. This allows you to apply classes like so: {classNames(classes.whatever, classes.error)}
If you do not have another class called error in your JSS, then you can remove the dollar symbol. This will mean that when you apply classes to your element, you can use {classNames(classes.whatever, 'error')}
Note, I am using classNames, but you could use string concat.
this is a very easy question, but I can not decide what is the cleanest nor actually to get it to work. I have this JSX-part in a reactJS class, and would like to set position dynamically through a prop-value. Which tag attribute should I add to the following code snippet? I have seen examples with style and tried setting left and right etc without any success.
Any help is appreciated.
<img onClick={this.handleKeyPress} src="/image/1" alt="HTML5" width="200" height="200" />
JSX is a prepocessor syntax that will essentially create a bunch of React.createElement function calls with the right elements/components passed in to the different calls. So instead of doing React.createElement('div', props, children) for every container/component/piece of markup you want to create. The upside is that you can return component markup that's easy to read and understand but feels more familiar and easy to write than a ton of nested function calls.
There are a few key differences between regular HTML and JSX, though. Most of them stem from the clashes w/ JavaScript reserved words:
some attributes are camelCased and named slightly differently, like htmlFor (as opposed to for)
style gets passed in to the style property as an object via an outer JSX expression {{}}
most css names are different if they use a hyphen, but most just get camelCased. So: marginLeft, paddingRight, and so on
you can pass in style props just like you'd pass other props; they just go right into the style object you create for the component/element.
custom attributes (created with a hyphen) won't get rendered except for those that follow the aria spec (aria-, etc.)
So, taking that into consideration, your image component might look something like this:
<img onClick={this.handleKeyPress}
src="/image/1"
alt="HTML5"
style={{width: 200, height: 200, position: 'absolute', top: this.props.top, left: this.props.left}}/>
See also:
https://facebook.github.io/react/docs/dom-differences.html
https://facebook.github.io/react/docs/jsx-gotchas.html
Make sure you use the double curly braces on style or use a class:
<img onClick={this.handleKeyPress} src="/image/1" alt="HTML5" style={{width:"200", height:"200"}} />
<img onClick={this.handleKeyPress} src="/image/1" alt="HTML5" className="foo" />
In JSX ES6 an image needs to be imported before using it in component, or use src tag with require followed by image path within round braces all within curly braces.
you can set image property by using style tag followed by double curly braces. Don't need to give double or single inverted commas.
your image component might look something like this:
<img onClick={this.handleKeyPress} src={require("/image/1")} style={{ width: 200, height: 200 }} />
You can also use props or state value to define image properties in between style tag. Don't forgot to set state value before using this. You can set state values directly through props or through function.
This looks something like this (using through state values):
<img onClick={this.handleKeyPress} src={require("/image/1")} style={{ width: this.state.width, height: this.state.height }} />
OR
looks something like this (directly through props):
<img onClick={this.handleKeyPress} src={require("/image/1")} style={{ width: this.props.width, height: this.props.height }} />