svgIconButton : Extraction des icônes SVG dans des boutons - Blogger XML Documentation

Blogger - svgIconButton [Common]
Gadget Version 1 Gadget Version 2 Balisage
Common Common
Original
Description de l'inclusion
svgIconButton est l'identifiant d'une inclusion commune qui a été conçue pour extraire des icônes SVG contenues dans un fichier image-objet, l'ensemble est emballé dans un bouton.
En bref, l'inclusion reconstruit les balises <button> et <svg> avec le nom d'un fichier qui a été défini dans l'inclusion parente.
Directives d'usage et niveau de priorité de mise à jour
Thème Version 1
Garantie d'usage : Abandonné
Priorité indéfinie
Thème Version 2
Garantie d'usage : Abandonné
Priorité indéfinie
Thème Dynamique
Garantie d'usage : Abandonné
Priorité indéfinie
Thème Version 3
Garantie d'usage : Oui
Priorité haute
Variante par thème
Inexistante.
Inclusion de gadget équivalente
Aucune.


Contenu de l'inclusion

Le code XML

<b:includable id='svgIconButton'>
  <button class='svg-icon-24-button'>
    <b:class expr:name='data:iconClass'/>
    <svg class='svg-icon-24'>
      <use expr:xlink:href='"/responsive/sprite_v1_6.css.svg" fragment data:iconId'
           xmlns:xlink='http://www.w3.org/1999/xlink'/>
    </svg>
  </button>
</b:includable>

Les nœuds parents

ID Inclusion Balisage
backArrowIcon
Original
chevronDownIcon
Original
chevronUpIcon
Original
closeIcon
Original
commentIcon
Original
defaultAvatarIcon
Original
emailIcon
Original
facebookIcon
Original
flatBloggerIcon
Original
forwardArrowIcon
Original
linkIcon
Original
menuIcon
Original
pinterestIcon
Original
searchIcon
Original
shareIcon
Original
sharingOtherIcon
Original
twitterIcon
Original
verticalMoreIcon
Original


Appel de l'inclusion et paramètres

L'inclusion peut être appelée depuis un emplacement quelconque dans le XML.

<b:include name='svgIconButton'/>

Présenté tel quel, l'appel ne travaillera pas, puisqu'il faut mentionner le nom du fichier a extraire. Quelques autres paramètres peuvent être également ajouté via l'attribut data dans la balise <b:include> ou via un jeu de balises <b:with>.

<b:include data='{ ITEMS }' name='svgIconButton'/>

L'objet peut contenir ces items:

Alias Signification -
iconId L'identifiant de l'icône SVG. Voir la liste des identifiants fournis par Blogger ci-dessous. Obligatoire
iconClass Ajouter le nom d'une classe à la balise <button> Facultatif

Exemple
<b:include data='{ iconId: "ic_share_black_24dp" }'
           name='svgIconButton'/>


Identifiants des icônes SVG

Ce tableau reprend la liste de tous les SVG hébergés sur votre blog. La taille par défaut est de 24px. Comme vous pourrez le constater, leurs dimensions peuvent être adaptées.

Identifiant Icône 24px Icône 48px Icône 96px Icône 192px
ic_24_email_dark
ic_24_facebook_dark
ic_24_link_dark
ic_24_pinterest_dark
ic_24_twitter_dark
ic_add_box_black_24dp
ic_arrow_back_black_24dp
ic_arrow_forward_black_24dp
ic_chat_bubble_black_24dp
ic_check_box_black_24dp
ic_check_box_outline_blank_black_24dp
ic_chevron_left_black_24dp
ic_chevron_right_black_24dp
ic_close_black_24dp
ic_expand_less_black_24dp
ic_expand_more_black_24dp
ic_expand_more_black_24dp
ic_mode_comment_black_24dp
ic_more_horiz_black_24dp
ic_more_vert_black_24dp
ic_person_black_24dp
ic_post_blogger_black_24dp
ic_rss_feed_black_24dp
ic_search_black_24dp
ic_share_black_24dp


Modifier l'inclusion

L'inclusion peut être modifiée dans un marquage commun.
En savoir plus
<b:defaultmarkups>
  <b:defaultmarkup type='Common'>
    <b:includable id='svgIconButton'>

      <!-- Add new code for "svgIconButton" inclusion here -->

    </b:includable>
  </b:defaultmarkup>
</b:defaultmarkups>

Lorsque l'inclusion est marquée explicitement dans le thème, la version "serveur" n'est plus prioritaire.
Dans ce cas-ci, pour appeler l'inclusion "serveur", vous devez mentionner le préfixe super à l'identifiant de l'inclusion.
En savoir plus
  <!-- Call custom version -->
  <b:include name='svgIconButton'/>

  <!-- Call server version -->
  <b:include name='super.svgIconButton'/>


Disponibilité des variantes de l'inclusion

Thèmes Éditeur XML Cloud
Original Inexistant Original
Contempo Inexistant Original
Emporio Inexistant Original
Essential Inexistant Original
Notable Inexistant Original
Soho Inexistant Original
Afficher les variantes
Légende :
  • Original : Balisage original
  • Original+ : Balisage original (super)
  • Theme : Balisage spécifique au thème
  • Inexistant : Balisage inexistant


Spotlight

Populaires cette semaine

Ajouter des boutons à la barre de partage Blogger