From c0ce2f91e51cb4c221c65a32441bd0a88b6a50bb Mon Sep 17 00:00:00 2001 From: Hawk Ticehurst Date: Wed, 3 Nov 2021 15:58:02 -0700 Subject: [PATCH 1/2] Update panel documentation to discuss panel views as flexbox containers --- src/panels/README.md | 79 +++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 78 insertions(+), 1 deletion(-) diff --git a/src/panels/README.md b/src/panels/README.md index 556a8799..e2d4696f 100644 --- a/src/panels/README.md +++ b/src/panels/README.md @@ -22,12 +22,89 @@ None ## Usage -❗️❗️❗️ Important ❗️❗️❗️ +**❗️❗️❗️ Important ❗️❗️❗️** An aria-label of "Panels" is automatically defined on all panels components so they are technically accessible out of the box. However, a descriptive and meaningful label that fits the use case or context of the panels component should always be defined to replace the default label so those viewing your panels component with a screen reader can better understand the meaning of what's being displayed. For example, if you're using a panels component to display photos of puppies and kittens, adding an aria-label with the value "Puppy and Kitten Photos" would be appropriate. +**A Note About Panel Views** + +Panel view containers are rendered as a CSS [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) with default values––they will automatically flow any content contained within them horizontally starting from the left side of the container. + +This behavior can be overridden, however, by adding custom styles to all `` components or individual components. Below are a couple of examples for common overrides that may be desired. + +To completely opt out of `` components rendering as flexbox containers: + +```css +vscode-panel-view { + display: block; +} +``` + +To make the content flow vertically: + +```css +vscode-panel-view { + flex-direction: column; +} +``` + +To center the content within the container: + +```css +vscode-panel-view { + justify-content: center; + align-items: center; +} +``` + +To apply styling to one `` component: + +```html + + ...panel tabs... + Problems content. + Output content. + Debug content. + Terminal content. + +``` + +```css +#view-1 { + justify-content: center; + align-items: center; +} +``` + +To apply styling to multiple `` components (but not all): + +```html + + ...panel tabs... + Problems content. + + Output content. + + + Debug content. + + + Terminal content. + + +``` + +```css +.custom-styles { + justify-content: center; + align-items: center; +} +``` + +_Finally, an important detail to be aware of is that `
` tags are [known to not to play well with flexboxes](https://stackoverflow.com/questions/45087054/br-is-not-friendly-with-the-flexbox). So if you absolutely need that tag you should likely opt out of the default flexbox behavior._ + ### Basic Usage [Interactive Storybook Example](https://microsoft.github.io/vscode-webview-ui-toolkit/?path=/story/library-panels--default) From b615ce5813c60eda171653c2306683a374ee386e Mon Sep 17 00:00:00 2001 From: Hawk Ticehurst Date: Wed, 3 Nov 2021 16:09:59 -0700 Subject: [PATCH 2/2] Fix typo --- src/panels/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/panels/README.md b/src/panels/README.md index e2d4696f..7b109c9a 100644 --- a/src/panels/README.md +++ b/src/panels/README.md @@ -30,7 +30,7 @@ For example, if you're using a panels component to display photos of puppies and **A Note About Panel Views** -Panel view containers are rendered as a CSS [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) with default values––they will automatically flow any content contained within them horizontally starting from the left side of the container. +Panel view components are rendered as a CSS [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) with default values––they will automatically flow any content contained within them horizontally starting from the left side of the container. This behavior can be overridden, however, by adding custom styles to all `` components or individual components. Below are a couple of examples for common overrides that may be desired.