diff --git a/docs/data/toolpad/building-ui/canvas-and-inspector.md b/docs/data/toolpad/building-ui/canvas-and-inspector.md index 7b980644348..1b358daed2a 100644 --- a/docs/data/toolpad/building-ui/canvas-and-inspector.md +++ b/docs/data/toolpad/building-ui/canvas-and-inspector.md @@ -12,13 +12,13 @@ The canvas will highlight the location where a component can be dropped. Release Click any component in the canvas to select it. An overlay indicates the selected components. -Canvas controls +Canvas controls ### Moving components around In order to change position of a component select it first then click on the overlay handle, drag and drop it in the new location. The canvas will highlight available drop location with green indicator. -Canvas controls +Canvas controls ### Removing components @@ -28,7 +28,7 @@ Select the component you want to remove. Click the bin icon in the overlay to re In the inspector panel you can see the values of the selected component's properties. Each component has a specific set of properties that you can tweak in the inspector panel. -Inspector +Inspector You can either use a static or dynamic values as described in [data binding](/toolpad/data-binding/) section @@ -38,26 +38,26 @@ You can either use a static or dynamic values as described in [data binding](/to Toolpad canvas uses a grid layout where you can use rows to position components: -Canvas rows +Canvas rows ### Columns Or place them in a dedicated column besides other components: -Canvas rows +Canvas rows ### Resizing components Components placed in columns can be horizontally resized within the grid boundaries: -Canvas grid +Canvas grid ## Custom styling In order to provide a personalised styling to the components used in the application you can use style overrides via [sx](https://mui.com/system/getting-started/the-sx-prop/) prop. -SX +SX Click on **sx** button in the Inspector to bring up JSON editor and define style overrides: -SX +SX diff --git a/docs/data/toolpad/building-ui/component-library.md b/docs/data/toolpad/building-ui/component-library.md index 663483653e0..f7507009551 100644 --- a/docs/data/toolpad/building-ui/component-library.md +++ b/docs/data/toolpad/building-ui/component-library.md @@ -6,7 +6,7 @@ In order to access a list of built in components hover over **Component library** -Component library +Component library

diff --git a/docs/data/toolpad/building-ui/custom-components.md b/docs/data/toolpad/building-ui/custom-components.md index 0349fb6bab1..d03ef96dae4 100644 --- a/docs/data/toolpad/building-ui/custom-components.md +++ b/docs/data/toolpad/building-ui/custom-components.md @@ -6,15 +6,15 @@ In order to create a new custom component locate **+** button in the Explorer near Components section and click it: -Custom component +Custom component Choose the name for your component and click **Create**: -Custom create +Custom create You can now use code editor (on the left) and live preview (on the right) to define your custom component: -Custom component IDE +Custom component IDE

diff --git a/docs/public/static/toolpad/docs/building-ui/ui-1.png b/docs/public/static/toolpad/docs/building-ui/ui-1.png new file mode 100644 index 00000000000..a0d78c4bf37 Binary files /dev/null and b/docs/public/static/toolpad/docs/building-ui/ui-1.png differ diff --git a/docs/public/static/toolpad/docs/building-ui/ui-10.png b/docs/public/static/toolpad/docs/building-ui/ui-10.png new file mode 100644 index 00000000000..3565278fd14 Binary files /dev/null and b/docs/public/static/toolpad/docs/building-ui/ui-10.png differ diff --git a/docs/public/static/toolpad/docs/building-ui/ui-11.png b/docs/public/static/toolpad/docs/building-ui/ui-11.png new file mode 100644 index 00000000000..2ff31bd4ffc Binary files /dev/null and b/docs/public/static/toolpad/docs/building-ui/ui-11.png differ diff --git a/docs/public/static/toolpad/docs/building-ui/ui-12.png b/docs/public/static/toolpad/docs/building-ui/ui-12.png new file mode 100644 index 00000000000..273f31fb4fa Binary files /dev/null and b/docs/public/static/toolpad/docs/building-ui/ui-12.png differ diff --git a/docs/public/static/toolpad/docs/building-ui/ui-2.png b/docs/public/static/toolpad/docs/building-ui/ui-2.png new file mode 100644 index 00000000000..528993e841e Binary files /dev/null and b/docs/public/static/toolpad/docs/building-ui/ui-2.png differ diff --git a/docs/public/static/toolpad/docs/building-ui/ui-3.png b/docs/public/static/toolpad/docs/building-ui/ui-3.png new file mode 100644 index 00000000000..f97ae1654b7 Binary files /dev/null and b/docs/public/static/toolpad/docs/building-ui/ui-3.png differ diff --git a/docs/public/static/toolpad/docs/building-ui/ui-4.png b/docs/public/static/toolpad/docs/building-ui/ui-4.png new file mode 100644 index 00000000000..9a1ca36533f Binary files /dev/null and b/docs/public/static/toolpad/docs/building-ui/ui-4.png differ diff --git a/docs/public/static/toolpad/docs/building-ui/ui-5.png b/docs/public/static/toolpad/docs/building-ui/ui-5.png new file mode 100644 index 00000000000..46275379052 Binary files /dev/null and b/docs/public/static/toolpad/docs/building-ui/ui-5.png differ diff --git a/docs/public/static/toolpad/docs/building-ui/ui-6.png b/docs/public/static/toolpad/docs/building-ui/ui-6.png new file mode 100644 index 00000000000..d3e90fa2aec Binary files /dev/null and b/docs/public/static/toolpad/docs/building-ui/ui-6.png differ diff --git a/docs/public/static/toolpad/docs/building-ui/ui-7.png b/docs/public/static/toolpad/docs/building-ui/ui-7.png new file mode 100644 index 00000000000..80d4e9696c5 Binary files /dev/null and b/docs/public/static/toolpad/docs/building-ui/ui-7.png differ diff --git a/docs/public/static/toolpad/docs/building-ui/ui-8.png b/docs/public/static/toolpad/docs/building-ui/ui-8.png new file mode 100644 index 00000000000..9f50b7c3fe3 Binary files /dev/null and b/docs/public/static/toolpad/docs/building-ui/ui-8.png differ diff --git a/docs/public/static/toolpad/docs/building-ui/ui-9.png b/docs/public/static/toolpad/docs/building-ui/ui-9.png new file mode 100644 index 00000000000..eb585167f49 Binary files /dev/null and b/docs/public/static/toolpad/docs/building-ui/ui-9.png differ diff --git a/docs/public/static/toolpad/docs/canvas-columns.png b/docs/public/static/toolpad/docs/canvas-columns.png deleted file mode 100644 index ffecd722e19..00000000000 Binary files a/docs/public/static/toolpad/docs/canvas-columns.png and /dev/null differ diff --git a/docs/public/static/toolpad/docs/canvas-grid.png b/docs/public/static/toolpad/docs/canvas-grid.png deleted file mode 100644 index a70be63f7a8..00000000000 Binary files a/docs/public/static/toolpad/docs/canvas-grid.png and /dev/null differ diff --git a/docs/public/static/toolpad/docs/canvas-move.png b/docs/public/static/toolpad/docs/canvas-move.png deleted file mode 100644 index b93bca1a9c4..00000000000 Binary files a/docs/public/static/toolpad/docs/canvas-move.png and /dev/null differ diff --git a/docs/public/static/toolpad/docs/canvas-rows.png b/docs/public/static/toolpad/docs/canvas-rows.png deleted file mode 100644 index f71f9c45048..00000000000 Binary files a/docs/public/static/toolpad/docs/canvas-rows.png and /dev/null differ diff --git a/docs/public/static/toolpad/docs/canvas-selected.png b/docs/public/static/toolpad/docs/canvas-selected.png deleted file mode 100644 index 4a2c0cd8408..00000000000 Binary files a/docs/public/static/toolpad/docs/canvas-selected.png and /dev/null differ diff --git a/docs/public/static/toolpad/docs/component-library.png b/docs/public/static/toolpad/docs/component-library.png deleted file mode 100644 index 2554ba9cfff..00000000000 Binary files a/docs/public/static/toolpad/docs/component-library.png and /dev/null differ diff --git a/docs/public/static/toolpad/docs/custom-component-1.png b/docs/public/static/toolpad/docs/custom-component-1.png deleted file mode 100644 index 9c3ddb5240d..00000000000 Binary files a/docs/public/static/toolpad/docs/custom-component-1.png and /dev/null differ diff --git a/docs/public/static/toolpad/docs/custom-component-2.png b/docs/public/static/toolpad/docs/custom-component-2.png deleted file mode 100644 index 11db3f6e013..00000000000 Binary files a/docs/public/static/toolpad/docs/custom-component-2.png and /dev/null differ diff --git a/docs/public/static/toolpad/docs/custom-component-3.png b/docs/public/static/toolpad/docs/custom-component-3.png deleted file mode 100644 index 3f42928335c..00000000000 Binary files a/docs/public/static/toolpad/docs/custom-component-3.png and /dev/null differ diff --git a/docs/public/static/toolpad/docs/inspector.png b/docs/public/static/toolpad/docs/inspector.png deleted file mode 100644 index 825e1596450..00000000000 Binary files a/docs/public/static/toolpad/docs/inspector.png and /dev/null differ diff --git a/docs/public/static/toolpad/docs/sx-editor.png b/docs/public/static/toolpad/docs/sx-editor.png deleted file mode 100644 index 15ed7f158df..00000000000 Binary files a/docs/public/static/toolpad/docs/sx-editor.png and /dev/null differ diff --git a/docs/public/static/toolpad/docs/sx.png b/docs/public/static/toolpad/docs/sx.png deleted file mode 100644 index a819753fe38..00000000000 Binary files a/docs/public/static/toolpad/docs/sx.png and /dev/null differ