组件
注入
插件可以通过将React组件注册到role来注入组件。
注册组件
插件初始化阶段，调用GitBook.registerComponent注册新组件：
dispatch(GitBook.registerComponent(MyCustomButton, { role: 'toolbar:buttons:left' }));
角色
自定义角色可以用于与其他插件的交互，但GitBook和默认主题设置了常见角色的约定：
| Role | Description | Props |
|---|---|---|
page:container |
DIV container for the page's content | { page: Page } |
summary:container |
DIV container for the whole summary | { summary: Summary } |
summary:parts |
DIV container for summary's parts | { parts: List<SummaryPart> } |
summary:part |
DIV for a specific part | { part: SummaryPart } |
summary:articles |
UL container for a part's articles | { articles: List<SummaryArticle> } |
summary:article |
LI for a specific article | { article: SummaryArticle } |
Default Components
GitBook.Head
扩展页面的元标记。 这是react-helmet的别名。
<GitBook.Head
title="My page"
/>
GitBook.ImportCSS
根据当前页面相对路径，导入CSS文件：
<GitBook.ImportCSS href="myfile.css" />
GitBook.InjectedComponent
注入与特定角色匹配的组件：
<GitBook.InjectedComponent matching={{ role: 'mycustomrole' }} props={{ someProp: 1 }}>
<b>Inner content</b>
</GitBook.InjectedComponent>
GitBook.InjectedComponentSet
某些类似InjectedComponentSet的API用来匹配元件，而不是组成：
<GitBook.InjectedComponentSet matching={{ role: 'mytoolbar' }} />
警告: 子项将失效.
GitBook.FlexLayout and GitBook.FlexBox
一个简单的包装器，提供给定方向和样式的Flexbox布局。 您在Flexbox上设置的任何其他道具都会呈现。
<GitBook.FlexLayout column>
<GitBook.FlexBox>First column</GitBook.FlexBox>
<GitBook.FlexBox>Second column</GitBook.FlexBox>
</GitBook.FlexLayout>
作者: 雪之梦技术驿站
链接: https://snowdreams1006.github.io/gitbook-official/zh/api/components.html
来源: 雪之梦技术驿站
本文原创发布于「雪之梦技术驿站」,转载请注明出处,谢谢合作!
