Social andel
Skapat för:
- Utvecklare
- Användare
Verktyget för social delning visas som standard i det övre högra hörnet. Den består av en knapp och en panel som utökas när användaren klickar eller trycker på en knapp och innehåller enskilda delningsverktyg.
Placeringen och storleken på verktyget för delning via sociala medier i visningsprogrammets användargränssnitt styrs med följande:
.s7video360viewer .s7socialshare
CSS-egenskaper för verktyget för social delning
| övre | Det sociala delningsverktygets lodräta position i förhållande till visningsprogrambehållaren. |
| kvar | Vågrät position för verktyget för delning via sociala medier i förhållande till visningsprogrambehållaren. |
| width | Bredden på verktyget för delning via sociala medier. |
| height | Höjden på verktyget för delning via sociala medier. |
Exempel - Om du vill ställa in ett verktyg för delning via sociala medier som är placerat fyra pixlar från överkanten och fem pixlar från höger om visningsprogrammets behållare och har storleken 28 x 28 pixlar.
.s7interactivevideoviewer .s7socialshare {
top:4px;
right:5px;
width:28px;
height:28px;
}
Utseendet på verktygsknappen för delning via sociala medier styrs av följande CSS-klassväljare:
.s7video360viewer .s7socialshare .s7socialbutton
CSS-egenskaper för knappen för verktyget för social delning
| background-image | Bilden som visas för ett visst knappläge. |
| background-position |
Placera inuti en teckningssprite, om CSS-sprites används. Se CSS-fragment. |
NOTEstate som kan användas för att tillämpa olika skal på olika knapplägen.Knappens funktionsbeskrivning kan lokaliseras. Se Lokalisering av element i användargränssnittet.
Exempel - Om du vill ställa in en knapp för verktyget för delning via sociala medier som visar olika bilder för de fyra olika knapplägena.
.s7video360viewer .s7socialshare .s7socialbutton[state='up'] {
background-image:url(images/v2/SocialShare_video_dark_up.png);
}
.s7video360viewer .s7socialshare .s7socialbutton[state='over'] {
background-image:url(images/v2/SocialShare_dark_over.png);
}
.s7video360viewer .s7socialshare .s7socialbutton[state='down'] {
background-image:url(images/v2/SocialShare_dark_down.png);
}
.s7video360viewer .s7socialshare .s7socialbutton[state='disabled'] {
background-image:url(images/v2/SocialShare_dark_disabled.png);
}
Utseendet på panelen som innehåller de enskilda ikonerna för social delning styrs med följande CSS-klassväljare:
.s7video360viewer .s7socialshare .s7socialsharepanel
CSS-egenskaper för panelen för social delning
Exempel - Så här ställer du in en panel med genomskinlig färg:
.s7video360viewer .s7socialshare .s7socialsharepanel {
background-color: transparent;
}