yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update outdated docs for <umb-debug>

Browse Source 
Adjustments for the Storybook docs about umb-debug, I guess it would be valuable to move them into the official docs in the future but this ensures to reflect the change of the property `enabled` to `visible`
This commit is contained in:
Enkel Media
2024-04-05 08:36:57 +02:00
committed by Jacob Overgaard
parent 94ef1e131d
commit b343f6846a
1 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/Umbraco.Web.UI.Client/src/packages/core/debug/stories/debug.mdx
View File

@@ -16,24 +16,24 @@ This can help with the developer experience to quickly see what is available to
### Usage
The `<umb-debug>` component can be used in two different ways, either as a button or as a dialog. By default it is rendered as a button and the debug information about available contexts is dissplayed inline to where the element is placed.
The `<umb-debug>` component can be used in two different ways, either as a button or as a dialog. By default it is rendered as a button and the debug information about available contexts is displayed inline to where the `umb-debug` element is placed.
<img src={DebugImage} width="100%" />
```typescript
// This will add a Debug button to the UI and once clicked the information about avilable contextes will slide down
<umb-debug enabled></umb-debug>
<umb-debug visible></umb-debug>
```
#### Dialog
This example uses an additional property/attribute `dialog` which adds a smaller badge to the UI as opposed to a button and will open the information in a small dialog/modal from the right hand side, this may be more useful to use when space is limited in the UI to add a button and pane of information directly to where the element is placed.
This example uses an additional property/attribute `dialog` which adds a smaller badge to the UI as opposed to a button and will open the information in a dialog/modal on the right hand side, this may be more useful to use when space is limited in the UI to add a button and pane of information directly to where the element is placed.
<img src={DebugDialogImage} width="100%" />
```typescript
// This will open the debug information in a small dialog/modal from the right hand side
<umb-debug enabled dialog></umb-debug>
<umb-debug visible dialog></umb-debug>
```
#### Disable
@@ -41,6 +41,8 @@ This example uses an additional property/attribute `dialog` which adds a smaller
You may wish to temporarily hide or disable the debug information but return to it later on in the development process.
```typescript
// To hide or remove the button ensure you remove the enabled attribute or set the enabled property to false
// To hide or remove the button ensure you remove the `visible` attribute or set it to false
<umb-debug></umb-debug>
<umb-debug ?visible=${false}></umb-debug>
```