js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

update examples

Browse Source
This commit is contained in:
Cory LaViska
2022-08-09 11:00:04 -04:00
parent 801c4f70ec
commit 147d1f048b
1 changed files with 20 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
docs/components/popup.md
View File

@@ -4,9 +4,9 @@
Popup is a utility that lets you declaratively anchor "popup" containers to another element.
This component's name is inspired by [`<popup>`](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Popup/explainer.md). It uses [Floating UI](https://floating-ui.com/) under the hood to provide a well-tested, lightweight, powerful, and fully declarative positioning utility for tooltips, dropdowns, and more.
This component's name is inspired by [`<popup>`](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Popup/explainer.md). It uses [Floating UI](https://floating-ui.com/) under the hood to provide a well-tested, lightweight, and fully declarative positioning utility for tooltips, dropdowns, and more.
The popup's preferred placement, distance, and skidding (offset) can be configured using attributes. An arrow that points to the anchor can also be shown and customized to your liking. Additional positioning options are described in more detail below.
The popup's preferred placement, distance, and skidding (offset) can be configured using attributes. An arrow that points to the anchor can be shown and customized to your liking. Additional positioning options are available and described in more detail below.
```html preview
<div class="popup-overview">
@@ -70,9 +70,10 @@ The popup's preferred placement, distance, and skidding (offset) can be configur
}
.popup-overview .box {
width: 50px;
width: 100px;
height: 50px;
background: var(--sl-color-primary-600);
border-radius: var(--sl-border-radius-medium);
}
.popup-overview-options {
@@ -125,9 +126,10 @@ Popups are inactive and hidden until the `active` attribute is applied. Removing
}
.popup-active .box {
width: 50px;
width: 100px;
height: 50px;
background: var(--sl-color-primary-600);
border-radius: var(--sl-border-radius-medium);
}
</style>
@@ -177,9 +179,10 @@ Use the `placement` attribute to tell the popup the preferred placement of the p
}
.popup-placement .box {
width: 50px;
width: 100px;
height: 50px;
background: var(--sl-color-primary-600);
border-radius: var(--sl-border-radius-medium);
}
.popup-placement sl-select {
@@ -220,9 +223,10 @@ Use the `distance` attribute to change the distance between the popup and its an
}
.popup-distance .box {
width: 50px;
width: 100px;
height: 50px;
background: var(--sl-color-primary-600);
border-radius: var(--sl-border-radius-medium);
}
.popup-distance sl-range {
@@ -263,9 +267,10 @@ The `skidding` attribute is similar to `distance`, but instead allows you to off
}
.popup-skidding .box {
width: 50px;
width: 100px;
height: 50px;
background: var(--sl-color-primary-600);
border-radius: var(--sl-border-radius-medium);
}
.popup-skidding sl-range {
@@ -311,9 +316,10 @@ Add an arrow to your popup with the `arrow` attribute. It's usually a good idea
}
.popup-arrow .box {
width: 50px;
width: 100px;
height: 50px;
background: var(--sl-color-primary-600);
border-radius: var(--sl-border-radius-medium);
}
</style>
@@ -365,9 +371,10 @@ Toggle the switch and scroll the container to see the difference.
}
.popup-strategy .box {
width: 50px;
width: 100px;
height: 50px;
background: var(--sl-color-primary-600);
border-radius: var(--sl-border-radius-medium);
}
.popup-strategy sl-switch {
@@ -417,9 +424,10 @@ Scroll the container to see how the popup flips to prevent clipping.
}
.popup-flip .box {
width: 50px;
width: 100px;
height: 50px;
background: var(--sl-color-primary-600);
border-radius: var(--sl-border-radius-medium);
}
</style>
```
@@ -461,6 +469,7 @@ Toggle the switch to see the difference.
width: 300px;
height: 50px;
background: var(--sl-color-primary-600);
border-radius: var(--sl-border-radius-medium);
}
</style>
@@ -516,6 +525,7 @@ Scroll the container to see auto-size in action.
width: 100%;
height: 100%;
background: var(--sl-color-primary-600);
border-radius: var(--sl-border-radius-medium);
}
</style>
```