Fandom Developers Wiki
Advertisement

WDSIcons est un bibliothèque visant à faciliter la tâche des autres créateurs de scripts pour utiliser les icônes Design System dans leurs scripts (voir la démo).

Note: asset output HTML is changed to be more similar to the design system upstream:

  • The wiki application renders all WDS icons with a id attribute.
  • The design system doesn't assign a identifier to icons.
  • WDSIcons only assigns a data-id attribute to provide icon names.

Utilisation[]

Librairie[]

Pour uiliser WDSIcons, joindre la logique de l'icone à l'évent dev.wds en utilisant mw.hook.

Import du script[]

Après la mise en place de la logique du script, importer la librairie.

// enregistrer le hook avant l'import pour éviter les problèmes de chargement 
mw.hook('dev.wds').add(function(wds) {
    // wds est un raccourci pour window.dev.wds
});

importArticle({ type: 'script', article: 'u:dev:MediaWiki:WDSIcons/code.js' });

Méthodes[]

La librairie a les clés suivantes pour contrôler l'utilisation des icones:

  • wds.registry - objet contenant des identifiants valides par type d'actif
  • wds.iconset - tableau d'icônes
  • wds.sizemap - carte des tailles du sous-ensemble de types de composants par rapport aux dimensions des actifs
  • wds.icon - générateur de composants d'icônes qui renvoie l'élément SVG
  • wds.badge - générateur de composants de badges qui renvoie l'élément SVG
  • wds.company - générateur de composants d'entreprises qui renvoie l'élément SVG
  • wds.render - rendu pour les espaces réservés aux éléments WDS

Ajout de composants[]

Les composants peuvent être ajoutés directement ou en tant que variables, avec prise en charge des attributs personnalisés.

mw.hook('dev.wds').add(function(wds) {
    $('foo').append(wds.icon('pencil-small', {
        'class': 'edit'
    }));
    var bar = wds.icon('trash-small', {
        'class': 'garbage'
    });
    $('.foo').append(bar);
});

Rendu de librarie[]

La librairie peut fonctionner sur une section existante de HTML ou sur le contenu d'un article.

  • Icon - id dev-wds-icons-NAME
  • Badge - id dev-wds-avatar-badges-NAME
  • Company - id dev-wds-company-NAME

Ceux-ci sont remplacés par le composant WDS correspondant. La librairie autorise également les attributs sur les espaces réservés.

Dans un article :

<div class="bar"><!--
 --><div class="wds-icon-small" id="dev-wds-icons-gear"><!--
 --></div>
</div>
mw.hook('dev.wds').add(function(wds) {
    wds.render('.bar');
});

Dans un script :

mw.hook('dev.wds').add(function(wds) {
    $('.foo').append(
        $('<div>', {
            'id': 'dev-wds-icons-gear-small'
        })
    );
    wds.render('.foo');
});

Démo[]

bell
external
image
link
pages

Voir aussi[]

Advertisement