on click change Document card color SPFX
https://sharepoint.stackexchange.com/questions/269988
-
08-02-2021 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
I have developed a webpart where on hover i am changing the color of document card office fabric component and on click of document card i am showing grid ,but i am not able to change color of document card if i click ,it only changing in hover
below is my code
const cardStyles: IDocumentCardStyles = {
root: [
{
display: 'inline-block', marginRight: 20, borderRadius: 25, marginBottom: 20,width: 90,
backgroundColor:"#fbce07", outline:'none',borderStyle:'none',border:0,borderColor:'white',textAlign: "center" ,color:"white",
selectors: {
':hover': {
backgroundColor:'#ff9933' ,outline:'none',borderColor:'white',borderRadius: 25
},
':after': {
color: 'transparent',
content: '',
display: 'block',
height: '1px',
overflow: 'hidden',
visibility: 'hidden'
},
':before': {
color: 'transparent',
content: '',
display: 'block',
height: '1px',
overflow: 'hidden',
visibility: 'hidden'
},
}
}
]
};
const cardStyles1: IDocumentCardStyles = {
root: [
{
display: 'inline', marginRight: 20, borderRadius: 25, marginBottom: 20,width: 90,
backgroundColor:"#fbce07", outline:'none',borderWidth:0,borderStyle:'none',border:0,borderColor:'white',textAlign: "center" ,color:"white",
selectors: {
':hover': {
backgroundColor:'#ff9933' ,outline:'none',borderColor:'white',borderRadius: 25
},
':after': {
color: 'transparent',
content: '',
display: 'block',
height: '1px',
overflow: 'hidden',
visibility: 'hidden'
},
':before': {
color: 'transparent',
content: '',
display: 'block',
height: '1px',
overflow: 'hidden',
visibility: 'hidden'
},
}
}
]
};
ShowGrid(a)
{
var reactHandler = this;
if (usertype=='Yes')
{
jquery.ajax({
url: `${reactHandler.props.siteurl}/_api/web/lists/getbytitle('Templates')/items?$select=Title,CurrentReportLink,HistoricalReportLink,DataGroupTemplate/Template&$expand=DataGroupTemplate&$filter=DataGroupTemplate/Template eq'${a}'`,
type: "GET",
headers:{'Accept': 'application/json; odata=verbose;'},
success: function(resultData) {
reactHandler.setState({
items2: resultData.d.results
});
},
error : function(jqXHR, textStatus, errorThrown) {
}
});
}
else
{
jquery.ajax({
url: `${reactHandler.props.siteurl}/_api/web/lists/getbytitle('Templates')/items?$select=Title,CurrentNonReportLink,HistoricalNonReportLink,DataGroupTemplate/Template&$expand=DataGroupTemplate&$filter=DataGroupTemplate/Template eq'${a}'`,
type: "GET",
headers:{'Accept': 'application/json; odata=verbose;'},
success: function(resultData) {
reactHandler.setState({
items3: resultData.d.results
});
},
error : function(jqXHR, textStatus, errorThrown) {
}
});
}
}
public render(): React.ReactElement<IReactGetitemsProps> {
return (
{this.state.items.map((items,key)=>
{
return(
<DocumentCard styles={cardStyles} onClick={() =>this.ShowGrid(items.Template)}>
<DocumentCardTitle title={items.Template} />
<DocumentCardImage styles={cardStyles1} height={100}imageFit={ImageFit.cover} imageSrc={items.ImageLink ? items.ImageLink["Url"] : ''} />
</DocumentCard>
);
);
解決
I solved this issue using below code:
toggle(b)
{
if (this.state.description === b) {
this.setState({ description: null })
} else {
this.setState({ description: b })
}
}
myColor(b)
{
if (this.state.description === b) {
return "#ff9933";
}
return "";
}
Reference: Change color of selected element - React.
所属していません sharepoint.stackexchange
