816b611eb9
* mostly minor edits while reading * Update docs/sources/plugins/developing/development.md * Update docs/sources/plugins/developing/apps.md * Update docs/sources/plugins/developing/development.md * Update docs/sources/plugins/developing/development.md * Update docs/sources/plugins/developing/development.md * Update docs/sources/plugins/developing/development.md * Update docs/sources/plugins/developing/development.md * notes updates * Update docs/sources/plugins/developing/development.md Co-Authored-By: Diana Payton <52059945+oddlittlebird@users.noreply.github.com> * update to ref tutorials Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>
37 lines
870 B
Markdown
37 lines
870 B
Markdown
+++
|
|
title = "Developing Panel Plugins"
|
|
keywords = ["grafana", "plugins", "panel", "documentation"]
|
|
type = "docs"
|
|
[menu.docs]
|
|
name = "Developing Panel Plugins"
|
|
parent = "developing"
|
|
weight = 4
|
|
+++
|
|
|
|
|
|
# Panels
|
|
|
|
Panels are the main building blocks of dashboards.
|
|
|
|
## Panel development
|
|
|
|
|
|
### Scrolling
|
|
The grafana dashboard framework controls the panel height. To enable a scrollbar within the panel the PanelCtrl needs to set the scrollable static variable:
|
|
|
|
```javascript
|
|
export class MyPanelCtrl extends PanelCtrl {
|
|
static scrollable = true;
|
|
...
|
|
```
|
|
|
|
In this case, make sure the template has a single `<div>...</div>` root. The plugin loader will modify that element adding a scrollbar.
|
|
|
|
|
|
|
|
### Examples
|
|
|
|
- [clock-panel](https://github.com/grafana/clock-panel)
|
|
- [singlestat-panel](https://github.com/grafana/grafana/tree/master/public/app/plugins/panel/singlestat)
|
|
|