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 examples; closes #112

Browse Source
This commit is contained in:
Cory LaViska
2024-05-31 11:20:24 -04:00
parent c69de376df
commit a1e9192db7
5 changed files with 269 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/docs/components/card.md
View File

@@ -130,7 +130,7 @@ const App = () => (
### Card with Header
Headers can be used to display titles and more.
Headers can be used to display titles and more. Use the `with-header` attribute to add a header to the card.
```html {.example}
<wa-card with-header class="card-header">
@@ -206,7 +206,7 @@ const App = () => (
### Card with Footer
Footers can be used to display actions, summaries, or other relevant content.
Footers can be used to display actions, summaries, or other relevant content. Use the `with-footer` attribute to add a footer to the card.
```html {.example}
<wa-card with-footer class="card-footer">
@@ -269,7 +269,7 @@ const App = () => (
### Images
Cards accept an `image` slot. The image is displayed atop the card and stretches to fit.
Card images are displayed atop the card and will stretch to fit. Use the `with-image` attribute to add an image to the card.
```html {.example}
<wa-card with-image class="card-image">

131
docs/docs/components/dialog.md
View File

@@ -49,6 +49,137 @@ const App = () => {
## Examples
### Dialog with Header
Headers can be used to display titles and more. Use the `with-header` attribute to add a header to the dialog.
```html {.example}
<wa-dialog label="Dialog" with-header class="dialog-header">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</wa-dialog>
<wa-button>Open Dialog</wa-button>
<script>
const dialog = document.querySelector('.dialog-header');
const openButton = dialog.nextElementSibling;
openButton.addEventListener('click', () => dialog.open = true);
</script>
```
{% raw %}
```jsx {.react}
import { useState } from 'react';
import WaButton from '@shoelace-style/shoelace/dist/react/button';
import WaDialog from '@shoelace-style/shoelace/dist/react/dialog';
const App = () => {
const [open, setOpen] = useState(false);
return (
<>
<WaDialog label="Dialog" with-header open={open} onWaAfterHide={() => setOpen(false)}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</WaDialog>
<WaButton onClick={() => setOpen(true)}>Open Dialog</WaButton>
</>
);
};
```
{% endraw %}
### Dialog with Footer
Footers can be used to display titles and more. Use the `with-footer` attribute to add a footer to the dialog.
```html {.example}
<wa-dialog label="Dialog" with-footer class="dialog-footer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<wa-button slot="footer" variant="brand" data-dialog="dismiss">Close</wa-button>
</wa-dialog>
<wa-button>Open Dialog</wa-button>
<script>
const dialog = document.querySelector('.dialog-footer');
const openButton = dialog.nextElementSibling;
openButton.addEventListener('click', () => dialog.open = true);
</script>
```
{% raw %}
```jsx {.react}
import { useState } from 'react';
import WaButton from '@shoelace-style/shoelace/dist/react/button';
import WaDialog from '@shoelace-style/shoelace/dist/react/dialog';
const App = () => {
const [open, setOpen] = useState(false);
return (
<>
<WaDialog label="Dialog" with-footer open={open} onWaAfterHide={() => setOpen(false)}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<WaButton slot="footer" variant="brand" data-dialog="dismiss">
Close
</WaButton>
</WaDialog>
<WaButton onClick={() => setOpen(true)}>Open Dialog</WaButton>
</>
);
};
```
{% endraw %}
### Dismissing Dialogs
You can add the special `data-dialog="dismiss"` attribute to a button inside the dialog to tell it to close without additional JavaScript. Alternatively, you can set the `open` property to `false` to close the dialog programmatically.
```html {.example}
<wa-dialog label="Dialog" with-header with-footer class="dialog-dismiss">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<wa-button slot="footer" variant="brand" data-dialog="dismiss">Close</wa-button>
</wa-dialog>
<wa-button>Open Dialog</wa-button>
<script>
const dialog = document.querySelector('.dialog-dismiss');
const openButton = dialog.nextElementSibling;
openButton.addEventListener('click', () => dialog.open = true);
</script>
```
{% raw %}
```jsx {.react}
import { useState } from 'react';
import WaButton from '@shoelace-style/shoelace/dist/react/button';
import WaDialog from '@shoelace-style/shoelace/dist/react/dialog';
const App = () => {
const [open, setOpen] = useState(false);
return (
<>
<WaDialog label="Dialog" with-header with-footer open={open} onWaAfterHide={() => setOpen(false)}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<WaButton slot="footer" variant="brand" data-dialog="dismiss">
Close
</WaButton>
</WaDialog>
<WaButton onClick={() => setOpen(true)}>Open Dialog</WaButton>
</>
);
};
```
{% endraw %}
### Custom Width
Use the `--width` custom property to set the dialog's width.

131
docs/docs/components/drawer.md
View File

@@ -49,6 +49,137 @@ const App = () => {
## Examples
### Drawer with Header
Headers can be used to display titles and more. Use the `with-header` attribute to add a header to the drawer.
```html {.example}
<wa-drawer label="Drawer" with-header class="drawer-header">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</wa-drawer>
<wa-button>Open Drawer</wa-button>
<script>
const drawer = document.querySelector('.drawer-header');
const openButton = drawer.nextElementSibling;
openButton.addEventListener('click', () => drawer.open = true);
</script>
```
{% raw %}
```jsx {.react}
import { useState } from 'react';
import WaButton from '@shoelace-style/shoelace/dist/react/button';
import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer';
const App = () => {
const [open, setOpen] = useState(false);
return (
<>
<WaDrawer label="Drawer" with-header open={open} onWaAfterHide={() => setOpen(false)}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</WaDrawer>
<WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
</>
);
};
```
{% endraw %}
### Drawer with Footer
Footers can be used to display titles and more. Use the `with-footer` attribute to add a footer to the drawer.
```html {.example}
<wa-drawer label="Drawer" with-footer class="drawer-footer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<wa-button slot="footer" variant="brand" data-drawer="dismiss">Close</wa-button>
</wa-drawer>
<wa-button>Open Drawer</wa-button>
<script>
const drawer = document.querySelector('.drawer-footer');
const openButton = drawer.nextElementSibling;
openButton.addEventListener('click', () => drawer.open = true);
</script>
```
{% raw %}
```jsx {.react}
import { useState } from 'react';
import WaButton from '@shoelace-style/shoelace/dist/react/button';
import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer';
const App = () => {
const [open, setOpen] = useState(false);
return (
<>
<WaDrawer label="Drawer" with-footer open={open} onWaAfterHide={() => setOpen(false)}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<WaButton slot="footer" variant="brand" data-drawer="dismiss">
Close
</WaButton>
</WaDrawer>
<WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
</>
);
};
```
{% endraw %}
### Dismissing Drawers
You can add the special `data-dialog="dismiss"` attribute to a button inside the drawer to tell it to close without additional JavaScript. Alternatively, you can set the `open` property to `false` to close the drawer programmatically.
```html {.example}
<wa-drawer label="Drawer" with-header with-footer class="drawer-dismiss">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<wa-button slot="footer" variant="brand" data-drawer="dismiss">Close</wa-button>
</wa-drawer>
<wa-button>Open Drawer</wa-button>
<script>
const drawer = document.querySelector('.drawer-dismiss');
const openButton = drawer.nextElementSibling;
openButton.addEventListener('click', () => drawer.open = true);
</script>
```
{% raw %}
```jsx {.react}
import { useState } from 'react';
import WaButton from '@shoelace-style/shoelace/dist/react/button';
import WaDrawer from '@shoelace-style/shoelace/dist/react/drawer';
const App = () => {
const [open, setOpen] = useState(false);
return (
<>
<WaDrawer label="Drawer" with-header with-footer open={open} onWaAfterHide={() => setOpen(false)}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<WaButton slot="footer" variant="brand" data-drawer="dismiss">
Close
</WaButton>
</WaDrawer>
<WaButton onClick={() => setOpen(true)}>Open Drawer</WaButton>
</>
);
};
```
{% endraw %}
### Slide in From Start
By default, drawers slide in from the end. To make the drawer slide in from the start, set the `placement` attribute to `start`.

2
src/components/dialog/dialog.styles.ts
View File

@@ -73,6 +73,7 @@ export default css`
.dialog__header {
flex: 0 0 auto;
display: flex;
flex-wrap: wrap;
}
.dialog__title {
@@ -112,6 +113,7 @@ export default css`
.dialog__footer {
flex: 0 0 auto;
display: flex;
flex-wrap: wrap;
gap: var(--wa-space-xs);
justify-content: end;
padding: var(--footer-spacing);

2
src/components/drawer/drawer.styles.ts
View File

@@ -138,6 +138,7 @@ export default css`
.drawer__header {
display: flex;
flex-wrap: wrap;
}
.drawer__title {
@@ -176,6 +177,7 @@ export default css`
.drawer__footer {
display: flex;
flex-wrap: wrap;
gap: var(--wa-space-xs);
justify-content: end;
padding: var(--footer-spacing);