I'd like to do something like Angular does with ng-class. I'm using react-tabs library (https://github.com/mzabriskie/react-tabs) and now I want to be able to change the background of the selected tab.
The library comes with a default effect for the selected tab but I want personalize it.
if you're using an es6 transpiler you can use template strings and a ternary:
className={`base-class ${this.props.isActive? 'is-active' : ''}`}
This works:
<div className={this.props.canChange ? "change-button" : "change-button gray-out"}>
blah
</div>
Basically classname is a property of the node.
Just wrap your <Tabs> element with an element of your own <div className="my-tabs"> and go from there! You can use the aria-selected to style the selected state.
Other option is using ternary with Array join, check:
<my-element
className={[
'default-class',
isClass1 ? 'class-1' : '',
isClass2 ? 'class-2' : '',
isClassN ? 'class-n' : ''
].join(' ')}
/>
In this way you can avoid concating strings and manage multiple classes at the same time :)
Related
I'm working on creating Google amp-page in a React project, and need to fetch JSON after a click.
A/C to amp.dev, i can use amp-state to fetch remote data
as
<amp-state id="shirts" [src]="'/shirts/sizesAndPrices?sku=' + selected.sku" />
How can i do the same in JSX, as writing [src] in such format leads to error
Any suggestion will be helpful.
Thanks in advance
You can replace [src] with data-amp-bind-src. The latter syntax has been introduced for JSX syntax compatibility.
I don't know this is the right way, but I think, this can be a turn around
If there is a better way, or if this is not recommended in any way, please comment
I needed to toggle visibility of option based on the selected option
<amp-selector
layout="container"
class="radio-selector"
on="select: AMP.setState({
selectedOption: event.targetOption,
})">
<div option="a_show">Option A</div>
<div option="b_show">Option B</div>
<div option="c_show">Option C</div>
</amp-selector>
<div className="options"
dangerouslySetInnerHTML={{
__html: `
<p [class]="selectedOption == 'a_show' ? 'show' : 'hide'" class="show">a</p>
<p [class]="selectedOption == 'b_show' ? 'show' : 'hide'" class="hide">b</p>
<p [class]="selectedOption == 'c_show' ? 'show' : 'hide'" class="hide">c</p>
`
}}
/>
I am using a set if images in a row. There is a text box input above these images and based on the input i need to enable/disable images?
How to do this in React.
I tried adding "disable" to image tag and disabled=true but both didn't work.
const IBox = props =>
<div style={props.styles.imageContainer} >
<img id="image1" src={require('../../../public/images/image1.jpg')} alt = "Image1" /><span > </span>
<img id="image2" src={require('../../../public/images/image2.jpg')} alt ="Image2" /><span> </span>
<img id="image3" src={require('../../../public/images/image3.jpg')} alt ="Image3" /><span> </span>
<img id="image4" src={require('../../../public/images/image4.jpg')} alt ="Image4"/>
</div>
export default IBox;
There is no such thing as "disabling" images. You can only disable form elements, as they are the only interactive html elements. See w3c specification to see which items can be disabled exactly.
That is unless you write your own custom definition for disabling images. For example, you could add a class disabled to the image, and style that class to be greyed out, using CSS.
You could also combine CSS with WebComponents to have an element that with a disabled attribute. You could style its disabled style.
See also docs for the <img /> tag.
If you mean hide/show.. you simply may use state to disable your image i.e.
{this.state.img1 && <img id="image1" src={require('../../../public/images/image1.jpg')} alt = "Image1" />}
if by disable you mean to make it like grey, low opacity,etc... you may use an state :
style= this.state.disable? {{style_disable}}: {{style_enable}}
Use <input /> instead of <img /> as in this example.
You can provide the same functionality with the type="image" attribute. This way you can use the disabled attribute.
<input
type="image"
disabled={disabled}
/>
<div id="parent" ng-class="{testClass:???}">
<span id="child" class="test"/>
</div>
On this example, how would I do it so that if element child would have a class test, the parent element would dynamically have the class testClass?
You can create a scope variable to validate whether those 2 elements should be visible or not.
The inner span too should be getting set dynamically according to your description. So you can use ng-class for that too.
So the code can be like this :
<div id="parent" ng-class="{testClass : isValid}">
<span id="child" ng-class="{test : isValid}"/>
</div>
You can add the ternary condition within the ng-class like
var var-test = 'hi'=='bye'
ng-class=" var-test ? 'class-if-true' : 'class-if-false'">
and put in your css file the classes
.class-if-true{color=black}
.class-if-false{color=white}
I have following directive like "pulsate" with restrict option class. I need to write condition like as below.
<div class="{pulsate : $index === 2}">
I tried this but its not working fine. So please help any one.
You need to use ng-class directive in order to achieve the solution.
<div ng-class="{pulsate : $index === 2}">
Use single commas around your class name like so:
<div ng-class="{'pulsate' : $index === 2}">
I want multiple css changes need to be done while clicking button
for ex: ng-click="myStyle={'background-color':'black'}; myStyle={color:'blue'}"
I think you have to do similar.
<span ng-click="elemStyle={'background-color': '#000', 'color': blue}"
ng-style="elemStyle">some text</span>
It is more advisable (for your own sake) to assign different classes to the element depending on the needs rather than just plain CSS.
Please see AngularJS ng-class directive for that functionality.
In this example element will toggle between having foo and bar class when clicked:
<div
data-ng-click="toggleClass = !toggleClass"
data-ng-class="{foo: toggleClass, bar: !toggleClass}">
</div>
http://jsfiddle.net/hpeinar/oLak27xx/