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

add expanded support

Browse Source
This commit is contained in:
Cory LaViska
2021-11-16 10:49:26 -05:00
parent da7a177599
commit bfe506dbf3
2 changed files with 10 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
docs/assets/plugins/code-block/code-block.js
View File

@@ -113,6 +113,7 @@
[...doc.querySelectorAll('code[class^="lang-"]')].map(code => {
if (code.classList.contains('preview')) {
const isExpanded = code.classList.contains('expanded');
const pre = code.closest('pre');
const sourceGroupId = `code-block-source-group-${count}`;
const toggleId = `code-block-toggle-${count}`;
@@ -129,7 +130,7 @@
pre.setAttribute('aria-labelledby', toggleId);
const codeBlock = `
<div class="code-block">
<div class="code-block ${isExpanded ? 'code-block--expanded' : ''}">
<div class="code-block__preview">
${code.textContent}
<div class="code-block__resizer">
@@ -156,7 +157,12 @@
<div class="code-block__buttons">
${hasReact ? ` ${htmlButton} ${reactButton} ` : ''}
<button type="button" class="code-block__button code-block__toggle" aria-expanded="false" aria-controls="${sourceGroupId}">
<button
type="button"
class="code-block__button code-block__toggle"
aria-expanded="${isExpanded ? 'true' : 'false'}"
aria-controls="${sourceGroupId}"
>
Source
<svg
viewBox="0 0 24 24"

4
docs/getting-started/overview.md
View File

@@ -37,11 +37,11 @@ Add the following code to your page.
Now you have access to all of Shoelace's components! Try adding a button:
```html
```html preview expanded
<sl-button>Click me</sl-button>
```
This will load all of Shoelace's components, but you should probably only load the ones you're actually using. To learn how, or for other ways to install Shoelace, refer to the [installation instructions](getting-started/installation).
?> This will load all of Shoelace's components, but you should probably only load the ones you're actually using. To learn how, or for other ways to install Shoelace, refer to the [installation instructions](getting-started/installation).
## New to Web Components?