Dokumenten Vorschau mit Hover-Effekt für SharePoint Dokumentenbibliothek
Spaltenformatierung einer Textspalte: Die Spalte zeigt ein Auge-Icon an. Bei Mouseover (Hover) wird eine Dokumentenvorschau eingeblendet Column Formating einer Textspalte. Die Spalte zeigt ein "Auge" Icon. Bei Mouse over (Hover) blendet sich eine Dokumentenvorschau ein.
Voraussetzung: Textspalte: "Vorschau"
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",
"style": {
"text-align": "left",
"border-radius": "10px",
"padding": "10px",
"box-sizing": "border-box",
"overflow": "hidden",
"background-color": "transparent"
},
"children": [
{
"elmType": "span",
"attributes": {
"iconName": "View"
},
"style": {
"font-size": "12px",
"cursor": "pointer"
},
"customCardProps": {
"openOnEvent": "hover",
"isBeakVisible": true,
"formatter": {
"elmType": "div",
"style": {
"background-color": "transparent",
"padding": "10px",
"border-radius": "10px"
},
"children": [
{
"elmType": "img",
"attributes": {
"src": "@thumbnail.600"
},
"style": {
"max-height": "100%",
"max-width": "100%",
"display": "block",
"margin": "0 auto",
"box-shadow": "0 4px 8px rgba(0, 0, 0, 0.3)",
"border-radius": "6px"
}
}
]
}
}
}
]
}
Kommentare