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

Add top and bottom placement to drawer

Browse Source
This commit is contained in:
Cory LaViska
2020-07-13 15:57:08 -04:00
parent 8aa72caf6b
commit 04e14a555d
5 changed files with 95 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/assets/plugins/metadata/metadata.js
View File

@@ -19,7 +19,7 @@
prop => `
<tr>
<td><code>${escapeHtml(prop.name)}</code></td>
<td><code>${escapeHtml(prop.attr)}</code></td>
<td><code style="white-space: nowrap;">${escapeHtml(prop.attr)}</code></td>
<td>${escapeHtml(prop.docs)}</td>
<td><code>${escapeHtml(prop.type)}</code></td>
<td><code>${escapeHtml(prop.default)}</code></td>
@@ -129,7 +129,7 @@
.map(
style => `
<tr>
<td><code>${escapeHtml(style.name)}</code></td>
<td><code style="white-space: nowrap;">${escapeHtml(style.name)}</code></td>
<td>${escapeHtml(style.docs)}</td>
</tr>
`

68
docs/components/drawer.md
View File

@@ -2,7 +2,7 @@
[component-header:sl-drawer]
Drawers slide out from a container to expose additional options and information.
Drawers slide in from a container to expose additional options and information.
```html preview
<sl-drawer label="Drawer" class="drawer-overview">
@@ -26,12 +26,12 @@ Drawers slide out from a container to expose additional options and information.
## Examples
### Placement
### Slide in From Left
Drawers slide out from the right by default. To slide them out from the left, use the `placement` attribute.
To make the drawer slide in from the left, set the `placement` attribute to `left`.
```html preview
<sl-drawer label="Drawer" placement="left" class="drawer-placement">
<sl-drawer label="Drawer" placement="left" class="drawer-placement-left">
This drawer slides in from the left.
<sl-button slot="footer" type="primary">Close</sl-button>
</sl-drawer>
@@ -40,7 +40,55 @@ Drawers slide out from the right by default. To slide them out from the left, us
<script>
(() => {
const drawer = document.querySelector('.drawer-placement');
const drawer = document.querySelector('.drawer-placement-left');
const openButton = drawer.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[type="primary"]');
openButton.addEventListener('click', () => drawer.show());
closeButton.addEventListener('click', () => drawer.hide());
})();
</script>
```
### Slide in From Top
To make the drawer slide in from the top, set the `placement` attribute to `top`.
```html preview
<sl-drawer label="Drawer" placement="top" class="drawer-placement-top">
This drawer slides in from the top.
<sl-button slot="footer" type="primary">Close</sl-button>
</sl-drawer>
<sl-button>Open Drawer</sl-button>
<script>
(() => {
const drawer = document.querySelector('.drawer-placement-top');
const openButton = drawer.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[type="primary"]');
openButton.addEventListener('click', () => drawer.show());
closeButton.addEventListener('click', () => drawer.hide());
})();
</script>
```
### Slide in From Bottom
To make the drawer slide in from the bottom, set the `placement` attribute to `bottom`.
```html preview
<sl-drawer label="Drawer" placement="bottom" class="drawer-placement-bottom">
This drawer slides in from the bottom.
<sl-button slot="footer" type="primary">Close</sl-button>
</sl-drawer>
<sl-button>Open Drawer</sl-button>
<script>
(() => {
const drawer = document.querySelector('.drawer-placement-bottom');
const openButton = drawer.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[type="primary"]');
@@ -60,7 +108,7 @@ By default, the drawer slides out of its [containing block](https://developer.mo
>
The drawer will be contained to this box. This content won't shift or be affected in any way when the drawer opens.
<sl-drawer label="Drawer" contained class="drawer-contained" style="--width: 50%;">
<sl-drawer label="Drawer" contained class="drawer-contained" style="--size: 50%;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<sl-button slot="footer" type="primary">Close</sl-button>
</sl-drawer>
@@ -80,12 +128,12 @@ By default, the drawer slides out of its [containing block](https://developer.mo
</script>
```
### Custom Width
### Custom Size
Use the `--width` custom property to set the drawer's width.
Use the `--size` custom property to set the drawer's size. This will be applied to the drawer's width or height depending on its `placement`.
```html preview
<sl-drawer label="Drawer" class="drawer-custom-width" style="--width: 50vw;">
<sl-drawer label="Drawer" class="drawer-custom-size" style="--size: 50vw;">
This drawer is always 50% of the viewport.
<sl-button slot="footer" type="primary">Close</sl-button>
</sl-drawer>
@@ -94,7 +142,7 @@ Use the `--width` custom property to set the drawer's width.
<script>
(() => {
const drawer = document.querySelector('.drawer-custom-width');
const drawer = document.querySelector('.drawer-custom-size');
const openButton = drawer.nextElementSibling;
const closeButton = drawer.querySelector('sl-button[type="primary"]');

4
src/components.d.ts vendored
View File

@@ -242,7 +242,7 @@ export namespace Components {
/**
* The direction from which the drawer will open.
*/
"placement": 'left' | 'right';
"placement": 'top' | 'right' | 'bottom' | 'left';
/**
* Shows the drawer
*/
@@ -1336,7 +1336,7 @@ declare namespace LocalJSX {
/**
* The direction from which the drawer will open.
*/
"placement"?: 'left' | 'right';
"placement"?: 'top' | 'right' | 'bottom' | 'left';
}
interface SlDropdown {
/**

41
src/components/drawer/drawer.scss
View File

@@ -1,10 +1,11 @@
@import 'component';
/**
* @prop --width: The preferred width of the drawer. Note that the drawer will shrink to accommodate smaller screens.
* @prop --size: The preferred size of the drawer. This will be applied to the drawer's width or height depending on its
* `placement`. Note that the drawer will shrink to accommodate smaller screens.
*/
:host {
--width: 25rem;
--size: 25rem;
display: contents;
}
@@ -34,12 +35,8 @@
.drawer__panel {
position: absolute;
top: 0;
height: 100%;
display: flex;
flex-direction: column;
width: var(--width);
height: 100%;
z-index: 2;
background-color: var(--sl-color-white);
box-shadow: var(--sl-shadow-x-large);
@@ -52,20 +49,40 @@
}
}
.drawer--left .drawer__panel {
right: auto;
.drawer--top .drawer__panel {
top: 0;
left: 0;
transform: translateX(-100%);
width: 100%;
height: var(--size);
transform: translate(0, -100%);
}
.drawer--right .drawer__panel {
top: 0;
right: 0;
left: auto;
transform: translateX(100%);
width: var(--size);
height: 100%;
transform: translate(100%, 0);
}
.drawer--bottom .drawer__panel {
bottom: 0;
left: 0;
width: 100%;
height: var(--size);
transform: translate(0, 100%);
}
.drawer--left .drawer__panel {
top: 0;
left: 0;
width: var(--size);
height: 100%;
transform: translate(-100%, 0);
}
.drawer--open .drawer__panel {
transform: translateX(0);
transform: translate(0, 0);
}
.drawer__header {

6
src/components/drawer/drawer.tsx
View File

@@ -50,7 +50,7 @@ export class Drawer {
@Prop() label = '';
/** The direction from which the drawer will open. */
@Prop() placement: 'left' | 'right' = 'right';
@Prop() placement: 'top' | 'right' | 'bottom' | 'left' = 'right';
/**
* By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of
@@ -187,8 +187,10 @@ export class Drawer {
class={{
drawer: true,
'drawer--open': this.open,
'drawer--left': this.placement === 'left',
'drawer--top': this.placement === 'top',
'drawer--right': this.placement === 'right',
'drawer--bottom': this.placement === 'bottom',
'drawer--left': this.placement === 'left',
'drawer--contained': this.contained,
'drawer--fixed': !this.contained
}}