diff --git a/docs/assets/plugins/code-block/code-block.css b/docs/assets/plugins/code-block/code-block.css index c4d9060a26..8b08e0d136 100644 --- a/docs/assets/plugins/code-block/code-block.css +++ b/docs/assets/plugins/code-block/code-block.css @@ -64,15 +64,12 @@ display: none; } -.code-block__source pre { - margin: 0; +.code-block--expanded .code-block__source { + display: block; } -.code-block--expanded.code-block--show-html .code-block__source--html, -.code-block--expanded.code-block--show-react .code-block__source--react, -/* When a code block is expanded but doesn't have a React example, force the HTML example to show */ -.code-block--expanded:not(.code-block--has-react) .code-block__source--html { - display: block; +.code-block__source pre { + margin: 0; } .code-block__buttons { @@ -220,3 +217,23 @@ background-color: rgb(var(--sl-color-neutral-600)); transform: scale(0.92); } + +/* We can apply data-flavor="html|react" to any element on the page to toggle it when the user's flavor changes */ +body.flavor-html [data-flavor]:not([data-flavor='html']) { + display: none; +} + +body.flavor-react [data-flavor]:not([data-flavor='react']) { + display: none; +} + +/* +.code-block--expanded.code-block--show-html .code-block__source--html, +.code-block--expanded.code-block--show-react .code-block__source--react, + +When a code block is expanded but doesn't have a React example, force the HTML example to show + +.code-block--expanded:not(.code-block--has-react) .code-block__source--html { + display: block; +} +*/ diff --git a/docs/assets/plugins/code-block/code-block.js b/docs/assets/plugins/code-block/code-block.js index 82318e495b..b5f4d03b40 100644 --- a/docs/assets/plugins/code-block/code-block.js +++ b/docs/assets/plugins/code-block/code-block.js @@ -1,8 +1,11 @@ (() => { const reactVersion = '17.0.2'; - let flavor = localStorage.getItem('flavor') || 'html'; // "html" or "react" + let flavor = getFlavor(); let count = 1; + // Sync flavor UI on page load + setFlavor(getFlavor()); + if (!window.$docsify) { throw new Error('Docsify must be loaded before installing this plugin.'); } @@ -45,6 +48,19 @@ script.parentNode.replaceChild(newScript, script); } + function getFlavor() { + return localStorage.getItem('flavor') || 'html'; + } + + function setFlavor(newFlavor) { + flavor = ['html', 'react'].includes(newFlavor) ? newFlavor : 'html'; + localStorage.setItem('flavor', flavor); + + // Set the flavor class on the body + document.body.classList.toggle('flavor-html', flavor === 'html'); + document.body.classList.toggle('flavor-react', flavor === 'react'); + } + function wrap(el, wrapper) { el.parentNode.insertBefore(wrapper, el); wrapper.appendChild(el); @@ -114,7 +130,7 @@ pre.setAttribute('aria-labelledby', toggleId); const codeBlock = ` -
${escapeHtml(event.name)}
${escapeHtml(event.name)}
${escapeHtml(event.reactName)}
${escapeHtml(event.type?.text)}` : '-'}
+ Methods can be called by obtaining a reference to the element and calling
+ el.methodName()
.
+
+ Methods can be called by obtaining a ref
to the element and calling
+ ref.current.methodName()
.
+