README

MediaWiki的CommonUserInterface

提供常用用户界面元素和可定制的样式。

此代码旨在在MediaWiki应用程序环境中执行。不打算独立使用。

在MediaWiki扩展中使用

将"mwstake/mediawiki-component-commonuserinterface": "~3.0"添加到您的composer.json文件的require部分。

从3.0版本开始，需要显式初始化。这可以通过以下方式实现：

• 在您的extension.json/skin.json中添加"callback": "mwsInitComponents"
• 或在其中调用mwsInitComponents();您扩展/皮肤的定制callback方法

另请参阅mwstake/mediawiki-componentloader。

组件和渲染器

默认渲染器类型

• *
• bootstrap-5

皮肤可以定义

$GLOBALS['mwsgCommonUIComponentRendererType'] = 'bootstrap-5';

如果它提供了"Twitter Bootstrap V5"。如果请求的渲染器类型不可用，"CommonUserInterface"将回退到*。

自定义渲染器

$GLOBALS['mwsgCommonUIComponentRendererRegistry']['my-custom-renderer']['button'] = '...';

皮肤插槽

默认插槽

• siteNoticeAfter: 使用钩子SiteNoticeAfter向任何默认皮肤添加组件
• dataAfterContent: 使用钩子SkinAfterContent向任何默认皮肤添加组件

示例

$GLOBALS['mwsgCommonUISkinSlots']['siteNoticeAfter']['my-sitenoticeafter-toolbar'] = [
	'factory' => function() {
		return new MWStake\MediaWiki\Component\CommonUserInterface\Component\SimpleToolbar( [
			'items' => [
				new MWStake\MediaWiki\Component\CommonUserInterface\Component\SimpleDropDown( [
					'label' => new RawMessage( 'Click me!' ),
					'toggleRLModules' => [ 'my-dropdown-module' ]
				] )
			]
		] );
	}
];

$GLOBALS['mwsgCommonUISkinSlots']['skinAfterContent']['my-skinaftercontent-panel'] = [
	'factory' => function() {
		return new MWStake\MediaWiki\Component\CommonUserInterface\Component\SimplePanel( [
			'title' => new RawMessage( 'My panel' ),
			'collapsible' => true,
			'collapsed' => true,
			'expandRLModules' => [ 'my-panel-module' ]
		] );
	}
];

待办事项

客户端渲染

示例

mws.commonui.renderPath( '<skinslot>/<parentComponentId>/<subComponentId>', $container );