Codex/Migrer à partir de MediaWiki UI
< Codex
À partir de MediaWiki 1.41, il est recommandé d'utiliser le marquage pour les composant Codex CSS-uniquement au lieu du marquage MediaWiki UI. Cette page vise à expliquer comment gérer les migrations.
Introduction aux composants Codex CSS uniquement
Codex fournit des composants CSS-uniquement pour les consommateurs qui utilisent Vue.js et la bibliothèque Codex. Ils fournissent un mécanisme léger pour rendre les composants de base tels que les boutons, les cases à cocher, les entrées, les icônes et les éléments radio.
Les informations les plus récentes sur les composants CSS sont disponibles dans la documentation officielle Codex. Par exemple, voir la version CSS-seulement du composant bouton.
Comment migrer vers Codex à partir des modules mediawiki.ui
Pour quitter le marquage MediaWiki ui, il faut 2 modifications:
- Vous devez supprimer le module ResourceLoader de la page et charger à la place les styles de Codex OU BIEN les styles de recherche de Codex. Le premier charge tous les styles pour tous les composants de Codex et le second charge un sous-ensemble de styles pour les composants couramment utilisés.
- Il est important de choisir le module approprié :
- Actuellement, dans les pages sensibles aux performances, comme par exemple les articles, nous recommandons d'utiliser des styles de recherche Codex. Cette feuille de style est chargée par défaut pour les habillages Minerva et Vector 2022.
- Si la page n'impacte pas les performances, par exemple si c'est une page spéciale, ou une page principalement destinée aux éditeurs connectés, en particulier les pages qui chargent Vue.js et Codex à un moment donné du cycle de vie de la page, utilisez le module complet des styles Codex.
- Si vous avez des doutes, utilisez les styles de recherche Codex.
- Il est important de choisir le module approprié :
- Vous devez modifier le marquage HTML des sections ci-dessous.
Migrer le HTML des modules mediawiki.ui vers les modules Codex
| Composant | Marquage MediaWiki UI | Marquage équivalent Codex |
|---|---|---|
| Icône | <span class="mw-ui-icon mw-ui-icon-bookmark"></span>
|
<span class="my-feature-class--bookmark"></span>
@import "mediawiki.skin.variables.less";
.my-feature-class {
&--bookmark {
.cdx-mixin-css-icon( @cdx-icon-bookmark );
}
}
|
| Bouton | <button class="mw-ui-button">
Cliquez ici
</button>
|
<button class="cdx-button">
Click me
</button>
|
| Bouton d'icône | <button class="mw-ui-button mw-ui-icon-element" aria-label="Back">
<span class="mw-ui-icon mw-ui-icon-arrow-previous"></span>
</button>
|
<button class="cdx-button cdx-button--icon-only" aria-label="Back">
<span class="cdx-button__icon my-feature-class--arrow-previous"></span>
</button>
@import "mediawiki.skin.variables.less";
.my-feature-class {
&--arrow-previous {
.cdx-mixin-css-icon( @cdx-icon-arrow-previous, @param-is-button-icon: true );
}
}
|
| Entrée | <input class="captcha-word mw-ui-input" placeholder="Enter captcha">
|
<div class="cdx-text-input">
<input class="captcha-word cdx-text-input__input" placeholder="Enter captcha">
</div>
|
| Case à cocher | <div class="mw-ui-checkbox">
<input name="wpRemember" type="checkbox" value="1" id="wpRemember" tabindex="3" class="mw-userlogin-rememberme">
<label for="wpRemember">Rester connecté (jusqu'à 365 jours)</label>
</div>
|
<div class="cdx-checkbox">
<input name="wpRemember" type="checkbox" value="1" id="wpRemember" tabindex="3" class="mw-userlogin-rememberme cdx-checkbox__input">
<span class="cdx-checkbox__icon"> </span>
<label for="wpRemember" class="cdx-checkbox__label">Rester connecté (jusqu'à 365 jours)</label>
</div>
|
| Radio | <span class="mw-ui-radio">
<input
id="radio-css-only-1"
type="radio"
name="radio-css-only"
/>
<label for="radio-css-only-1">
Radio 1
</label>
</span>
|
<span class="cdx-radio">
<!-- <input> element with id, type, name, and any other necessary
attributes. The actual input is visually hidden. -->
<input
id="radio-css-only-1"
class="cdx-radio__input"
type="radio"
name="radio-css-only"
/>
<!-- Empty span that will be styled to look like a radio input. -->
<span class="cdx-radio__icon"></span>
<!-- Label with `for` attribute matching the input's id. -->
<label class="cdx-radio__label" for="radio-css-only-1">
Radio 1
</label>
</span>
|
Modificateurs de composants
De nombreux composants peuvent être modifiés. Cette table de recherche doit vous aider à faire correspondre les modificateurs de l'interface utilisateur MediaWiki vers leurs équivalents Codex.
| Classe de modification dans MediaWiki UI | Classe de modificateur de Codex |
|---|---|
mw-ui-quiet
|
cdx-button--weight-quiet
|
mw-ui-progressive
|
cdx-button--action-progressive
|
mw-ui-destructive
|
cdx-button--action-destructive
|