|
| 1 | +# Cell Toolbar Button |
| 2 | + |
| 3 | +This example shows how to add buttons to the cell toolbar. |
| 4 | +The buttons are displayed or not, depending on the cell type. |
| 5 | + |
| 6 | + |
| 7 | + |
| 8 | +In this particular example, the buttons will execute a code cell, or render a markdown |
| 9 | +cell. |
| 10 | + |
| 11 | +The command to run is already defined (`notebook:run-cell`), but we need |
| 12 | +to create new commands to display or not the button, depending on the cell type. |
| 13 | + |
| 14 | +To add a button triggering a command to the cell toolbar, you must |
| 15 | +specified the following settings: |
| 16 | + |
| 17 | +```json5 |
| 18 | +// schema/plugin.json#L8-L19 |
| 19 | + |
| 20 | +"jupyter.lab.toolbars": { |
| 21 | + "Cell": [ |
| 22 | + { |
| 23 | + "name": "run-code-cell", |
| 24 | + "command": "toolbar-button:run-code-cell" |
| 25 | + }, |
| 26 | + { |
| 27 | + "name": "render-markdows-cell", |
| 28 | + "command": "toolbar-button:render-markdown-cell" |
| 29 | + } |
| 30 | + ] |
| 31 | +} |
| 32 | +``` |
| 33 | + |
| 34 | +The key `Cell` inform JupyterLab about which widget toolbar should be |
| 35 | +extended. The `name` should be an unique identifier for the widget toolbar |
| 36 | +items. The `command` is the unique command identifier. |
| 37 | + |
| 38 | +The commands name are defined in the _src/index.ts_ file: |
| 39 | + |
| 40 | +```ts |
| 41 | +// src/index.ts#L8-L17 |
| 42 | + |
| 43 | +const CommandIds = { |
| 44 | + /** |
| 45 | + * Command to render a markdown cell. |
| 46 | + */ |
| 47 | + renderMarkdownCell: 'toolbar-button:render-markdown-cell', |
| 48 | + /** |
| 49 | + * Command to run a code cell. |
| 50 | + */ |
| 51 | + runCodeCell: 'toolbar-button:run-code-cell' |
| 52 | +}; |
| 53 | +``` |
| 54 | + |
| 55 | +And the commands are created when the extension is activated: |
| 56 | + |
| 57 | +```ts |
| 58 | +// src/index.ts#L30-L48 |
| 59 | + |
| 60 | +/* Adds a command enabled only on code cell */ |
| 61 | +commands.addCommand(CommandIds.runCodeCell, { |
| 62 | + icon: runIcon, |
| 63 | + caption: 'Run a code cell', |
| 64 | + execute: () => { |
| 65 | + commands.execute('notebook:run-cell'); |
| 66 | + }, |
| 67 | + isVisible: () => tracker.activeCell?.model.type === 'code' |
| 68 | +}); |
| 69 | + |
| 70 | +/* Adds a command enabled only on markdown cell */ |
| 71 | +commands.addCommand(CommandIds.renderMarkdownCell, { |
| 72 | + icon: markdownIcon, |
| 73 | + caption: 'Render a markdown cell', |
| 74 | + execute: () => { |
| 75 | + commands.execute('notebook:run-cell'); |
| 76 | + }, |
| 77 | + isVisible: () => tracker.activeCell?.model.type === 'markdown' |
| 78 | +}); |
| 79 | +``` |
| 80 | + |
| 81 | +The following line will add the class `lm-mod-hidden` to the button if the active cell |
| 82 | +is not a code cell: |
| 83 | + |
| 84 | +<!-- prettier-ignore-start --> |
| 85 | +```ts |
| 86 | +// src/index.ts#L37-L37 |
| 87 | + |
| 88 | +isVisible: () => tracker.activeCell?.model.type === 'code' |
| 89 | +``` |
| 90 | +<!-- prettier-ignore-end --> |
| 91 | + |
| 92 | +To hide the button, we need to add a CSS rule on the class `lm-mod-hidden` in the file |
| 93 | +_style/base.css_: |
| 94 | + |
| 95 | +<!-- prettier-ignore-start --> |
| 96 | +<!-- embedme style/base.css#L8-L10 --> |
| 97 | + |
| 98 | +```css |
| 99 | +.jp-ToolbarButtonComponent.lm-mod-hidden { |
| 100 | + display: none; |
| 101 | +} |
| 102 | +``` |
| 103 | +<!-- prettier-ignore-end --> |
| 104 | + |
| 105 | +## Where to Go Next |
| 106 | + |
| 107 | +This example uses a command to display the widget. Have a look a the |
| 108 | +[commands example](../commands/README.md) for more information about it. |
0 commit comments