diff --git a/doc/how_to/components/index.md b/doc/how_to/components/index.md index 24e7ff88ad..d472702c61 100644 --- a/doc/how_to/components/index.md +++ b/doc/how_to/components/index.md @@ -98,25 +98,3 @@ How to control the size of components. ::: :::: - -## Build Custom Components - -::::{grid} 1 2 2 3 -:gutter: 1 1 1 2 - -:::{grid-item-card} {octicon}`filter;2.5em;sd-mr-1` Combine Existing Components -:link: custom_viewer -:link-type: doc - -How to build custom components that are combinations of existing components. -::: - -:::{grid-item-card} {octicon}`filter;2.5em;sd-mr-1` Build Components from Scratch -:link: custom_reactiveHTML -:link-type: doc - -{bdg-warning}`Advanced` -How to build custom components from scratch. -::: - -:::: diff --git a/doc/how_to/components/custom_reactiveHTML.md b/doc/how_to/custom_components/custom_reactiveHTML.md similarity index 99% rename from doc/how_to/components/custom_reactiveHTML.md rename to doc/how_to/custom_components/custom_reactiveHTML.md index fa594a22f3..dbca03e4f0 100644 --- a/doc/how_to/components/custom_reactiveHTML.md +++ b/doc/how_to/custom_components/custom_reactiveHTML.md @@ -2,8 +2,6 @@ This guide addresses how to build custom Panel components from scratch. -{bdg-warning}`Advanced` - --- As a how-to guide, the intent of this page is to provide recipes to solve a specific real-world problem without a lot of discussion. However, this is an advanced topic so if you get stuck, please read the associated [Background > Building Custom Components](../../background/components/components_custom) for further explanation. diff --git a/doc/how_to/components/custom_viewer.md b/doc/how_to/custom_components/custom_viewer.md similarity index 93% rename from doc/how_to/components/custom_viewer.md rename to doc/how_to/custom_components/custom_viewer.md index 88cadd12fb..4c409d520c 100644 --- a/doc/how_to/components/custom_viewer.md +++ b/doc/how_to/custom_components/custom_viewer.md @@ -111,3 +111,4 @@ pn.Column( ``` ## Related Resources +- To create custom components from scratch, check out [How To > Build Components from Scratch](./custom_reactiveHTML.md) and read the associated [Background > Building Custom Components](../../background/components/components_custom) for further explanation. diff --git a/doc/how_to/custom_components/index.md b/doc/how_to/custom_components/index.md new file mode 100644 index 0000000000..a7768af5da --- /dev/null +++ b/doc/how_to/custom_components/index.md @@ -0,0 +1,22 @@ +# Build Custom Components + +Extend Panel with custom components. + +::::{grid} 1 2 2 3 +:gutter: 1 1 1 2 + +:::{grid-item-card} {octicon}`git-merge;2.5em;sd-mr-1` Combine Existing Components +:link: custom_viewer +:link-type: doc + +How to build custom components that are combinations of existing components. +::: + +:::{grid-item-card} {octicon}`plus-circle;2.5em;sd-mr-1` Build Components from Scratch +:link: custom_reactiveHTML +:link-type: doc + +How to build custom components from scratch. +::: + +:::: diff --git a/doc/how_to/index.md b/doc/how_to/index.md index b84ce4318f..e2e9e9d83f 100644 --- a/doc/how_to/index.md +++ b/doc/how_to/index.md @@ -135,6 +135,13 @@ Discover how to profile and debug your application using the admin dashboard and Discover how to set up unit tests, UI tests and load testing to ensure your applications are (and stay) robust and scalable. ::: +:::{grid-item-card} {octicon}`plus-circle;2.5em;sd-mr-1` Build Custom Components +:link: custom_components/index +:link-type: doc + +Discover how to extend Panel by building custom components. +::: + ::::