组件参考

这个包包括一个通用WordPress组件库,用于创建在屏幕和WordPres仪表板功能之间共享的通用UI元素。

安装

npm install@wordpress/components--保存

此包假定您的代码将在2015年欧洲标准+环境。如果您使用的环境对此类语言功能和API的支持有限或不支持,您应该包括polyfill发货@wordpress/babel预设在您的代码中。

用法

在Gutenberg中,可以通过从组件根目录:

/***WordPress依赖项*/从“@wordpress/components”导入{Button};导出默认函数MyButton(){return单击我</按钮>;}

许多组件都包含CSS来添加样式,您需要加载这些样式才能正确显示。在WordPress中,添加wp-组件样式表作为插件样式表的依赖项。请参见wp_enque_style文档了解如何指定依赖项。

在非WordPress项目中,链接到build-style/style.css文件,它位于node_modules/@wordpress/components/build-style/style.css.

烤松饼

默认情况下波波(Popover)组件将在附加到文档正文的额外元素中呈现。

如果要精确控制popovers渲染的位置,则需要使用波波弗。狭槽组件。

下面的示例说明了如何使用
波波(Popover)并将这些弹出窗口渲染到DOM中的单个位置。

/***外部依赖项*/从“@wordpress/components”导入{Popover、SlotFillProvider};/***内部依赖性*/从'导入{MyComponentWithPopover}/my-component';常量示例=()=>{<SlotFillProvider><MyComponentWithPopover/><波波。插槽/></SlotFillProvider>;};

类型脚本

这个包为它导出的组件公开了自己的类型,但是它不为组件属性导出自己的类型。如果需要提取道具类型,请使用反应。组件属性从元素中获取类型。

从“react”导入类型{ComponentProps};从“@wordpress/components”导入{Button};导出默认函数MyButton(道具:ComponentProps<按钮类型>){return单击我</按钮>;}

文档和示例

您可以在以下位置浏览组件文档和示例:https://wordpress.github.io/gutenberg网站/

参与此包

这是古腾堡项目的一部分。该项目组织为单回购。它由多个独立的软件包组成,每个包都有特定的用途。此monorepo中的包发布到净现值法并由使用WordPress(文字出版社)以及其他软件项目。

要了解更多关于对这个包或古腾堡整体贡献的信息,请阅读该项目的主要内容贡献者指南.

这个包也有自己的贡献信息您可以在其中找到更多详细信息。