JSON 열 형식 지정 호버 스타일

Aug 21 2020

사용자가 문서를 직접 열지 않고 항상 다운로드 할 수 있도록 문서 라이브러리의 제목 열에 대한 사용자 지정 서식을 만들고 있습니다.

잘 나오고 있지만 하나의 스타일링 세부 사항을 파악할 수 없습니다. 마우스를 가져 갔을 때 링크에 밑줄을 표시하고 싶습니다.

그래서 의사 형식화 코드에서 : style:hover{ text-decoration: underline; }. 링크 자체는 이미 아래와 같이 스타일이 지정되어 있습니다.

{
  "$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
  "elmType": "a",
  "txtContent": "@currentField",
  "style": {
    "color": "#272727",
    "text-decoration": "none",
    "font-size": "14px"
  },
  "attributes": {
    "target": "_blank",
    "href": {
      "operator": "+",
      "operands": [
        "http://tenant.sharepoint.com/sitename/_layouts/download.aspx?SourceUrl=http://tenant.sharepoint.com/sitename/Library/",
        "@currentField"
      ]
    }
  }
}

답변

2 theChrisKent Aug 21 2020 at 14:34

나는 오랫동안 호버 스타일을 요청 해 왔습니다. 불행히도 Michael Han_MSFT가 그의 답변에서 썼 듯이 당신이 얻을 수있는 최선은 --hover수업입니다.

다행히도 원하는 것을 달성하기 위해 창의력을 발휘할 수 있습니다. 이 형식을 사용해보십시오.

{
  "$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "a",
      "txtContent": "@currentField",
      "style": {
        "color": "#272727",
        "text-decoration": "none",
        "font-size": "14px",
        "display": "inline-block",
        "border-bottom-width": "1px",
        "border-bottom-style": "solid"
      },
      "attributes": {
        "target": "_blank",
        "class": "ms-borderColor-white ms-borderColor-themePrimary--hover",
        "href": {
          "operator": "+",
          "operands": [
            "http://tenant.sharepoint.com/sitename/_layouts/download.aspx?SourceUrl=http://tenant.sharepoint.com/sitename/Library/",
            "@currentField"
          ]
        }
      }
    }
  ]
}

여기에 작동합니다.

MichaelHan_MSFT Aug 21 2020 at 09:33

ms-bgColor-<color>--hover호버 스타일을 변경 하는 데 사용할 수 있습니다 .

{
  "$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
  "elmType": "a",
  "txtContent": "@currentField",

  "style": {
    "color": "#272727",
    "text-decoration": "none",
    "font-size": "14px"
  },
  "attributes": {
    "target": "_blank",
    "class": "ms-bgColor-red--hover",
    "href": {
      "operator": "+",
      "operands": [
        "http://tenant.sharepoint.com/sitename/_layouts/download.aspx?SourceUrl=http://tenant.sharepoint.com/sitename/Library/",
        "@currentField"
      ]
    }
  }
}