Document card hover colour change
-
08-02-2021 - |
Pergunta
Hi I have used office fabric ui document card i want to change colour on hover of document card ,
const cardStyles: IDocumentCardStyles = {
root: [
{
display: 'inline-block', marginRight: 20, borderRadius: 25, marginBottom: 20,width: 200,
backgroundColor:"#fbce07", outline:'none',borderWidth:0,borderStyle:'none',border:0,borderColor:'none',textAlign: "center" ,color:"white",
selectors: {
':hover': {
backgroundColor:'brown'
},
}
}
]
};
const Documentcardstyle = {
root: [
{
textAlign: "center" , borderRadius: 25,outline:'none',borderColor:'none',
}
]
};
return(
<DocumentCard styles={cardStyles} onClick={() =>this.ShowGrid(items.GPDTemplate)}>
<DocumentCardTitle styles={Documentcardstyle} title={items.GPDTemplate} />
<DocumentCardImage styles={Documentcardstyle} height={100}imageFit={ImageFit.cover} imageSrc={items.GPDImageLink ? items.GPDImageLink["Url"] : ''} />
<DocumentCardDetails>
</DocumentCardDetails>
</DocumentCard>
);
Solução
You can create a CSS class in your WebPartName.module.scss
file in your web-part project like:
/* Default background color for Document Card */
.documentCardStyle {
background-color: green !important;
}
/* Background color for Document Card on Hover */
.documentCardStyle:hover {
background-color: yellow !important;
}
Then use this class in your code file like:
<DocumentCard className={styles.documentCardStyle} onClick={() =>this.ShowGrid(items.Template)}>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a sharepoint.stackexchange