mirror of
https://github.com/GitbookIO/gitbook.git
synced 2026-10-03 20:20:35 +00:00
Start documenting components
This commit is contained in:
+63
-1
@@ -1,7 +1,21 @@
|
||||
# Components
|
||||
|
||||
|
||||
## Injection
|
||||
|
||||
### Roles
|
||||
Plugins can inject components by registering react components to some roles.
|
||||
|
||||
#### Register a components
|
||||
|
||||
During the initialization phase of your plugin, dispatch the `GitBook.registerComponent` action:
|
||||
|
||||
```js
|
||||
dispatch(GitBook.registerComponent(MyCustomButton, { role: 'toolbar:buttons:left' }));
|
||||
```
|
||||
|
||||
#### Roles
|
||||
|
||||
Custom roles can be use for interopability with other plugins, but GitBook and the default theme set a convention for common roles:
|
||||
|
||||
| Role | Description | Props |
|
||||
| ---- | ----------- | ----- |
|
||||
@@ -10,3 +24,51 @@
|
||||
| `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`
|
||||
|
||||
Extends the meta tags of the page. This is an alias for [react-helmet](https://github.com/nfl/react-helmet).
|
||||
|
||||
```js
|
||||
<GitBook.Head
|
||||
title="My page"
|
||||
/>
|
||||
```
|
||||
|
||||
#### `GitBook.ImportCSS`
|
||||
|
||||
Import a CSS file by resolving the path correctly according to the current page:
|
||||
|
||||
```js
|
||||
<GitBook.ImportCSS href="myfile.css" />
|
||||
```
|
||||
|
||||
#### `GitBook.ImportJS`
|
||||
|
||||
Import a JS file by resolving the path correctly according to the current page:
|
||||
|
||||
```js
|
||||
<GitBook.ImportJS src="mylib.js" />
|
||||
```
|
||||
|
||||
#### `GitBook.InjectedComponent`
|
||||
|
||||
Inject a component matching a specific role:
|
||||
|
||||
```js
|
||||
<GitBook.InjectedComponent matching={{ role: 'mycustomrole' }} props={{ someProp: 1 }}>
|
||||
<b>Inner content</b>
|
||||
</GitBook.InjectedComponent>
|
||||
```
|
||||
|
||||
#### `GitBook.InjectedComponentSet`
|
||||
|
||||
Same API as `InjectedComponentSet` but render the matching components in chain instead of composed:
|
||||
|
||||
```js
|
||||
<GitBook.InjectedComponentSet matching={{ role: 'mytoolbar' }} />
|
||||
```
|
||||
|
||||
**Warning:** Children are discarded.
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
assets/theme.js
|
||||
@@ -0,0 +1 @@
|
||||
!assets/theme.js
|
||||
Reference in New Issue
Block a user