diff --git a/docs/widgets.md b/docs/widgets.md index fd11ae13c8..22795b4890 100644 --- a/docs/widgets.md +++ b/docs/widgets.md @@ -16,6 +16,7 @@ Dashy has support for displaying dynamic content in the form of widgets. There a - [Stock Price History](#stock-price-history) - [Joke of the Day](#joke) - [Flight Data](#flight-data) + - [Example Widget](#example-widget) - [Self-Hosted Services Widgets](#dynamic-widgets) - [Dynamic Widgets](#dynamic-widgets) - [Iframe Widget](#iframe-widget) @@ -366,6 +367,30 @@ Displays airport departure and arrival flights, using data from [AeroDataBox](ht --- +### Example Widget + +A simple example widget, to use as a template. Fetches and displays a list of images, from [Dummy APIs](https://dummyapis.com/). + +
+ +##### Options + +**Field** | **Type** | **Required** | **Description** +--- | --- | --- | --- +**`text`** | `string` | _Optional_ | Text to display in the images. Defaults to `Dashy` +**`count`** | `number` | _Optional_ | The number of images to be rendered. Defaults to `5` + +##### Example + +```yaml +- type: example + options: + text: Hello + count: 3 +``` + +--- + ## Dynamic Widgets ### Iframe Widget diff --git a/src/components/Widgets/ExampleWidget.vue b/src/components/Widgets/ExampleWidget.vue new file mode 100644 index 0000000000..e4ffbcc77b --- /dev/null +++ b/src/components/Widgets/ExampleWidget.vue @@ -0,0 +1,117 @@ + +{{ image.title }}
+ +