Codex/MediaWiki UIからの移行

From mediawiki.org
This page is a translated version of the page Codex/Migrating from MediaWiki UI and the translation is 95% complete.
Languages:

MediaWiki 1.41以降では、MediaWiki UI マークアップの代わりにCodexによるCSSのみのコンポーネントを使用することが推奨されています。 このページではどのように移行するか説明します。

Introduction to Codex CSS-only components

Codexは、Vue.jsやCodexライブラリの使用を憂慮している利用者のためにCSSのみのコンポーネントを提供しています。 それらによってボタンやチェックボックス、インプット、アイコンやラジオ要素などの基本的なコンポーネントを作るための軽量なメカニズムを使用することができます。

CSSコンポーネントについての最新情報はCodexの公式文書にあります。 例えばボタンコンポーネントのCSSのみのバージョンを見てみてください。

mediawiki.uiモジュールからCodexに移行する方法

MediaWiki UIのマークアップから移行するためには2つの変更が必要となります：

  1. ResourceLoaderモジュールをページから削除し、代わりにcodex-stylesかcodex-search-stylesをロードします。 前者は全てのCodexコンポーネントを読み込み、後者は一般的に使用されるコンポーネントのスタイルのサブセットを読み込みます。
    • 適切なモジュールを選択することが重要です：
      • 現在、記事などのパフォーマンスが重要なページではcodex-search-stylesを使用することをお勧めしています。 このスタイルシートは既定でMinervaとVector 2022スキンでロードされます。
      • If the page is not performance sensitive, for example it is a special page, or a page primarily for logged in editors, particularly pages which load Vue.js and Codex at some point in the page life cycle, use the full codex-styles module.
      • はっきりとしない場合には、codex-search-stylesを使用してください。
  2. 以下のセクションに従いHTMLマークアップを変更しましょう。

HTMLのMediaWiki UIモジュールからCodexモジュールへの移行

コンポーネント MediaWiki UI マークアップ Codexでの対応するマークアップ
アイコン 
<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 );
  }
}
ボタン 
<button class="mw-ui-button">
  ここをクリック
</button>

<button class="cdx-button">
  Click me
</button>
アイコン ボタン 
<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 );
  }
}
入力 
<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>
チェックボックス 
<div class="mw-ui-checkbox">
    <input name="wpRemember" type="checkbox" value="1" id="wpRemember" tabindex="3" class="mw-userlogin-rememberme">
    <label for="wpRemember">ログイン状態を保持（最長365日）</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">&nbsp;</span>
    <label for="wpRemember" class="cdx-checkbox__label">ログイン状態を保持（最長365日）</label>
</div>
ラジオ 
<span class="mw-ui-radio">
  <input
    id="radio-css-only-1"
    type="radio"
    name="radio-css-only"
  />
  <label for="radio-css-only-1">
    ラジオ 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">
    ラジオ 1
  </label>
</span>

コンポーネント修飾子

多くのコンポーネントは改造することができます。 この検索テーブルはMediaWiki UIの修飾子をCodexの対応するものに変換する時役立ちます。

MediaWiki UIの修飾子クラス Codexの修飾子クラス
mw-ui-quiet cdx-button--weight-quiet
mw-ui-progressive cdx-button--action-progressive
mw-ui-destructive cdx-button--action-destructive
Retrieved from "https://www.mediawiki.org/w/index.php?title=Codex/Migrating_from_MediaWiki_UI/ja&oldid=6285027"