mirror of
https://github.com/onsonr/nebula.git
synced 2025-03-10 17:29:11 +00:00
deploy: 0b39c95b65c4a74d270620cf1c0edfe7e4c7a89f
This commit is contained in:
prnk28
parent
0849941c01
commit
f400ee5828
21
404.html
21
404.html
@ -92,27 +92,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -98,27 +98,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
|
||||
@ -98,27 +98,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
|
||||
@ -98,27 +98,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
|
||||
@ -92,27 +92,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
|
||||
@ -92,27 +92,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -499,17 +478,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-31">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-32">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-208"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-badge</span><span class="token punctuation">></span></span>Badge<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-badge</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-208"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-214"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-badge</span><span class="token punctuation">></span></span>Badge<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-badge</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-214"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-209"><span class="token keyword">import</span> SlBadge <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/badge'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-215"><span class="token keyword">import</span> SlBadge <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/badge'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlBadge</span></span><span class="token punctuation">></span></span><span class="token plain-text">Badge</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlBadge</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-209"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-215"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -518,7 +497,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-31"
|
||||
aria-controls="code-preview-source-group-32"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -581,18 +560,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-32">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-33">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-210"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-badge</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-badge</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-216"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-badge</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-badge</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-badge</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>success<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Success<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-badge</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-badge</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>neutral<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Neutral<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-badge</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-badge</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Warning<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-badge</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-badge</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-badge</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-210"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-216"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-211"><span class="token keyword">import</span> SlBadge <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/badge'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-217"><span class="token keyword">import</span> SlBadge <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/badge'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -603,7 +582,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlBadge</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Danger</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlBadge</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-211"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-217"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -612,7 +591,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-32"
|
||||
aria-controls="code-preview-source-group-33"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -672,18 +651,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-33">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-34">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-212"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-badge</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">></span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-badge</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-218"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-badge</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">></span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-badge</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-badge</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>success<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">></span></span>Success<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-badge</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-badge</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>neutral<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">></span></span>Neutral<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-badge</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-badge</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">></span></span>Warning<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-badge</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-badge</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">></span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-badge</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-212"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-218"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-213"><span class="token keyword">import</span> SlBadge <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/badge'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-219"><span class="token keyword">import</span> SlBadge <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/badge'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -704,7 +683,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlBadge</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-213"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-219"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -713,7 +692,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-33"
|
||||
aria-controls="code-preview-source-group-34"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -781,9 +760,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-34">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-35">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-214"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>badge-pulse<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-220"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>badge-pulse<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-badge</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span> <span class="token attr-name">pulse</span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-badge</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-badge</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>success<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span> <span class="token attr-name">pulse</span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-badge</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-badge</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>neutral<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span> <span class="token attr-name">pulse</span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-badge</span><span class="token punctuation">></span></span>
|
||||
@ -796,11 +775,11 @@
|
||||
<span class="token property">margin-right</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-214"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-220"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-215"><span class="token keyword">import</span> SlBadge <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/badge'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-221"><span class="token keyword">import</span> SlBadge <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/badge'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||||
.badge-pulse sl-badge:not(:last-of-type) {
|
||||
@ -831,7 +810,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-215"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-221"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -840,7 +819,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-34"
|
||||
aria-controls="code-preview-source-group-35"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -912,9 +891,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-35">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-36">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-216"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-222"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
Requests
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-badge</span> <span class="token attr-name">pill</span><span class="token punctuation">></span></span>30<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-badge</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
@ -928,11 +907,11 @@
|
||||
Errors
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-badge</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">></span></span>6<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-badge</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-216"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-222"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-217"><span class="token keyword">import</span> SlBadge <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/badge'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-223"><span class="token keyword">import</span> SlBadge <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/badge'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -957,7 +936,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-217"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-223"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -966,7 +945,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-35"
|
||||
aria-controls="code-preview-source-group-36"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1029,18 +1008,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-36">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-37">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-218"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 240px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-224"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 240px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-label</span><span class="token punctuation">></span></span>Messages<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-label</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span><span class="token punctuation">></span></span>Comments <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-badge</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>suffix<span class="token punctuation">"</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>neutral<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">></span></span>4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-badge</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span><span class="token punctuation">></span></span>Replies <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-badge</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>suffix<span class="token punctuation">"</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>neutral<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">></span></span>12<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-badge</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-218"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-224"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-219"><span class="token keyword">import</span> SlBadge <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/badge'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-225"><span class="token keyword">import</span> SlBadge <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/badge'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span>
|
||||
@ -1069,7 +1048,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlMenuItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlMenu</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-219"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-225"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1078,7 +1057,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-36"
|
||||
aria-controls="code-preview-source-group-37"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1147,7 +1126,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-220"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/badge/badge.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-220"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-226"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/badge/badge.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-226"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -1162,17 +1141,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-221"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/badge/badge.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-221"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-227"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/badge/badge.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-227"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-222"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/badge/badge.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-222"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-228"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/badge/badge.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-228"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-223"><span class="token keyword">import</span> SlBadge <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/badge'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-223"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-229"><span class="token keyword">import</span> SlBadge <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/badge'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-229"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -95,27 +95,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -506,9 +485,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-37">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-31">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-224"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-breadcrumb</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-208"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-breadcrumb</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-breadcrumb-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>prefix<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>house<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
Home
|
||||
@ -516,11 +495,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-breadcrumb-item</span><span class="token punctuation">></span></span>Clothing<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-breadcrumb-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-breadcrumb-item</span><span class="token punctuation">></span></span>Shirts<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-breadcrumb-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-breadcrumb</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-224"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-208"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-225"><span class="token keyword">import</span> SlBreadcrumb <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/breadcrumb'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-209"><span class="token keyword">import</span> SlBreadcrumb <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/breadcrumb'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlBreadcrumbItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/breadcrumb-item'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -534,7 +513,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlBreadcrumbItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">Shirts</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlBreadcrumbItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlBreadcrumb</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-225"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-209"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -543,7 +522,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-37"
|
||||
aria-controls="code-preview-source-group-31"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -618,7 +597,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-226"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/breadcrumb-item/breadcrumb-item.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-226"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-210"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/breadcrumb-item/breadcrumb-item.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-210"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -633,17 +612,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-227"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/breadcrumb-item/breadcrumb-item.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-227"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-211"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/breadcrumb-item/breadcrumb-item.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-211"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-228"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/breadcrumb-item/breadcrumb-item.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-228"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-212"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/breadcrumb-item/breadcrumb-item.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-212"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-229"><span class="token keyword">import</span> SlBreadcrumbItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/breadcrumb-item'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-229"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-213"><span class="token keyword">import</span> SlBreadcrumbItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/breadcrumb-item'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-213"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -98,27 +98,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
|
||||
@ -92,27 +92,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -505,18 +484,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-58">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-44">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-277"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Alignment<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-246"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Alignment<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span><span class="token punctuation">></span></span>Left<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span><span class="token punctuation">></span></span>Center<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span><span class="token punctuation">></span></span>Right<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button-group</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-277"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-246"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-278"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-247"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlButtonGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button-group'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -526,7 +505,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">Right</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlButtonGroup</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-278"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-247"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -535,7 +514,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-58"
|
||||
aria-controls="code-preview-source-group-44"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -614,9 +593,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-59">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-45">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-279"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Alignment<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-248"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Alignment<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Left<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Center<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Right<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
@ -637,11 +616,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Center<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Right<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button-group</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-279"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-248"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-280"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-249"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlButtonGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button-group'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -671,7 +650,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlButtonGroup</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-280"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-249"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -680,7 +659,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-59"
|
||||
aria-controls="code-preview-source-group-45"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -772,9 +751,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-60">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-46">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-281"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Alignment<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-250"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Alignment<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Left<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Center<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Right<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
@ -811,11 +790,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Center<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Right<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button-group</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-281"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-250"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-282"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-251"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlButtonGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button-group'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -863,7 +842,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlButtonGroup</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-282"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-251"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -872,7 +851,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-60"
|
||||
aria-controls="code-preview-source-group-46"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -948,9 +927,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-61">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-47">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-283"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Alignment<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-252"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Alignment<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">></span></span>Left<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">></span></span>Center<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">></span></span>Right<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
@ -971,11 +950,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">></span></span>Center<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">></span></span>Right<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button-group</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-283"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-252"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-284"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-253"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlButtonGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button-group'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -1023,7 +1002,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlButtonGroup</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-284"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-253"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1032,7 +1011,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-61"
|
||||
aria-controls="code-preview-source-group-47"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1105,9 +1084,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-62">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-48">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-285"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Example Button Group<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-254"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Example Button Group<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span><span class="token punctuation">></span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span><span class="token punctuation">></span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-dropdown</span><span class="token punctuation">></span></span>
|
||||
@ -1119,11 +1098,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-dropdown</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button-group</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-285"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-254"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-286"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-255"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlButtonGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button-group'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlDropdown <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/dropdown'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
|
||||
@ -1145,7 +1124,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlDropdown</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlButtonGroup</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-286"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-255"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1154,7 +1133,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-62"
|
||||
aria-controls="code-preview-source-group-48"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1226,9 +1205,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-63">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-49">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-287"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Example Button Group<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-256"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Example Button Group<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Save<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-dropdown</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bottom-end<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>trigger<span class="token punctuation">"</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">caret</span><span class="token punctuation">></span></span>
|
||||
@ -1241,11 +1220,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-dropdown</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button-group</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-287"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-256"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-288"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-257"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlButtonGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button-group'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlDropdown <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/dropdown'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
|
||||
@ -1264,7 +1243,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlDropdown</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlButtonGroup</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-288"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-257"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1273,7 +1252,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-63"
|
||||
aria-controls="code-preview-source-group-49"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1344,9 +1323,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-64">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-50">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-289"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Alignment<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-258"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Alignment<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>I'm on the left<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span><span class="token punctuation">></span></span>Left<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tooltip</span><span class="token punctuation">></span></span>
|
||||
@ -1359,11 +1338,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span><span class="token punctuation">></span></span>Right<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tooltip</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button-group</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-289"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-258"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-290"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-259"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlButtonGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button-group'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlTooltip <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tooltip'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -1384,7 +1363,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlButtonGroup</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-290"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-259"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1393,7 +1372,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-64"
|
||||
aria-controls="code-preview-source-group-50"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1488,9 +1467,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-65">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-51">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-291"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button-group-toolbar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-260"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button-group-toolbar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>History<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Undo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>arrow-counterclockwise<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Undo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
@ -1530,11 +1509,11 @@
|
||||
<span class="token property">margin-right</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-spacing-x-small<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-291"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-260"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-292"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-261"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlButtonGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button-group'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlTooltip <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tooltip'</span><span class="token punctuation">;</span>
|
||||
@ -1601,7 +1580,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-292"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-261"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1610,7 +1589,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-65"
|
||||
aria-controls="code-preview-source-group-51"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1679,7 +1658,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-293"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/button-group/button-group.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-293"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-262"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/button-group/button-group.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-262"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -1694,17 +1673,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-294"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/button-group/button-group.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-294"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-263"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/button-group/button-group.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-263"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-295"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/button-group/button-group.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-295"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-264"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/button-group/button-group.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-264"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-296"><span class="token keyword">import</span> SlButtonGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button-group'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-296"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-265"><span class="token keyword">import</span> SlButtonGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button-group'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-265"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -92,27 +92,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -510,17 +489,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-44">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-52">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-246"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span><span class="token punctuation">></span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-246"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-266"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span><span class="token punctuation">></span></span>Button<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-266"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-247"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-267"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">Button</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-247"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-267"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -529,7 +508,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-44"
|
||||
aria-controls="code-preview-source-group-52"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -593,19 +572,19 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-45">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-53">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-248"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Default<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-268"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Default<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>success<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Success<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>neutral<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Neutral<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Warning<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-248"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-268"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-249"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-269"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -617,7 +596,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlButton</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Danger</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-249"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-269"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -626,7 +605,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-45"
|
||||
aria-controls="code-preview-source-group-53"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -682,16 +661,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-46">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-54">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-250"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-270"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Medium<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Large<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-250"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-270"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-251"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-271"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -700,7 +679,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlButton</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Large</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-251"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-271"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -709,7 +688,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-46"
|
||||
aria-controls="code-preview-source-group-54"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -770,19 +749,19 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-47">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-55">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-252"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span> <span class="token attr-name">outline</span><span class="token punctuation">></span></span>Default<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-272"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span> <span class="token attr-name">outline</span><span class="token punctuation">></span></span>Default<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">outline</span><span class="token punctuation">></span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>success<span class="token punctuation">"</span></span> <span class="token attr-name">outline</span><span class="token punctuation">></span></span>Success<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>neutral<span class="token punctuation">"</span></span> <span class="token attr-name">outline</span><span class="token punctuation">></span></span>Neutral<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span> <span class="token attr-name">outline</span><span class="token punctuation">></span></span>Warning<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span> <span class="token attr-name">outline</span><span class="token punctuation">></span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-252"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-272"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-253"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-273"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -806,7 +785,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-253"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-273"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -815,7 +794,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-47"
|
||||
aria-controls="code-preview-source-group-55"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -873,16 +852,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-48">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-56">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-254"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">></span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-274"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">></span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">></span></span>Medium<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">></span></span>Large<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-254"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-274"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-255"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-275"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -897,7 +876,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-255"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-275"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -906,7 +885,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-48"
|
||||
aria-controls="code-preview-source-group-56"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -975,9 +954,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-49">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-57">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-256"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">circle</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-276"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">circle</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gear<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Settings<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
|
||||
@ -988,11 +967,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span> <span class="token attr-name">circle</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gear<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Settings<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-256"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-276"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-257"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-277"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -1008,7 +987,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-257"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-277"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1017,7 +996,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-49"
|
||||
aria-controls="code-preview-source-group-57"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1078,16 +1057,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-50">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-58">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-258"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Text<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-278"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Text<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Text<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Text<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-258"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-278"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-259"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-279"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -1102,7 +1081,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-259"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-279"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1111,7 +1090,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-50"
|
||||
aria-controls="code-preview-source-group-58"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1175,17 +1154,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-51">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-59">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-260"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://example.com/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-280"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://example.com/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Link<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://example.com/<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>New Window<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/assets/images/wordmark.svg<span class="token punctuation">"</span></span> <span class="token attr-name">download</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>shoelace.svg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Download<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://example.com/<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>Disabled<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-260"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-280"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-261"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-281"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -1201,7 +1180,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-261"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-281"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1210,7 +1189,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-51"
|
||||
aria-controls="code-preview-source-group-59"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1286,16 +1265,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-52">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-60">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-262"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-282"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Medium<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Large<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-262"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-282"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-263"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-283"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -1310,7 +1289,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-263"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-283"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1319,7 +1298,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-52"
|
||||
aria-controls="code-preview-source-group-60"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1428,9 +1407,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-53">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-61">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-264"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-284"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>prefix<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gear<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
Settings
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
@ -1481,11 +1460,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>suffix<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box-arrow-up-right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
Open
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-264"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-284"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-265"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-285"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -1545,7 +1524,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-265"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-285"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1554,7 +1533,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-53"
|
||||
aria-controls="code-preview-source-group-61"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1613,16 +1592,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-54">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-62">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-266"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">caret</span><span class="token punctuation">></span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-286"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">caret</span><span class="token punctuation">></span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span> <span class="token attr-name">caret</span><span class="token punctuation">></span></span>Medium<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span> <span class="token attr-name">caret</span><span class="token punctuation">></span></span>Large<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-266"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-286"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-267"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-287"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -1637,7 +1616,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-267"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-287"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1646,7 +1625,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-54"
|
||||
aria-controls="code-preview-source-group-62"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1710,19 +1689,19 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-55">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-63">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-268"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token punctuation">></span></span>Default<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-288"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token punctuation">></span></span>Default<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token punctuation">></span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>success<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token punctuation">></span></span>Success<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>neutral<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token punctuation">></span></span>Neutral<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token punctuation">></span></span>Warning<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span> <span class="token attr-name">loading</span><span class="token punctuation">></span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-268"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-288"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-269"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-289"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -1746,7 +1725,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-269"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-289"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1755,7 +1734,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-55"
|
||||
aria-controls="code-preview-source-group-63"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1816,19 +1795,19 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-56">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-64">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-270"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>Default<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-290"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>default<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>Default<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>success<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>Success<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>neutral<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>Neutral<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>Warning<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-270"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-290"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-271"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-291"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -1857,7 +1836,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-271"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-291"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1866,7 +1845,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-56"
|
||||
aria-controls="code-preview-source-group-64"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1964,9 +1943,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-57">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-65">
|
||||
<div class="code-preview__source code-preview__source--html">
|
||||
<pre><code class="language-html" id="code-block-272"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pink<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Pink Button<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-292"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pink<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Pink Button<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
|
||||
<span class="token selector">sl-button.pink::part(base)</span> <span class="token punctuation">{</span>
|
||||
@ -2003,7 +1982,7 @@
|
||||
<span class="token property">outline-offset</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-272"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-292"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2012,7 +1991,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-57"
|
||||
aria-controls="code-preview-source-group-65"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -2073,7 +2052,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-273"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/button/button.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-273"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-293"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/button/button.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-293"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -2088,17 +2067,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-274"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/button/button.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-274"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-294"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/button/button.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-294"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-275"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/button/button.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-275"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-295"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/button/button.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-295"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-276"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-276"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-296"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-296"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -92,27 +92,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -529,9 +508,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-89">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-66">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-359"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-card</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card-overview<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-297"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-card</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card-overview<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||||
<span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image<span class="token punctuation">"</span></span>
|
||||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80<span class="token punctuation">"</span></span>
|
||||
@ -563,11 +542,11 @@
|
||||
<span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-359"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-297"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-360"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-298"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlCard <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/card'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -611,7 +590,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-360"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-298"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -620,7 +599,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-89"
|
||||
aria-controls="code-preview-source-group-66"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -687,9 +666,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-90">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-67">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-361"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-card</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card-basic<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-299"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-card</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card-basic<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
This is just a basic card. No image, no header, and no footer. Just your content.
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-card</span><span class="token punctuation">></span></span>
|
||||
|
||||
@ -698,11 +677,11 @@
|
||||
<span class="token property">max-width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-361"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-299"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-362"><span class="token keyword">import</span> SlCard <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/card'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-300"><span class="token keyword">import</span> SlCard <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/card'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||||
.card-basic {
|
||||
@ -719,7 +698,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-362"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-300"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -728,7 +707,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-90"
|
||||
aria-controls="code-preview-source-group-67"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -811,9 +790,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-91">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-68">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-363"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-card</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card-header<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-301"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-card</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card-header<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>header<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
Header Title
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon-button</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gear<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Settings<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon-button</span><span class="token punctuation">></span></span>
|
||||
@ -841,11 +820,11 @@
|
||||
<span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-font-size-medium<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-363"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-301"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-364"><span class="token keyword">import</span> SlCard <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/card'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-302"><span class="token keyword">import</span> SlCard <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/card'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlIconButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon-button'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||||
@ -881,7 +860,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-364"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-302"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -890,7 +869,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-91"
|
||||
aria-controls="code-preview-source-group-68"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -965,9 +944,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-92">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-69">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-365"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-card</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card-footer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-303"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-card</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card-footer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
This card has a footer. You can put all sorts of things in it!
|
||||
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
@ -987,11 +966,11 @@
|
||||
<span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-365"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-303"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-366"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-304"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlCard <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/card'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -1022,7 +1001,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-366"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-304"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1031,7 +1010,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-92"
|
||||
aria-controls="code-preview-source-group-69"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1098,9 +1077,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-93">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-70">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-367"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-card</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card-image<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-305"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-card</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>card-image<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||||
<span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image<span class="token punctuation">"</span></span>
|
||||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://images.unsplash.com/photo-1547191783-94d5f8f6d8b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80<span class="token punctuation">"</span></span>
|
||||
@ -1114,11 +1093,11 @@
|
||||
<span class="token property">max-width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-367"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-305"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-368"><span class="token keyword">import</span> SlCard <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/card'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-306"><span class="token keyword">import</span> SlCard <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/card'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||||
.card-image {
|
||||
@ -1140,7 +1119,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-368"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-306"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1149,7 +1128,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-93"
|
||||
aria-controls="code-preview-source-group-70"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1218,7 +1197,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-369"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/card/card.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-369"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-307"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/card/card.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-307"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -1233,17 +1212,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-370"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/card/card.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-370"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-308"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/card/card.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-308"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-371"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/card/card.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-371"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-309"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/card/card.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-309"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-372"><span class="token keyword">import</span> SlCard <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/card'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-372"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-310"><span class="token keyword">import</span> SlCard <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/card'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-310"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -92,27 +92,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -525,9 +504,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-66">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-71">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-297"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel</span> <span class="token attr-name">pagination</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-311"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel</span> <span class="token attr-name">pagination</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash<span class="token punctuation">"</span></span>
|
||||
@ -559,11 +538,11 @@
|
||||
<span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-297"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-311"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-298"><span class="token keyword">import</span> SlCarousel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-312"><span class="token keyword">import</span> SlCarousel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlCarouselItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel-item'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -600,7 +579,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarousel</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-298"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-312"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -609,7 +588,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-66"
|
||||
aria-controls="code-preview-source-group-71"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -682,7 +661,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-299"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/carousel-item/carousel-item.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-299"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-313"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/carousel-item/carousel-item.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-313"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -697,17 +676,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-300"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/carousel-item/carousel-item.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-300"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-314"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/carousel-item/carousel-item.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-314"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-301"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/carousel-item/carousel-item.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-301"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-315"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/carousel-item/carousel-item.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-315"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-302"><span class="token keyword">import</span> SlCarouselItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel-item'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-302"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-316"><span class="token keyword">import</span> SlCarouselItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel-item'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-316"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -98,27 +98,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -548,9 +527,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-351">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-72">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-1051"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel</span> <span class="token attr-name">pagination</span> <span class="token attr-name">navigation</span> <span class="token attr-name">mouse-dragging</span> <span class="token attr-name">loop</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-317"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel</span> <span class="token attr-name">pagination</span> <span class="token attr-name">navigation</span> <span class="token attr-name">mouse-dragging</span> <span class="token attr-name">loop</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun shines on the mountains and trees (by Adam Kool on Unsplash)<span class="token punctuation">"</span></span>
|
||||
@ -582,11 +561,11 @@
|
||||
<span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1051"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-317"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-1052"><span class="token keyword">import</span> SlCarousel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-318"><span class="token keyword">import</span> SlCarousel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlCarouselItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel-item'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -625,7 +604,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarousel</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1052"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-318"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -634,7 +613,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-351"
|
||||
aria-controls="code-preview-source-group-72"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -727,9 +706,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-352">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-73">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-1053"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel</span> <span class="token attr-name">pagination</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-319"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel</span> <span class="token attr-name">pagination</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun shines on the mountains and trees (by Adam Kool on Unsplash)<span class="token punctuation">"</span></span>
|
||||
@ -761,11 +740,11 @@
|
||||
<span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1053"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-319"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-1054"><span class="token keyword">import</span> SlCarousel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-320"><span class="token keyword">import</span> SlCarousel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlCarouselItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel-item'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -802,7 +781,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarousel</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1054"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-320"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -811,7 +790,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-352"
|
||||
aria-controls="code-preview-source-group-73"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -898,9 +877,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-353">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-74">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-1055"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel</span> <span class="token attr-name">navigation</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-321"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel</span> <span class="token attr-name">navigation</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun shines on the mountains and trees (by Adam Kool on Unsplash)<span class="token punctuation">"</span></span>
|
||||
@ -932,11 +911,11 @@
|
||||
<span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1055"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-321"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-1056"><span class="token keyword">import</span> SlCarousel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-322"><span class="token keyword">import</span> SlCarousel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlCarouselItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel-item'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -973,7 +952,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarousel</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1056"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-322"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -982,7 +961,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-353"
|
||||
aria-controls="code-preview-source-group-74"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1072,9 +1051,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-354">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-75">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-1057"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel</span> <span class="token attr-name">loop</span> <span class="token attr-name">navigation</span> <span class="token attr-name">pagination</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-323"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel</span> <span class="token attr-name">loop</span> <span class="token attr-name">navigation</span> <span class="token attr-name">pagination</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun shines on the mountains and trees (by Adam Kool on Unsplash)<span class="token punctuation">"</span></span>
|
||||
@ -1106,11 +1085,11 @@
|
||||
<span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1057"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-323"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-1058"><span class="token keyword">import</span> SlCarousel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-324"><span class="token keyword">import</span> SlCarousel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlCarouselItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel-item'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -1147,7 +1126,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarousel</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1058"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-324"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1156,7 +1135,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-354"
|
||||
aria-controls="code-preview-source-group-75"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1248,9 +1227,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-355">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-76">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-1059"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel</span> <span class="token attr-name">autoplay</span> <span class="token attr-name">loop</span> <span class="token attr-name">pagination</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-325"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel</span> <span class="token attr-name">autoplay</span> <span class="token attr-name">loop</span> <span class="token attr-name">pagination</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun shines on the mountains and trees (by Adam Kool on Unsplash)<span class="token punctuation">"</span></span>
|
||||
@ -1282,11 +1261,11 @@
|
||||
<span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1059"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-325"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-1060"><span class="token keyword">import</span> SlCarousel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-326"><span class="token keyword">import</span> SlCarousel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlCarouselItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel-item'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -1323,7 +1302,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarousel</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1060"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-326"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1332,7 +1311,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-355"
|
||||
aria-controls="code-preview-source-group-76"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1453,9 +1432,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-356">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-77">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-1061"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mouse-dragging<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-327"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mouse-dragging<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel</span> <span class="token attr-name">pagination</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||||
@ -1503,11 +1482,11 @@
|
||||
carousel<span class="token punctuation">.</span><span class="token function">toggleAttribute</span><span class="token punctuation">(</span><span class="token string">'mouse-dragging'</span><span class="token punctuation">,</span> toggle<span class="token punctuation">.</span>checked<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1061"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-327"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-1062"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-328"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlCarousel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlCarouselItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel-item'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
|
||||
@ -1559,7 +1538,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1062"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-328"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1568,7 +1547,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-356"
|
||||
aria-controls="code-preview-source-group-77"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1637,9 +1616,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-357">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-78">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-1063"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel</span> <span class="token attr-name">navigation</span> <span class="token attr-name">pagination</span> <span class="token attr-name">slides-per-page</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span> <span class="token attr-name">slides-per-move</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-329"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel</span> <span class="token attr-name">navigation</span> <span class="token attr-name">pagination</span> <span class="token attr-name">slides-per-page</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span> <span class="token attr-name">slides-per-move</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-red-200<span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Slide 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-orange-200<span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Slide 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-yellow-200<span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Slide 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||||
@ -1647,11 +1626,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-blue-200<span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Slide 5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-violet-200<span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Slide 6<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1063"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-329"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-1064"><span class="token keyword">import</span> SlCarousel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-330"><span class="token keyword">import</span> SlCarousel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlCarouselItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel-item'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -1664,7 +1643,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCarouselItem</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">background</span><span class="token operator">:</span> <span class="token string">'var(--sl-color-violet-200)'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Slide 6</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarouselItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarousel</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1064"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-330"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1673,7 +1652,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-357"
|
||||
aria-controls="code-preview-source-group-78"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1801,9 +1780,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-358">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-79">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-1065"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dynamic-carousel<span class="token punctuation">"</span></span> <span class="token attr-name">pagination</span> <span class="token attr-name">navigation</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-331"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dynamic-carousel<span class="token punctuation">"</span></span> <span class="token attr-name">pagination</span> <span class="token attr-name">navigation</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-red-200<span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Slide 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-orange-200<span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Slide 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-yellow-200<span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Slide 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||||
@ -1868,11 +1847,11 @@
|
||||
dynamicRemove<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> removeSlide<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1065"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-331"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-1066"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-332"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlCarousel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlCarouselItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel-item'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -1928,7 +1907,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1066"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-332"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1937,7 +1916,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-358"
|
||||
aria-controls="code-preview-source-group-79"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -2046,9 +2025,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-359">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-80">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-1067"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>vertical<span class="token punctuation">"</span></span> <span class="token attr-name">pagination</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>vertical<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-333"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>vertical<span class="token punctuation">"</span></span> <span class="token attr-name">pagination</span> <span class="token attr-name">orientation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>vertical<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun shines on the mountains and trees (by Adam Kool on Unsplash)<span class="token punctuation">"</span></span>
|
||||
@ -2098,11 +2077,11 @@
|
||||
<span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1067"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-333"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-1068"><span class="token keyword">import</span> SlCarousel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-334"><span class="token keyword">import</span> SlCarousel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlCarouselItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel-item'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||||
@ -2161,7 +2140,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1068"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-334"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2170,7 +2149,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-359"
|
||||
aria-controls="code-preview-source-group-80"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -2281,9 +2260,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-360">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-81">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-1069"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>aspect-ratio<span class="token punctuation">"</span></span> <span class="token attr-name">navigation</span> <span class="token attr-name">pagination</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--aspect-ratio</span><span class="token punctuation">:</span> 3/2<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-335"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>aspect-ratio<span class="token punctuation">"</span></span> <span class="token attr-name">navigation</span> <span class="token attr-name">pagination</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--aspect-ratio</span><span class="token punctuation">:</span> 3/2<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun shines on the mountains and trees (by Adam Kool on Unsplash)<span class="token punctuation">"</span></span>
|
||||
@ -2334,11 +2313,11 @@
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1069"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-335"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-1070"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-336"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlCarousel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlCarouselItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel-item'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
|
||||
@ -2400,7 +2379,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1070"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-336"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2409,7 +2388,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-360"
|
||||
aria-controls="code-preview-source-group-81"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -2500,9 +2479,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-361">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-82">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-1071"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>scroll-hint<span class="token punctuation">"</span></span> <span class="token attr-name">pagination</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--scroll-hint</span><span class="token punctuation">:</span> 10%<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-337"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>scroll-hint<span class="token punctuation">"</span></span> <span class="token attr-name">pagination</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--scroll-hint</span><span class="token punctuation">:</span> 10%<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun shines on the mountains and trees (by Adam Kool on Unsplash)<span class="token punctuation">"</span></span>
|
||||
@ -2534,11 +2513,11 @@
|
||||
<span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-carousel</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1071"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-337"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-1072"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-338"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlCarousel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlCarouselItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel-item'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
|
||||
@ -2580,7 +2559,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCarousel</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1072"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-338"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2589,7 +2568,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-361"
|
||||
aria-controls="code-preview-source-group-82"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -2765,9 +2744,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-362">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-83">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-1073"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>carousel-thumbnails<span class="token punctuation">"</span></span> <span class="token attr-name">navigation</span> <span class="token attr-name">loop</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-339"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>carousel-thumbnails<span class="token punctuation">"</span></span> <span class="token attr-name">navigation</span> <span class="token attr-name">loop</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-carousel-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>The sun shines on the mountains and trees (by Adam Kool on Unsplash)<span class="token punctuation">"</span></span>
|
||||
@ -2879,11 +2858,11 @@
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1073"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-339"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-1074"><span class="token keyword">import</span> <span class="token punctuation">{</span> useRef <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-340"><span class="token keyword">import</span> <span class="token punctuation">{</span> useRef <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlCarousel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlCarouselItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel-item'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
|
||||
@ -3003,7 +2982,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1074"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-340"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -3012,7 +2991,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-362"
|
||||
aria-controls="code-preview-source-group-83"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -3081,7 +3060,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-1075"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/carousel/carousel.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-1075"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-341"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/carousel/carousel.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-341"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -3096,17 +3075,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-1076"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/carousel/carousel.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1076"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-342"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/carousel/carousel.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-342"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-1077"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/carousel/carousel.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1077"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-343"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/carousel/carousel.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-343"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-1078"><span class="token keyword">import</span> SlCarousel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1078"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-344"><span class="token keyword">import</span> SlCarousel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/carousel'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-344"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -92,27 +92,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -503,17 +482,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-67">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-84">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-303"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-checkbox</span><span class="token punctuation">></span></span>Checkbox<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-checkbox</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-303"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-345"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-checkbox</span><span class="token punctuation">></span></span>Checkbox<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-checkbox</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-345"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-304"><span class="token keyword">import</span> SlCheckbox <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/checkbox'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-346"><span class="token keyword">import</span> SlCheckbox <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/checkbox'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCheckbox</span></span><span class="token punctuation">></span></span><span class="token plain-text">Checkbox</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCheckbox</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-304"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-346"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -522,7 +501,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-67"
|
||||
aria-controls="code-preview-source-group-84"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -588,17 +567,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-68">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-85">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-305"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-checkbox</span> <span class="token attr-name">checked</span><span class="token punctuation">></span></span>Checked<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-checkbox</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-305"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-347"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-checkbox</span> <span class="token attr-name">checked</span><span class="token punctuation">></span></span>Checked<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-checkbox</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-347"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-306"><span class="token keyword">import</span> SlCheckbox <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/checkbox'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-348"><span class="token keyword">import</span> SlCheckbox <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/checkbox'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCheckbox</span></span> <span class="token attr-name">checked</span><span class="token punctuation">></span></span><span class="token plain-text">Checked</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCheckbox</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-306"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-348"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -607,7 +586,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-68"
|
||||
aria-controls="code-preview-source-group-85"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -663,17 +642,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-69">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-86">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-307"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-checkbox</span> <span class="token attr-name">indeterminate</span><span class="token punctuation">></span></span>Indeterminate<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-checkbox</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-307"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-349"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-checkbox</span> <span class="token attr-name">indeterminate</span><span class="token punctuation">></span></span>Indeterminate<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-checkbox</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-349"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-308"><span class="token keyword">import</span> SlCheckbox <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/checkbox'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-350"><span class="token keyword">import</span> SlCheckbox <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/checkbox'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCheckbox</span></span> <span class="token attr-name">indeterminate</span><span class="token punctuation">></span></span><span class="token plain-text">Indeterminate</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCheckbox</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-308"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-350"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -682,7 +661,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-69"
|
||||
aria-controls="code-preview-source-group-86"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -738,17 +717,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-70">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-87">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-309"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-checkbox</span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>Disabled<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-checkbox</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-309"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-351"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-checkbox</span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>Disabled<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-checkbox</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-351"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-310"><span class="token keyword">import</span> SlCheckbox <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/checkbox'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-352"><span class="token keyword">import</span> SlCheckbox <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/checkbox'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCheckbox</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span><span class="token plain-text">Disabled</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCheckbox</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-310"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-352"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -757,7 +736,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-70"
|
||||
aria-controls="code-preview-source-group-87"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -815,18 +794,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-71">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-88">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-311"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-checkbox</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-checkbox</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-353"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-checkbox</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-checkbox</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-checkbox</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Medium<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-checkbox</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-checkbox</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Large<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-checkbox</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-311"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-353"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-312"><span class="token keyword">import</span> SlCheckbox <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/checkbox'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-354"><span class="token keyword">import</span> SlCheckbox <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/checkbox'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -837,7 +816,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCheckbox</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Large</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCheckbox</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-312"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-354"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -846,7 +825,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-71"
|
||||
aria-controls="code-preview-source-group-88"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -905,17 +884,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-72">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-89">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-313"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-checkbox</span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>What should the user know about the checkbox?<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Label<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-checkbox</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-313"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-355"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-checkbox</span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>What should the user know about the checkbox?<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Label<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-checkbox</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-355"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-314"><span class="token keyword">import</span> SlCheckbox <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/checkbox'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-356"><span class="token keyword">import</span> SlCheckbox <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/checkbox'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCheckbox</span></span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>What should the user know about the switch?<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Label</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCheckbox</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-314"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-356"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -924,7 +903,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-72"
|
||||
aria-controls="code-preview-source-group-89"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1012,9 +991,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-73">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-90">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-315"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom-validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-357"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom-validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-checkbox</span><span class="token punctuation">></span></span>Check me<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-checkbox</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">margin-top</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
@ -1041,11 +1020,11 @@
|
||||
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'All fields are valid!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-315"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-357"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-316"><span class="token keyword">import</span> <span class="token punctuation">{</span> useEffect<span class="token punctuation">,</span> useRef <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-358"><span class="token keyword">import</span> <span class="token punctuation">{</span> useEffect<span class="token punctuation">,</span> useRef <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlCheckbox <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/checkbox'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -1078,7 +1057,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-316"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-358"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1087,7 +1066,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-73"
|
||||
aria-controls="code-preview-source-group-90"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1156,7 +1135,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-317"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/checkbox/checkbox.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-317"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-359"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/checkbox/checkbox.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-359"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -1171,17 +1150,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-318"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/checkbox/checkbox.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-318"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-360"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/checkbox/checkbox.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-360"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-319"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/checkbox/checkbox.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-319"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-361"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/checkbox/checkbox.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-361"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-320"><span class="token keyword">import</span> SlCheckbox <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/checkbox'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-320"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-362"><span class="token keyword">import</span> SlCheckbox <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/checkbox'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-362"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -92,27 +92,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -504,17 +483,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-82">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-91">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-341"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-color-picker</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-color-picker</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-341"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-363"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-color-picker</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-color-picker</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-363"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-342"><span class="token keyword">import</span> SlColorPicker <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/color-picker'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-364"><span class="token keyword">import</span> SlColorPicker <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/color-picker'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlColorPicker</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-342"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-364"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -523,7 +502,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-82"
|
||||
aria-controls="code-preview-source-group-91"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -589,17 +568,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-83">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-92">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-343"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-color-picker</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#4a90e2<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-color-picker</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-343"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-365"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-color-picker</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#4a90e2<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-color-picker</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-365"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-344"><span class="token keyword">import</span> SlColorPicker <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/color-picker'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-366"><span class="token keyword">import</span> SlColorPicker <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/color-picker'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlColorPicker</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#4a90e2<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-344"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-366"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -608,7 +587,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-83"
|
||||
aria-controls="code-preview-source-group-92"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -667,17 +646,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-84">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-93">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-345"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-color-picker</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#f5a623ff<span class="token punctuation">"</span></span> <span class="token attr-name">opacity</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-color-picker</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-345"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-367"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-color-picker</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#f5a623ff<span class="token punctuation">"</span></span> <span class="token attr-name">opacity</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-color-picker</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-367"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-346"><span class="token keyword">import</span> SlColorPicker <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/color-picker'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-368"><span class="token keyword">import</span> SlColorPicker <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/color-picker'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlColorPicker</span></span> <span class="token attr-name">opacity</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-346"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-368"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -686,7 +665,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-84"
|
||||
aria-controls="code-preview-source-group-93"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -750,17 +729,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-85">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-94">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-347"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-color-picker</span> <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hex<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#4a90e2<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-color-picker</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-369"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-color-picker</span> <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hex<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#4a90e2<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-color-picker</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-color-picker</span> <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rgb<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rgb(80, 227, 194)<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-color-picker</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-color-picker</span> <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hsl<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hsl(290, 87%, 47%)<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-color-picker</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-color-picker</span> <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hsv<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hsv(55, 89%, 97%)<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-color-picker</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-347"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-369"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-348"><span class="token keyword">import</span> SlColorPicker <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/color-picker'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-370"><span class="token keyword">import</span> SlColorPicker <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/color-picker'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -770,7 +749,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlColorPicker</span></span> <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hsv<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hsv(55, 89%, 97%)<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-348"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-370"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -779,7 +758,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-85"
|
||||
aria-controls="code-preview-source-group-94"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -845,20 +824,20 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-86">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-95">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-349"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-color-picker</span>
|
||||
<pre><code class="language-html" id="code-block-371"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-color-picker</span>
|
||||
<span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span>
|
||||
<span class="token attr-name">swatches</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>
|
||||
#d0021b; #f5a623; #f8e71c; #8b572a; #7ed321; #417505; #bd10e0; #9013fe;
|
||||
#4a90e2; #50e3c2; #b8e986; #000; #444; #888; #ccc; #fff;
|
||||
<span class="token punctuation">"</span></span>
|
||||
<span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-color-picker</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-349"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-371"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-350"><span class="token keyword">import</span> SlColorPicker <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/color-picker'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-372"><span class="token keyword">import</span> SlColorPicker <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/color-picker'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlColorPicker</span></span>
|
||||
@ -869,7 +848,7 @@
|
||||
<span class="token punctuation">"</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-350"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-372"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -878,7 +857,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-86"
|
||||
aria-controls="code-preview-source-group-95"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -934,16 +913,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-87">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-96">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-351"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-color-picker</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-color-picker</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-373"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-color-picker</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-color-picker</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-color-picker</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-color-picker</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-color-picker</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-color-picker</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-351"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-373"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-352"><span class="token keyword">import</span> SlColorPicker <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/color-picker'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-374"><span class="token keyword">import</span> SlColorPicker <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/color-picker'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -952,7 +931,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlColorPicker</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-352"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-374"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -961,7 +940,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-87"
|
||||
aria-controls="code-preview-source-group-96"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1017,17 +996,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-88">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-97">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-353"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-color-picker</span> <span class="token attr-name">inline</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-color-picker</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-353"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-375"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-color-picker</span> <span class="token attr-name">inline</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-color-picker</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-375"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-354"><span class="token keyword">import</span> SlColorPicker <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/color-picker'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-376"><span class="token keyword">import</span> SlColorPicker <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/color-picker'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlColorPicker</span></span> <span class="token attr-name">inline</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a color<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-354"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-376"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1036,7 +1015,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-88"
|
||||
aria-controls="code-preview-source-group-97"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1105,7 +1084,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-355"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/color-picker/color-picker.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-355"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-377"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/color-picker/color-picker.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-377"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -1120,17 +1099,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-356"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/color-picker/color-picker.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-356"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-378"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/color-picker/color-picker.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-378"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-357"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/color-picker/color-picker.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-357"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-379"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/color-picker/color-picker.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-379"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-358"><span class="token keyword">import</span> SlColorPicker <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/color-picker'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-358"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-380"><span class="token keyword">import</span> SlColorPicker <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/color-picker'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-380"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -92,27 +92,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -505,19 +484,19 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-74">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-98">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-321"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-copy-button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Nebula rocks!<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-copy-button</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-321"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-381"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-copy-button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Nebula rocks!<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-copy-button</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-381"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-322"><span class="token keyword">import</span> <span class="token punctuation">{</span> SlCopyButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/copy-button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-382"><span class="token keyword">import</span> <span class="token punctuation">{</span> SlCopyButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/copy-button'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCopyButton</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Nebula rocks!<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-322"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-382"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -526,7 +505,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-74"
|
||||
aria-controls="code-preview-source-group-98"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -593,19 +572,19 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-75">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-99">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-323"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-copy-button</span>
|
||||
<pre><code class="language-html" id="code-block-383"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-copy-button</span>
|
||||
<span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Custom labels are easy<span class="token punctuation">"</span></span>
|
||||
<span class="token attr-name">copy-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Click to copy<span class="token punctuation">"</span></span>
|
||||
<span class="token attr-name">success-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>You did it!<span class="token punctuation">"</span></span>
|
||||
<span class="token attr-name">error-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Whoops, your browser doesn't support this!<span class="token punctuation">"</span></span>
|
||||
<span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-copy-button</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-323"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-383"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-324"><span class="token keyword">import</span> <span class="token punctuation">{</span> SlCopyButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/copy-button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-384"><span class="token keyword">import</span> <span class="token punctuation">{</span> SlCopyButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/copy-button'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCopyButton</span></span>
|
||||
@ -615,7 +594,7 @@
|
||||
<span class="token attr-name">error-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Whoops, your browser doesn't support this!<span class="token punctuation">"</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-324"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-384"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -624,7 +603,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-75"
|
||||
aria-controls="code-preview-source-group-99"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -688,18 +667,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-76">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-100">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-325"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-copy-button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Copied from a custom button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-385"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-copy-button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Copied from a custom button<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>copy-icon<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>clipboard<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>success-icon<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>clipboard-check<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>error-icon<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>clipboard-x<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-copy-button</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-325"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-385"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-326"><span class="token keyword">import</span> <span class="token punctuation">{</span> SlCopyButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/copy-button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-386"><span class="token keyword">import</span> <span class="token punctuation">{</span> SlCopyButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/copy-button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> SlIcon <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -711,7 +690,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlCopyButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-326"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-386"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -720,7 +699,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-76"
|
||||
aria-controls="code-preview-source-group-100"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -827,9 +806,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-77">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-101">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-327"><span class="token comment"><!-- Copies the span's textContent --></span>
|
||||
<pre><code class="language-html" id="code-block-387"><span class="token comment"><!-- Copies the span's textContent --></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-phone<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>+1 (234) 456-7890<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-copy-button</span> <span class="token attr-name">from</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-phone<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-copy-button</span><span class="token punctuation">></span></span>
|
||||
|
||||
@ -844,11 +823,11 @@
|
||||
<span class="token comment"><!-- Copies the link's "href" attribute --></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-link<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Nebula Website<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-copy-button</span> <span class="token attr-name">from</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-link[href]<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-copy-button</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-327"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-387"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-328"><span class="token keyword">import</span> <span class="token punctuation">{</span> SlCopyButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/copy-button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-388"><span class="token keyword">import</span> <span class="token punctuation">{</span> SlCopyButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/copy-button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> SlInput <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -870,7 +849,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCopyButton</span></span> <span class="token attr-name">from</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-link[href]<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-328"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-388"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -879,7 +858,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-77"
|
||||
aria-controls="code-preview-source-group-101"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -943,19 +922,19 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-78">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-102">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-329"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-copy-button</span> <span class="token attr-name">from</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>i-do-not-exist<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-copy-button</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-329"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-389"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-copy-button</span> <span class="token attr-name">from</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>i-do-not-exist<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-copy-button</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-389"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-330"><span class="token keyword">import</span> <span class="token punctuation">{</span> SlCopyButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/copy-button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-390"><span class="token keyword">import</span> <span class="token punctuation">{</span> SlCopyButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/copy-button'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCopyButton</span></span> <span class="token attr-name">from</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>i-do-not-exist<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-330"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-390"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -964,7 +943,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-78"
|
||||
aria-controls="code-preview-source-group-102"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1020,19 +999,19 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-79">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-103">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-331"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-copy-button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>You can't copy me<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-copy-button</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-331"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-391"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-copy-button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>You can't copy me<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-copy-button</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-391"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-332"><span class="token keyword">import</span> <span class="token punctuation">{</span> SlCopyButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/copy-button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-392"><span class="token keyword">import</span> <span class="token punctuation">{</span> SlCopyButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/copy-button'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCopyButton</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>You can't copy me<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span> <span class="token punctuation">/></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-332"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-392"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1041,7 +1020,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-79"
|
||||
aria-controls="code-preview-source-group-103"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1103,19 +1082,19 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-80">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-104">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-333"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-copy-button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Nebula rocks!<span class="token punctuation">"</span></span> <span class="token attr-name">feedback-duration</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>250<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-copy-button</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-333"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-393"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-copy-button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Nebula rocks!<span class="token punctuation">"</span></span> <span class="token attr-name">feedback-duration</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>250<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-copy-button</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-393"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-334"><span class="token keyword">import</span> <span class="token punctuation">{</span> SlCopyButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/copy-button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-394"><span class="token keyword">import</span> <span class="token punctuation">{</span> SlCopyButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/copy-button'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlCopyButton</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Nebula rocks!<span class="token punctuation">"</span></span> <span class="token attr-name">feedback-duration</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">250</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-334"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-394"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1124,7 +1103,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-80"
|
||||
aria-controls="code-preview-source-group-104"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1216,9 +1195,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-81">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-105">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-335"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-copy-button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>I'm so stylish<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom-styles<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-395"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-copy-button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>I'm so stylish<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom-styles<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>copy-icon<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>asterisk<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>success-icon<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>check-lg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>error-icon<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>x-lg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
@ -1253,11 +1232,11 @@
|
||||
<span class="token property">outline-offset</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-335"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-395"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-336"><span class="token keyword">import</span> <span class="token punctuation">{</span> SlCopyButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/copy-button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-396"><span class="token keyword">import</span> <span class="token punctuation">{</span> SlCopyButton <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/copy-button'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||||
.custom-styles {
|
||||
@ -1296,7 +1275,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-336"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-396"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1305,7 +1284,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-81"
|
||||
aria-controls="code-preview-source-group-105"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1374,7 +1353,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-337"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/copy-button/copy-button.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-337"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-397"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/copy-button/copy-button.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-397"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -1389,17 +1368,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-338"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/copy-button/copy-button.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-338"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-398"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/copy-button/copy-button.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-398"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-339"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/copy-button/copy-button.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-339"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-399"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/copy-button/copy-button.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-399"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-340"><span class="token keyword">import</span> SlCopyButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/copy-button'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-340"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-400"><span class="token keyword">import</span> SlCopyButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/copy-button'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-400"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -92,27 +92,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -507,17 +486,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-100">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-106">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-389"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-details</span> <span class="token attr-name">summary</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Toggle Me<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-401"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-details</span> <span class="token attr-name">summary</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Toggle Me<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-details</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-389"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-401"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-390"><span class="token keyword">import</span> SlDetails <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/details'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-402"><span class="token keyword">import</span> SlDetails <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/details'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlDetails</span></span> <span class="token attr-name">summary</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Toggle Me<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -525,7 +504,7 @@
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlDetails</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-390"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-402"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -534,7 +513,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-100"
|
||||
aria-controls="code-preview-source-group-106"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -597,17 +576,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-101">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-107">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-391"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-details</span> <span class="token attr-name">summary</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Disabled<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-403"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-details</span> <span class="token attr-name">summary</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Disabled<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-details</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-391"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-403"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-392"><span class="token keyword">import</span> SlDetails <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/details'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-404"><span class="token keyword">import</span> SlDetails <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/details'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlDetails</span></span> <span class="token attr-name">summary</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Disabled<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -615,7 +594,7 @@
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlDetails</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-392"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-404"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -624,7 +603,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-101"
|
||||
aria-controls="code-preview-source-group-107"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -701,9 +680,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-102">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-108">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-393"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-details</span> <span class="token attr-name">summary</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Toggle Me<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom-icons<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-405"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-details</span> <span class="token attr-name">summary</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Toggle Me<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom-icons<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>plus-square<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>expand-icon<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dash-square<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>collapse-icon<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
|
||||
@ -717,11 +696,11 @@
|
||||
<span class="token property">rotate</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-393"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-405"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-394"><span class="token keyword">import</span> SlDetails <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/details'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-406"><span class="token keyword">import</span> SlDetails <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/details'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||||
@ -744,7 +723,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-394"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-406"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -753,7 +732,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-102"
|
||||
aria-controls="code-preview-source-group-108"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -851,9 +830,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-103">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-109">
|
||||
<div class="code-preview__source code-preview__source--html">
|
||||
<pre><code class="language-html" id="code-block-395"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>details-group-example<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-407"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>details-group-example<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-details</span> <span class="token attr-name">summary</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>First<span class="token punctuation">"</span></span> <span class="token attr-name">open</span><span class="token punctuation">></span></span>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
@ -886,7 +865,7 @@
|
||||
<span class="token property">margin-bottom</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-spacing-2x-small<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-395"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-407"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -895,7 +874,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-103"
|
||||
aria-controls="code-preview-source-group-109"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -956,7 +935,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-396"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/details/details.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-396"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-408"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/details/details.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-408"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -971,17 +950,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-397"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/details/details.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-397"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-409"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/details/details.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-409"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-398"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/details/details.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-398"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-410"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/details/details.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-410"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-399"><span class="token keyword">import</span> SlDetails <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/details'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-399"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-411"><span class="token keyword">import</span> SlDetails <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/details'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-411"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -98,27 +98,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -530,9 +509,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-94">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-134">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-373"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-dialog</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Dialog<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dialog-overview<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-472"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-dialog</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Dialog<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dialog-overview<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer<span class="token punctuation">"</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Close<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-dialog</span><span class="token punctuation">></span></span>
|
||||
@ -547,11 +526,11 @@
|
||||
openButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> dialog<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
closeButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> dialog<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-373"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-472"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-374"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-473"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlDialog <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/dialog'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -571,7 +550,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-374"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-473"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -580,7 +559,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-94"
|
||||
aria-controls="code-preview-source-group-134"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -655,9 +634,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-95">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-135">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-375"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-dialog</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Dialog<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dialog-width<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--width</span><span class="token punctuation">:</span> 50vw<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-474"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-dialog</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Dialog<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dialog-width<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--width</span><span class="token punctuation">:</span> 50vw<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer<span class="token punctuation">"</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Close<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-dialog</span><span class="token punctuation">></span></span>
|
||||
@ -672,11 +651,11 @@
|
||||
openButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> dialog<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
closeButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> dialog<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-375"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-474"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-376"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-475"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlDialog <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/dialog'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -696,7 +675,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-376"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-475"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -705,7 +684,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-95"
|
||||
aria-controls="code-preview-source-group-135"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -782,9 +761,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-96">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-136">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-377"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-dialog</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Dialog<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dialog-scrolling<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-476"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-dialog</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Dialog<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dialog-scrolling<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span> 150vh<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> dashed 2px <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-neutral-200<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0 1rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Scroll down and give it a try! 👇<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
@ -801,11 +780,11 @@
|
||||
openButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> dialog<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
closeButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> dialog<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-377"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-476"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-378"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-477"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlDialog <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/dialog'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -834,7 +813,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-378"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-477"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -843,7 +822,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-96"
|
||||
aria-controls="code-preview-source-group-136"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -921,9 +900,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-97">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-137">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-379"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-dialog</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Dialog<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dialog-header-actions<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-478"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-dialog</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Dialog<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dialog-header-actions<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon-button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>new-window<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>header-actions<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box-arrow-up-right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon-button</span><span class="token punctuation">></span></span>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer<span class="token punctuation">"</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Close<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
@ -941,11 +920,11 @@
|
||||
closeButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> dialog<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
newWindowButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> window<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span>location<span class="token punctuation">.</span>href<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-379"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-478"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-380"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-479"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlDialog <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/dialog'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlIconButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon-button'</span><span class="token punctuation">;</span>
|
||||
@ -972,7 +951,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-380"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-479"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -981,7 +960,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-97"
|
||||
aria-controls="code-preview-source-group-137"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1076,9 +1055,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-98">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-138">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-381"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-dialog</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Dialog<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dialog-deny-close<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-480"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-dialog</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Dialog<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dialog-deny-close<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
This dialog will not close when you click on the overlay.
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer<span class="token punctuation">"</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Close<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-dialog</span><span class="token punctuation">></span></span>
|
||||
@ -1100,11 +1079,11 @@
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-381"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-480"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-382"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-481"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlDialog <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/dialog'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -1131,7 +1110,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-382"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-481"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1140,7 +1119,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-98"
|
||||
aria-controls="code-preview-source-group-138"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1220,9 +1199,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-99">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-139">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-383"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-dialog</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Dialog<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dialog-focus<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-482"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-dialog</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Dialog<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dialog-focus<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-input</span> <span class="token attr-name">autofocus</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>I will have focus when the dialog is opened<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-input</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer<span class="token punctuation">"</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Close<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-dialog</span><span class="token punctuation">></span></span>
|
||||
@ -1238,11 +1217,11 @@
|
||||
openButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> dialog<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
closeButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> dialog<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-383"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-482"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-384"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-483"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlDialog <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/dialog'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
|
||||
@ -1263,7 +1242,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-384"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-483"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1272,7 +1251,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-99"
|
||||
aria-controls="code-preview-source-group-139"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1348,7 +1327,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-385"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/dialog/dialog.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-385"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-484"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/dialog/dialog.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-484"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -1363,17 +1342,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-386"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/dialog/dialog.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-386"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-485"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/dialog/dialog.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-485"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-387"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/dialog/dialog.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-387"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-486"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/dialog/dialog.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-486"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-388"><span class="token keyword">import</span> SlDialog <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/dialog'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-388"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-487"><span class="token keyword">import</span> SlDialog <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/dialog'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-487"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -92,27 +92,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -498,17 +477,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-114">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-110">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-424"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-divider</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-divider</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-424"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-412"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-divider</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-divider</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-412"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-425"><span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-413"><span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlDivider</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-425"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-413"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -517,7 +496,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-114"
|
||||
aria-controls="code-preview-source-group-110"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -574,17 +553,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-115">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-111">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-426"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-divider</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--width</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-divider</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-426"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-414"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-divider</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--width</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-divider</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-414"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-427"><span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-415"><span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlDivider</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token string-property property">'--width'</span><span class="token operator">:</span> <span class="token string">'4px'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-427"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-415"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -593,7 +572,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-115"
|
||||
aria-controls="code-preview-source-group-111"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -647,17 +626,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-116">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-112">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-428"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-divider</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--color</span><span class="token punctuation">:</span> tomato<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-divider</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-428"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-416"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-divider</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--color</span><span class="token punctuation">:</span> tomato<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-divider</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-416"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-429"><span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-417"><span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlDivider</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token string-property property">'--color'</span><span class="token operator">:</span> <span class="token string">'tomato'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-429"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-417"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -666,7 +645,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-116"
|
||||
aria-controls="code-preview-source-group-112"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -729,18 +708,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-117">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-113">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-430"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-418"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
Above
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-divider</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--spacing</span><span class="token punctuation">:</span> 2rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-divider</span><span class="token punctuation">></span></span>
|
||||
Below
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-430"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-418"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-431"><span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-419"><span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -749,7 +728,7 @@
|
||||
Below
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-431"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-419"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -758,7 +737,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-117"
|
||||
aria-controls="code-preview-source-group-113"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -823,20 +802,20 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-118">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-114">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-432"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 2rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-420"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 2rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
First
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-divider</span> <span class="token attr-name">vertical</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-divider</span><span class="token punctuation">></span></span>
|
||||
Middle
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-divider</span> <span class="token attr-name">vertical</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-divider</span><span class="token punctuation">></span></span>
|
||||
Last
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-432"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-420"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-433"><span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-421"><span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span>
|
||||
@ -853,7 +832,7 @@
|
||||
Last
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-433"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-421"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -862,7 +841,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-118"
|
||||
aria-controls="code-preview-source-group-114"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -926,9 +905,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-119">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-115">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-434"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-422"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
@ -937,11 +916,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 6<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-434"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-422"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-435"><span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-423"><span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -956,7 +935,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlMenuItem</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Option 6</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlMenuItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlMenu</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-435"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-423"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -965,7 +944,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-119"
|
||||
aria-controls="code-preview-source-group-115"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1034,7 +1013,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-436"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/divider/divider.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-436"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-424"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/divider/divider.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-424"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -1049,17 +1028,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-437"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/divider/divider.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-437"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-425"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/divider/divider.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-425"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-438"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/divider/divider.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-438"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-426"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/divider/divider.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-426"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-439"><span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-439"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-427"><span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-427"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -98,27 +98,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -534,9 +513,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-104">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-116">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-400"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-drawer</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Drawer<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>drawer-overview<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-428"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-drawer</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Drawer<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>drawer-overview<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer<span class="token punctuation">"</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Close<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-drawer</span><span class="token punctuation">></span></span>
|
||||
@ -551,11 +530,11 @@
|
||||
openButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> drawer<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
closeButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> drawer<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-400"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-428"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-401"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-429"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlDrawer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/drawer'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -575,7 +554,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-401"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-429"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -584,7 +563,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-104"
|
||||
aria-controls="code-preview-source-group-116"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -662,9 +641,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-105">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-117">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-402"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-drawer</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Drawer<span class="token punctuation">"</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>start<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>drawer-placement-start<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-430"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-drawer</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Drawer<span class="token punctuation">"</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>start<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>drawer-placement-start<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
This drawer slides in from the start.
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer<span class="token punctuation">"</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Close<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-drawer</span><span class="token punctuation">></span></span>
|
||||
@ -679,11 +658,11 @@
|
||||
openButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> drawer<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
closeButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> drawer<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-402"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-430"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-403"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-431"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlDrawer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/drawer'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -703,7 +682,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-403"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-431"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -712,7 +691,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-105"
|
||||
aria-controls="code-preview-source-group-117"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -784,9 +763,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-106">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-118">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-404"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-drawer</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Drawer<span class="token punctuation">"</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>drawer-placement-top<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-432"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-drawer</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Drawer<span class="token punctuation">"</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>drawer-placement-top<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
This drawer slides in from the top.
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer<span class="token punctuation">"</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Close<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-drawer</span><span class="token punctuation">></span></span>
|
||||
@ -801,11 +780,11 @@
|
||||
openButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> drawer<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
closeButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> drawer<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-404"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-432"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-405"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-433"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlDrawer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/drawer'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -825,7 +804,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-405"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-433"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -834,7 +813,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-106"
|
||||
aria-controls="code-preview-source-group-118"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -909,9 +888,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-107">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-119">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-406"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-drawer</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Drawer<span class="token punctuation">"</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bottom<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>drawer-placement-bottom<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-434"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-drawer</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Drawer<span class="token punctuation">"</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bottom<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>drawer-placement-bottom<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
This drawer slides in from the bottom.
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer<span class="token punctuation">"</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Close<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-drawer</span><span class="token punctuation">></span></span>
|
||||
@ -926,11 +905,11 @@
|
||||
openButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> drawer<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
closeButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> drawer<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-406"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-434"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-407"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-435"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlDrawer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/drawer'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -950,7 +929,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-407"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-435"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -959,7 +938,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-107"
|
||||
aria-controls="code-preview-source-group-119"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1062,9 +1041,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-108">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-120">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-408"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span>
|
||||
<pre><code class="language-html" id="code-block-436"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span>
|
||||
<span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> solid 2px <span class="token function">var</span><span class="token punctuation">(</span>--sl-panel-border-color<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span> <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span>
|
||||
<span class="token punctuation">></span></span>
|
||||
The drawer will be contained to this box. This content won't shift or be affected in any way when the drawer opens.
|
||||
@ -1085,11 +1064,11 @@
|
||||
openButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>drawer<span class="token punctuation">.</span>open <span class="token operator">=</span> <span class="token operator">!</span>drawer<span class="token punctuation">.</span>open<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
closeButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> drawer<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-408"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-436"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-409"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-437"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlDrawer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/drawer'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -1128,7 +1107,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-409"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-437"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1137,7 +1116,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-108"
|
||||
aria-controls="code-preview-source-group-120"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1212,9 +1191,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-109">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-121">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-410"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-drawer</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Drawer<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>drawer-custom-size<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--size</span><span class="token punctuation">:</span> 50vw<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-438"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-drawer</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Drawer<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>drawer-custom-size<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--size</span><span class="token punctuation">:</span> 50vw<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
This drawer is always 50% of the viewport.
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer<span class="token punctuation">"</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Close<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-drawer</span><span class="token punctuation">></span></span>
|
||||
@ -1229,11 +1208,11 @@
|
||||
openButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> drawer<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
closeButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> drawer<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-410"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-438"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-411"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-439"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlDrawer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/drawer'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -1253,7 +1232,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-411"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-439"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1262,7 +1241,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-109"
|
||||
aria-controls="code-preview-source-group-121"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1339,9 +1318,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-110">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-122">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-412"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-drawer</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Drawer<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>drawer-scrolling<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-440"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-drawer</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Drawer<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>drawer-scrolling<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span> 150vh<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> dashed 2px <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-neutral-200<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0 1rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Scroll down and give it a try! 👇<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
@ -1358,11 +1337,11 @@
|
||||
openButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> drawer<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
closeButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> drawer<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-412"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-440"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-413"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-441"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlDrawer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/drawer'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -1390,7 +1369,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-413"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-441"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1399,7 +1378,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-110"
|
||||
aria-controls="code-preview-source-group-122"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1477,9 +1456,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-111">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-123">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-414"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-drawer</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Drawer<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>drawer-header-actions<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-442"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-drawer</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Drawer<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>drawer-header-actions<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon-button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>new-window<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>header-actions<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box-arrow-up-right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon-button</span><span class="token punctuation">></span></span>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer<span class="token punctuation">"</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Close<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
@ -1497,11 +1476,11 @@
|
||||
closeButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> drawer<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
newWindowButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> window<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span>location<span class="token punctuation">.</span>href<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-414"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-442"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-415"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-443"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlDrawer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/drawer'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlIconButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon-button'</span><span class="token punctuation">;</span>
|
||||
@ -1523,7 +1502,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-415"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-443"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1532,7 +1511,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-111"
|
||||
aria-controls="code-preview-source-group-123"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1627,9 +1606,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-112">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-124">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-416"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-drawer</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Drawer<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>drawer-deny-close<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-444"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-drawer</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Drawer<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>drawer-deny-close<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
This drawer will not close when you click on the overlay.
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer<span class="token punctuation">"</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Close<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-drawer</span><span class="token punctuation">></span></span>
|
||||
@ -1651,11 +1630,11 @@
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-416"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-444"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-417"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-445"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlDrawer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/drawer'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -1682,7 +1661,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-417"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-445"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1691,7 +1670,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-112"
|
||||
aria-controls="code-preview-source-group-124"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1771,9 +1750,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-113">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-125">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-418"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-drawer</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Drawer<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>drawer-focus<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-446"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-drawer</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Drawer<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>drawer-focus<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-input</span> <span class="token attr-name">autofocus</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>I will have focus when the drawer is opened<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-input</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer<span class="token punctuation">"</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Close<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-drawer</span><span class="token punctuation">></span></span>
|
||||
@ -1789,11 +1768,11 @@
|
||||
openButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> drawer<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
closeButton<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> drawer<span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-418"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-446"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-419"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-447"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlDrawer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/drawer'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
|
||||
@ -1814,7 +1793,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-419"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-447"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1823,7 +1802,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-113"
|
||||
aria-controls="code-preview-source-group-125"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1899,7 +1878,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-420"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/drawer/drawer.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-420"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-448"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/drawer/drawer.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-448"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -1914,17 +1893,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-421"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/drawer/drawer.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-421"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-449"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/drawer/drawer.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-449"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-422"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/drawer/drawer.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-422"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-450"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/drawer/drawer.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-450"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-423"><span class="token keyword">import</span> SlDrawer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/drawer'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-423"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-451"><span class="token keyword">import</span> SlDrawer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/drawer'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-451"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -92,27 +92,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -534,9 +513,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-120">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-126">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-440"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-dropdown</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-452"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-dropdown</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>trigger<span class="token punctuation">"</span></span> <span class="token attr-name">caret</span><span class="token punctuation">></span></span>Dropdown<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span><span class="token punctuation">></span></span>Dropdown Item 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
@ -556,11 +535,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-dropdown</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-440"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-452"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-441"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-453"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlDropdown <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/dropdown'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
|
||||
@ -593,7 +572,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlMenu</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlDropdown</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-441"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-453"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -602,7 +581,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-120"
|
||||
aria-controls="code-preview-source-group-126"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -690,9 +669,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-121">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-127">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-442"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dropdown-selection<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-454"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dropdown-selection<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-dropdown</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>trigger<span class="token punctuation">"</span></span> <span class="token attr-name">caret</span><span class="token punctuation">></span></span>Edit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu</span><span class="token punctuation">></span></span>
|
||||
@ -712,11 +691,11 @@
|
||||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>selectedItem<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-442"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-454"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-443"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-455"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlDropdown <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/dropdown'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span>
|
||||
@ -740,7 +719,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlDropdown</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-443"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-455"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -749,7 +728,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-121"
|
||||
aria-controls="code-preview-source-group-127"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -827,9 +806,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-122">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-128">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-444"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dropdown-selection-alt<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-456"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dropdown-selection-alt<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-dropdown</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>trigger<span class="token punctuation">"</span></span> <span class="token attr-name">caret</span><span class="token punctuation">></span></span>Edit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu</span><span class="token punctuation">></span></span>
|
||||
@ -850,11 +829,11 @@
|
||||
copy<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'copy'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
paste<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'paste'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-444"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-456"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-445"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-457"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlDropdown <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/dropdown'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span>
|
||||
@ -885,7 +864,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlDropdown</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-445"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-457"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -894,7 +873,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-122"
|
||||
aria-controls="code-preview-source-group-128"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -963,9 +942,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-123">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-129">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-446"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-dropdown</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top-start<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-458"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-dropdown</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top-start<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>trigger<span class="token punctuation">"</span></span> <span class="token attr-name">caret</span><span class="token punctuation">></span></span>Edit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span><span class="token punctuation">></span></span>Cut<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
@ -976,11 +955,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span><span class="token punctuation">></span></span>Replace<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-dropdown</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-446"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-458"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-447"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-459"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlDropdown <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/dropdown'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
|
||||
@ -1001,7 +980,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlMenu</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlDropdown</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-447"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-459"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1010,7 +989,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-123"
|
||||
aria-controls="code-preview-source-group-129"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1079,9 +1058,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-124">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-130">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-448"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-dropdown</span> <span class="token attr-name">distance</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-460"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-dropdown</span> <span class="token attr-name">distance</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>trigger<span class="token punctuation">"</span></span> <span class="token attr-name">caret</span><span class="token punctuation">></span></span>Edit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span><span class="token punctuation">></span></span>Cut<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
@ -1092,11 +1071,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span><span class="token punctuation">></span></span>Replace<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-dropdown</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-448"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-460"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-449"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-461"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlDropdown <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/dropdown'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
|
||||
@ -1117,7 +1096,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlMenu</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlDropdown</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-449"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-461"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1126,7 +1105,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-124"
|
||||
aria-controls="code-preview-source-group-130"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1195,9 +1174,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-125">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-131">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-450"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-dropdown</span> <span class="token attr-name">skidding</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-462"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-dropdown</span> <span class="token attr-name">skidding</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>trigger<span class="token punctuation">"</span></span> <span class="token attr-name">caret</span><span class="token punctuation">></span></span>Edit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span><span class="token punctuation">></span></span>Cut<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
@ -1208,11 +1187,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span><span class="token punctuation">></span></span>Replace<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-dropdown</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-450"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-462"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-451"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-463"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlDropdown <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/dropdown'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
|
||||
@ -1233,7 +1212,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlMenu</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlDropdown</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-451"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-463"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1242,7 +1221,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-125"
|
||||
aria-controls="code-preview-source-group-131"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1329,9 +1308,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-126">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-132">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-452"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-dropdown</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-464"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-dropdown</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>trigger<span class="token punctuation">"</span></span> <span class="token attr-name">caret</span><span class="token punctuation">></span></span>Edit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
@ -1360,11 +1339,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-dropdown</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-452"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-464"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-453"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-465"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlDropdown <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/dropdown'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
|
||||
@ -1411,7 +1390,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlDropdown</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-453"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-465"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1420,7 +1399,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-126"
|
||||
aria-controls="code-preview-source-group-132"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1526,9 +1505,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-127">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-133">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-454"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dropdown-hoist<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-466"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dropdown-hoist<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-dropdown</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>trigger<span class="token punctuation">"</span></span> <span class="token attr-name">caret</span><span class="token punctuation">></span></span>No Hoist<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu</span><span class="token punctuation">></span></span>
|
||||
@ -1556,11 +1535,11 @@
|
||||
<span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-454"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-466"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-455"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-467"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlDropdown <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/dropdown'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
|
||||
@ -1603,7 +1582,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-455"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-467"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1612,7 +1591,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-127"
|
||||
aria-controls="code-preview-source-group-133"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1681,7 +1660,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-456"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/dropdown/dropdown.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-456"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-468"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/dropdown/dropdown.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-468"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -1696,17 +1675,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-457"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/dropdown/dropdown.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-457"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-469"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/dropdown/dropdown.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-469"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-458"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/dropdown/dropdown.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-458"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-470"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/dropdown/dropdown.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-470"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-459"><span class="token keyword">import</span> SlDropdown <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/dropdown'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-459"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-471"><span class="token keyword">import</span> SlDropdown <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/dropdown'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-471"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -92,27 +92,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -508,9 +487,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-128">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-140">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-460"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>format-bytes-overview<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-488"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>format-bytes-overview<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
The file is <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-bytes</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1000<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-bytes</span><span class="token punctuation">></span></span> in size. <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1000<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Number to Format<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 180px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-input</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
@ -522,11 +501,11 @@
|
||||
|
||||
input<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-input'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>formatter<span class="token punctuation">.</span>value <span class="token operator">=</span> input<span class="token punctuation">.</span>value <span class="token operator">||</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-460"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-488"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-461"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-489"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlFormatBytes <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-bytes'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
|
||||
@ -549,7 +528,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-461"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-489"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -558,7 +537,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-128"
|
||||
aria-controls="code-preview-source-group-140"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -620,17 +599,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-129">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-141">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-462"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-bytes</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>12<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-bytes</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<pre><code class="language-html" id="code-block-490"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-bytes</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>12<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-bytes</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-bytes</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1200<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-bytes</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-bytes</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1200000<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-bytes</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-bytes</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1200000000<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-bytes</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-462"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-490"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-463"><span class="token keyword">import</span> SlFormatBytes <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-bytes'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-491"><span class="token keyword">import</span> SlFormatBytes <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-bytes'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -643,7 +622,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlFormatBytes</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1200000000<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-463"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-491"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -652,7 +631,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-129"
|
||||
aria-controls="code-preview-source-group-141"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -711,17 +690,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-130">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-142">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-464"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-bytes</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>12<span class="token punctuation">"</span></span> <span class="token attr-name">unit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-bytes</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<pre><code class="language-html" id="code-block-492"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-bytes</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>12<span class="token punctuation">"</span></span> <span class="token attr-name">unit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-bytes</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-bytes</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1200<span class="token punctuation">"</span></span> <span class="token attr-name">unit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-bytes</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-bytes</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1200000<span class="token punctuation">"</span></span> <span class="token attr-name">unit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-bytes</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-bytes</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1200000000<span class="token punctuation">"</span></span> <span class="token attr-name">unit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-bytes</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-464"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-492"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-465"><span class="token keyword">import</span> SlFormatBytes <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-bytes'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-493"><span class="token keyword">import</span> SlFormatBytes <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-bytes'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -734,7 +713,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlFormatBytes</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1200000000<span class="token punctuation">"</span></span> <span class="token attr-name">unit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-465"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-493"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -743,7 +722,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-130"
|
||||
aria-controls="code-preview-source-group-142"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -802,17 +781,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-131">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-143">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-466"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-bytes</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>12<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-bytes</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<pre><code class="language-html" id="code-block-494"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-bytes</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>12<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-bytes</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-bytes</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1200<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-bytes</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-bytes</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1200000<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-bytes</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-bytes</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1200000000<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-bytes</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-466"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-494"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-467"><span class="token keyword">import</span> SlFormatBytes <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-bytes'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-495"><span class="token keyword">import</span> SlFormatBytes <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-bytes'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -825,7 +804,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlFormatBytes</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1200000000<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-467"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-495"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -834,7 +813,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-131"
|
||||
aria-controls="code-preview-source-group-143"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -903,7 +882,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-468"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/format-bytes/format-bytes.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-468"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-496"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/format-bytes/format-bytes.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-496"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -918,17 +897,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-469"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/format-bytes/format-bytes.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-469"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-497"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/format-bytes/format-bytes.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-497"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-470"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/format-bytes/format-bytes.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-470"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-498"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/format-bytes/format-bytes.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-498"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-471"><span class="token keyword">import</span> SlFormatBytes <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-bytes'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-471"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-499"><span class="token keyword">import</span> SlFormatBytes <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-bytes'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-499"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -92,27 +92,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -507,18 +486,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-132">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-144">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-472"><span class="token comment"><!-- Nebula 2 release date 🎉 --></span>
|
||||
<pre><code class="language-html" id="code-block-500"><span class="token comment"><!-- Nebula 2 release date 🎉 --></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-date</span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-07-15T09:17:00-04:00<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-date</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-472"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-500"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-473"><span class="token keyword">import</span> SlFormatDate <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-date'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-501"><span class="token keyword">import</span> SlFormatDate <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-date'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlFormatDate</span></span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-07-15T09:17:00-04:00<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-473"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-501"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -527,7 +506,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-132"
|
||||
aria-controls="code-preview-source-group-144"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -648,9 +627,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-133">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-145">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-474"><span class="token comment"><!-- Human-readable date --></span>
|
||||
<pre><code class="language-html" id="code-block-502"><span class="token comment"><!-- Human-readable date --></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-date</span> <span class="token attr-name">month</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>long<span class="token punctuation">"</span></span> <span class="token attr-name">day</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>numeric<span class="token punctuation">"</span></span> <span class="token attr-name">year</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>numeric<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-date</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
|
||||
<span class="token comment"><!-- Time --></span>
|
||||
@ -667,11 +646,11 @@
|
||||
|
||||
<span class="token comment"><!-- No formatting options --></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-date</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-date</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-474"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-502"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-475"><span class="token keyword">import</span> SlFormatDate <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-date'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-503"><span class="token keyword">import</span> SlFormatDate <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-date'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -699,7 +678,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlFormatDate</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-475"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-503"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -708,7 +687,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-133"
|
||||
aria-controls="code-preview-source-group-145"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -768,15 +747,15 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-134">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-146">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-476"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-date</span> <span class="token attr-name">hour</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>numeric<span class="token punctuation">"</span></span> <span class="token attr-name">minute</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>numeric<span class="token punctuation">"</span></span> <span class="token attr-name">hour-format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>12<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-date</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<pre><code class="language-html" id="code-block-504"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-date</span> <span class="token attr-name">hour</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>numeric<span class="token punctuation">"</span></span> <span class="token attr-name">minute</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>numeric<span class="token punctuation">"</span></span> <span class="token attr-name">hour-format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>12<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-date</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-date</span> <span class="token attr-name">hour</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>numeric<span class="token punctuation">"</span></span> <span class="token attr-name">minute</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>numeric<span class="token punctuation">"</span></span> <span class="token attr-name">hour-format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>24<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-date</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-476"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-504"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-477"><span class="token keyword">import</span> SlFormatDate <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-date'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-505"><span class="token keyword">import</span> SlFormatDate <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-date'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -785,7 +764,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlFormatDate</span></span> <span class="token attr-name">hour</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>numeric<span class="token punctuation">"</span></span> <span class="token attr-name">minute</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>numeric<span class="token punctuation">"</span></span> <span class="token attr-name">hour-format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>24<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-477"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-505"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -794,7 +773,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-134"
|
||||
aria-controls="code-preview-source-group-146"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -852,16 +831,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-135">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-147">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-478">English: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-date</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-date</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<pre><code class="language-html" id="code-block-506">English: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-date</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-date</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
French: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-date</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fr<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-date</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
Russian: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-date</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ru<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-date</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-478"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-506"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-479"><span class="token keyword">import</span> SlFormatDate <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-date'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-507"><span class="token keyword">import</span> SlFormatDate <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-date'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -872,7 +851,7 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
|
||||
Russian: </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlFormatDate</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ru<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-479"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-507"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -881,7 +860,7 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-135"
|
||||
aria-controls="code-preview-source-group-147"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -950,7 +929,7 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-480"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/format-date/format-date.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-480"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-508"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/format-date/format-date.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-508"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -965,17 +944,17 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-481"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/format-date/format-date.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-481"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-509"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/format-date/format-date.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-509"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-482"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/format-date/format-date.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-482"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-510"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/format-date/format-date.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-510"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-483"><span class="token keyword">import</span> SlFormatDate <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-date'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-483"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-511"><span class="token keyword">import</span> SlFormatDate <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-date'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-511"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -92,27 +92,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -520,9 +499,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-136">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-148">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-484"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>format-number-overview<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-512"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>format-number-overview<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-number</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1000<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-number</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1000<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Number to Format<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 180px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-input</span><span class="token punctuation">></span></span>
|
||||
@ -535,11 +514,11 @@
|
||||
|
||||
input<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-input'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>formatter<span class="token punctuation">.</span>value <span class="token operator">=</span> input<span class="token punctuation">.</span>value <span class="token operator">||</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-484"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-512"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-485"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-513"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlFormatNumber <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-number'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -561,7 +540,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-485"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-513"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -570,7 +549,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-136"
|
||||
aria-controls="code-preview-source-group-148"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -633,18 +612,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-137">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-149">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-486"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-number</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>percent<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-number</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<pre><code class="language-html" id="code-block-514"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-number</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>percent<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-number</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-number</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>percent<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0.25<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-number</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-number</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>percent<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0.50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-number</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-number</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>percent<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0.75<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-number</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-number</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>percent<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-number</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-486"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-514"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-487"><span class="token keyword">import</span> SlFormatNumber <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-number'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-515"><span class="token keyword">import</span> SlFormatNumber <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-number'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -659,7 +638,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlFormatNumber</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>percent<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-487"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-515"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -668,7 +647,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-137"
|
||||
aria-controls="code-preview-source-group-149"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -726,16 +705,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-138">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-150">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-488">English: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-number</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2000<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span> <span class="token attr-name">minimum-fraction-digits</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-number</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<pre><code class="language-html" id="code-block-516">English: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-number</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2000<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span> <span class="token attr-name">minimum-fraction-digits</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-number</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
German: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-number</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2000<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de<span class="token punctuation">"</span></span> <span class="token attr-name">minimum-fraction-digits</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-number</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
Russian: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-number</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2000<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ru<span class="token punctuation">"</span></span> <span class="token attr-name">minimum-fraction-digits</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-number</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-488"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-516"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-489"><span class="token keyword">import</span> SlFormatNumber <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-number'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-517"><span class="token keyword">import</span> SlFormatNumber <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-number'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -746,7 +725,7 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
|
||||
Russian: </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlFormatNumber</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2000<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ru<span class="token punctuation">"</span></span> <span class="token attr-name">minimum-fraction-digits</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-489"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-517"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -755,7 +734,7 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-138"
|
||||
aria-controls="code-preview-source-group-150"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -819,18 +798,18 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-139">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-151">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-490"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-number</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>currency<span class="token punctuation">"</span></span> <span class="token attr-name">currency</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>USD<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2000<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en-US<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-number</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<pre><code class="language-html" id="code-block-518"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-number</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>currency<span class="token punctuation">"</span></span> <span class="token attr-name">currency</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>USD<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2000<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en-US<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-number</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-number</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>currency<span class="token punctuation">"</span></span> <span class="token attr-name">currency</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>GBP<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2000<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en-GB<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-number</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-number</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>currency<span class="token punctuation">"</span></span> <span class="token attr-name">currency</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>EUR<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2000<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-number</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-number</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>currency<span class="token punctuation">"</span></span> <span class="token attr-name">currency</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>RUB<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2000<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ru<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-number</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-format-number</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>currency<span class="token punctuation">"</span></span> <span class="token attr-name">currency</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>CNY<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2000<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zh-cn<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-format-number</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-490"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-518"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-491"><span class="token keyword">import</span> SlFormatNumber <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-number'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-519"><span class="token keyword">import</span> SlFormatNumber <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-number'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -845,7 +824,7 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlFormatNumber</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>currency<span class="token punctuation">"</span></span> <span class="token attr-name">currency</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>CNY<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2000<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zh-cn<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-491"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-519"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -854,7 +833,7 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-139"
|
||||
aria-controls="code-preview-source-group-151"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -923,7 +902,7 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-492"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/format-number/format-number.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-492"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-520"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/format-number/format-number.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-520"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -938,17 +917,17 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-493"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/format-number/format-number.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-493"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-521"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/format-number/format-number.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-521"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-494"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/format-number/format-number.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-494"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-522"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/format-number/format-number.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-522"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-495"><span class="token keyword">import</span> SlFormatNumber <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-number'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-495"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-523"><span class="token keyword">import</span> SlFormatNumber <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/format-number'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-523"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -98,27 +98,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -514,17 +493,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-159">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-152">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-534"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon-button</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gear<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Settings<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon-button</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-534"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-524"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon-button</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gear<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Settings<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon-button</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-524"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-535"><span class="token keyword">import</span> SlIconButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon-button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-525"><span class="token keyword">import</span> SlIconButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon-button'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlIconButton</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gear<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Settings<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-535"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-525"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -533,7 +512,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-159"
|
||||
aria-controls="code-preview-source-group-152"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -592,16 +571,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-160">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-153">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-536"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon-button</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pencil<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Edit<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-size</span><span class="token punctuation">:</span> 1.5rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon-button</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-526"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon-button</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pencil<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Edit<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-size</span><span class="token punctuation">:</span> 1.5rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon-button</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pencil<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Edit<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-size</span><span class="token punctuation">:</span> 2rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon-button</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pencil<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Edit<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-size</span><span class="token punctuation">:</span> 2.5rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon-button</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-536"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-526"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-537"><span class="token keyword">import</span> SlIconButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon-button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-527"><span class="token keyword">import</span> SlIconButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon-button'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -610,7 +589,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlIconButton</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pencil<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Edit<span class="token punctuation">"</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token string">'2.5rem'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-537"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-527"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -619,7 +598,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-160"
|
||||
aria-controls="code-preview-source-group-153"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -695,9 +674,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-161">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-154">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-538"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon-button-color<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-528"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon-button-color<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon-button</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>type-bold<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Bold<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon-button</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>type-italic<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Italic<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon-button</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>type-underline<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Underline<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon-button</span><span class="token punctuation">></span></span>
|
||||
@ -717,11 +696,11 @@
|
||||
<span class="token property">color</span><span class="token punctuation">:</span> #960077<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-538"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-528"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-539"><span class="token keyword">import</span> SlIconButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon-button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-529"><span class="token keyword">import</span> SlIconButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon-button'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||||
.icon-button-color sl-icon-button::part(base) {
|
||||
@ -749,7 +728,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-539"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-529"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -758,7 +737,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-161"
|
||||
aria-controls="code-preview-source-group-154"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -814,17 +793,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-162">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-155">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-540"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon-button</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gear<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Settings<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://example.com<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon-button</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-540"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-530"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon-button</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gear<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Settings<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://example.com<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon-button</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-530"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-541"><span class="token keyword">import</span> SlIconButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon-button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-531"><span class="token keyword">import</span> SlIconButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon-button'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlIconButton</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gear<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Settings<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://example.com<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-541"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-531"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -833,7 +812,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-162"
|
||||
aria-controls="code-preview-source-group-155"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -894,16 +873,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-163">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-156">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-542"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Settings<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-532"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Settings<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon-button</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gear<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Settings<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tooltip</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-542"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-532"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-543"><span class="token keyword">import</span> SlIconButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon-button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-533"><span class="token keyword">import</span> SlIconButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon-button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlTooltip <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tooltip'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -911,7 +890,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlIconButton</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gear<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Settings<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTooltip</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-543"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-533"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -920,7 +899,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-163"
|
||||
aria-controls="code-preview-source-group-156"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -976,17 +955,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-164">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-157">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-544"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon-button</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gear<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Settings<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon-button</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-544"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-534"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon-button</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gear<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Settings<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon-button</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-534"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-545"><span class="token keyword">import</span> SlIconButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon-button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-535"><span class="token keyword">import</span> SlIconButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon-button'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlIconButton</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gear<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Settings<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-545"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-535"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -995,7 +974,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-164"
|
||||
aria-controls="code-preview-source-group-157"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1064,7 +1043,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-546"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/icon-button/icon-button.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-546"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-536"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/icon-button/icon-button.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-536"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -1079,17 +1058,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-547"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/icon-button/icon-button.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-547"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-537"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/icon-button/icon-button.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-537"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-548"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/icon-button/icon-button.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-548"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-538"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/icon-button/icon-button.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-538"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-549"><span class="token keyword">import</span> SlIconButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon-button'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-549"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-539"><span class="token keyword">import</span> SlIconButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon-button'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-539"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -98,27 +98,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -535,8 +514,8 @@
|
||||
All available icons in the <code>default</code> icon library are shown below. Click or tap on any icon to
|
||||
copy its name, then you can use it in your HTML like this.
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-496"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon-name-here<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-496"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-548"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon-name-here<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-548"></sl-copy-button></pre>
|
||||
<div class="icon-search">
|
||||
<div class="icon-search-controls">
|
||||
<sl-input placeholder="Search Icons" clearable="">
|
||||
@ -592,9 +571,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-140">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-160">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-497"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">color</span><span class="token punctuation">:</span> #4a90e2<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-549"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">color</span><span class="token punctuation">:</span> #4a90e2<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>exclamation-triangle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>archive<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>battery-charging<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
@ -618,11 +597,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>star<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>trash<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-497"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-549"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-498"><span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-550"><span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -652,7 +631,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-498"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-550"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -661,7 +640,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-140"
|
||||
aria-controls="code-preview-source-group-160"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -735,9 +714,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-141">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-161">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-499"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-size</span><span class="token punctuation">:</span> 32px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-551"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-size</span><span class="token punctuation">:</span> 32px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>exclamation-triangle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>archive<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>battery-charging<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
@ -755,11 +734,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>star<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>trash<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-499"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-551"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-500"><span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-552"><span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token string">'32px'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -781,7 +760,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlIcon</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>trash<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-500"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-552"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -790,7 +769,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-141"
|
||||
aria-controls="code-preview-source-group-161"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -844,17 +823,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-142">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-162">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-501"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>star-fill<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Add to favorites<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-501"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-553"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>star-fill<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Add to favorites<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-553"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-502"><span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-554"><span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlIcon</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>star-fill<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Add to favorites<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-502"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-554"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -863,7 +842,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-142"
|
||||
aria-controls="code-preview-source-group-162"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -923,17 +902,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-143">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-163">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-503"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/assets/images/shoe.svg<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-size</span><span class="token punctuation">:</span> 8rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-503"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-555"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/assets/images/shoe.svg<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-size</span><span class="token punctuation">:</span> 8rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-555"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-504"><span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-556"><span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlIcon</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/assets/images/shoe.svg<span class="token punctuation">"</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token string">'8rem'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlIcon</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-504"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-556"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -942,7 +921,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-143"
|
||||
aria-controls="code-preview-source-group-163"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1013,7 +992,7 @@
|
||||
function.
|
||||
</p>
|
||||
<p>Here’s an example that registers an icon library located in the <code>/assets/icons</code> directory.</p>
|
||||
<pre><code class="language-html" id="code-block-505"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<pre><code class="language-html" id="code-block-557"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> registerIconLibrary <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'/dist/utilities/icon-library.js'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function">registerIconLibrary</span><span class="token punctuation">(</span><span class="token string">'my-icons'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
@ -1021,14 +1000,14 @@
|
||||
<span class="token function-variable function">mutator</span><span class="token operator">:</span> <span class="token parameter">svg</span> <span class="token operator">=></span> svg<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'fill'</span><span class="token punctuation">,</span> <span class="token string">'currentColor'</span><span class="token punctuation">)</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-505"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-557"></sl-copy-button></pre>
|
||||
<p>
|
||||
To display an icon, set the <code>library</code> and <code>name</code> attributes of an
|
||||
<code><sl-icon></code> element.
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-506"><span class="token comment"><!-- This will show the icon located at /assets/icons/smile.svg --></span>
|
||||
<pre><code class="language-html" id="code-block-558"><span class="token comment"><!-- This will show the icon located at /assets/icons/smile.svg --></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-icons<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>smile<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-506"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-558"></sl-copy-button></pre>
|
||||
<p>If an icon is used before registration occurs, it will be empty initially but shown when registered.</p>
|
||||
<p>
|
||||
The following examples demonstrate how to register a number of popular, open source icon libraries via CDN.
|
||||
@ -1055,9 +1034,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-144">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-164">
|
||||
<div class="code-preview__source code-preview__source--html">
|
||||
<pre><code class="language-html" id="code-block-507"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-size</span><span class="token punctuation">:</span> 24px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-559"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-size</span><span class="token punctuation">:</span> 24px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>oxy<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>oxy<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>snr<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>oxy<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btc<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
@ -1065,7 +1044,7 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>oxy<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>usdc<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>oxy<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>osmo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-507"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-559"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1074,7 +1053,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-144"
|
||||
aria-controls="code-preview-source-group-164"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1173,9 +1152,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-145">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-165">
|
||||
<div class="code-preview__source code-preview__source--html">
|
||||
<pre><code class="language-html" id="code-block-508"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<pre><code class="language-html" id="code-block-560"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> registerIconLibrary <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'/dist/utilities/icon-library.js'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function">registerIconLibrary</span><span class="token punctuation">(</span><span class="token string">'boxicons'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
@ -1211,7 +1190,7 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>boxicons<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bxl-opera<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>boxicons<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bxl-microsoft<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-508"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-560"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1220,7 +1199,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-145"
|
||||
aria-controls="code-preview-source-group-165"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1299,9 +1278,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-146">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-166">
|
||||
<div class="code-preview__source code-preview__source--html">
|
||||
<pre><code class="language-html" id="code-block-509"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-size</span><span class="token punctuation">:</span> 24px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-561"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-size</span><span class="token punctuation">:</span> 24px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lucide<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>feather<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lucide<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>pie-chart<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>lucide<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>settings<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
@ -1317,7 +1296,7 @@
|
||||
<span class="token function-variable function">resolver</span><span class="token operator">:</span> <span class="token parameter">name</span> <span class="token operator">=></span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">https://cdn.jsdelivr.net/npm/lucide-static@0.16.29/icons/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.svg</span><span class="token template-punctuation string">`</span></span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-509"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-561"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1326,7 +1305,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-146"
|
||||
aria-controls="code-preview-source-group-166"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1429,9 +1408,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-147">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-167">
|
||||
<div class="code-preview__source code-preview__source--html">
|
||||
<pre><code class="language-html" id="code-block-510"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<pre><code class="language-html" id="code-block-562"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> registerIconLibrary <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'/dist/utilities/icon-library.js'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function">registerIconLibrary</span><span class="token punctuation">(</span><span class="token string">'fa'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
@ -1468,7 +1447,7 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fa<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fab-opera<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fa<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fab-microsoft<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-510"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-562"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1477,7 +1456,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-147"
|
||||
aria-controls="code-preview-source-group-167"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1556,9 +1535,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-148">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-168">
|
||||
<div class="code-preview__source code-preview__source--html">
|
||||
<pre><code class="language-html" id="code-block-511"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<pre><code class="language-html" id="code-block-563"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> registerIconLibrary <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'/dist/utilities/icon-library.js'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function">registerIconLibrary</span><span class="token punctuation">(</span><span class="token string">'heroicons'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
@ -1574,7 +1553,7 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>heroicons<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gift<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>heroicons<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>speaker-wave<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-511"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-563"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1583,7 +1562,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-148"
|
||||
aria-controls="code-preview-source-group-168"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1660,9 +1639,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-149">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-169">
|
||||
<div class="code-preview__source code-preview__source--html">
|
||||
<pre><code class="language-html" id="code-block-512"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<pre><code class="language-html" id="code-block-564"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> registerIconLibrary <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'/dist/utilities/icon-library.js'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function">registerIconLibrary</span><span class="token punctuation">(</span><span class="token string">'iconoir'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
@ -1678,7 +1657,7 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iconoir<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>color-picker<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>iconoir<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>wifi<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-512"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-564"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1687,7 +1666,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-149"
|
||||
aria-controls="code-preview-source-group-169"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1788,9 +1767,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-150">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-170">
|
||||
<div class="code-preview__source code-preview__source--html">
|
||||
<pre><code class="language-html" id="code-block-513"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<pre><code class="language-html" id="code-block-565"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> registerIconLibrary <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'/dist/utilities/icon-library.js'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function">registerIconLibrary</span><span class="token punctuation">(</span><span class="token string">'ionicons'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
@ -1826,7 +1805,7 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ionicons<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>settings-sharp<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ionicons<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>warning-sharp<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-513"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-565"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1835,7 +1814,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-150"
|
||||
aria-controls="code-preview-source-group-170"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1924,9 +1903,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-151">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-171">
|
||||
<div class="code-preview__source code-preview__source--html">
|
||||
<pre><code class="language-html" id="code-block-514"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<pre><code class="language-html" id="code-block-566"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> registerIconLibrary <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'/dist/utilities/icon-library.js'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function">registerIconLibrary</span><span class="token punctuation">(</span><span class="token string">'jam'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
@ -1950,7 +1929,7 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>jam<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>picture-f<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>jam<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>set-square-f<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-514"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-566"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1959,7 +1938,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-151"
|
||||
aria-controls="code-preview-source-group-171"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -2064,9 +2043,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-152">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-172">
|
||||
<div class="code-preview__source code-preview__source--html">
|
||||
<pre><code class="language-html" id="code-block-515"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<pre><code class="language-html" id="code-block-567"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> registerIconLibrary <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'/dist/utilities/icon-library.js'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function">registerIconLibrary</span><span class="token punctuation">(</span><span class="token string">'material'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
@ -2100,7 +2079,7 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>material<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>settings_sharp<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>material<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>shopping_basket_sharp<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-515"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-567"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2109,7 +2088,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-152"
|
||||
aria-controls="code-preview-source-group-172"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -2202,9 +2181,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-153">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-173">
|
||||
<div class="code-preview__source code-preview__source--html">
|
||||
<pre><code class="language-html" id="code-block-516"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<pre><code class="language-html" id="code-block-568"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> registerIconLibrary <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'/dist/utilities/icon-library.js'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function">registerIconLibrary</span><span class="token punctuation">(</span><span class="token string">'remixicon'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
@ -2232,7 +2211,7 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>remixicon<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>media/image-fill<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>remixicon<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>system/alert-fill<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-516"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-568"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2241,7 +2220,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-153"
|
||||
aria-controls="code-preview-source-group-173"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -2327,9 +2306,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-154">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-174">
|
||||
<div class="code-preview__source code-preview__source--html">
|
||||
<pre><code class="language-html" id="code-block-517"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<pre><code class="language-html" id="code-block-569"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> registerIconLibrary <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'/dist/utilities/icon-library.js'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function">registerIconLibrary</span><span class="token punctuation">(</span><span class="token string">'tabler'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
@ -2352,7 +2331,7 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tabler<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ship<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tabler<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>toilet-paper<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-517"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-569"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2361,7 +2340,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-154"
|
||||
aria-controls="code-preview-source-group-174"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -2456,9 +2435,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-155">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-175">
|
||||
<div class="code-preview__source code-preview__source--html">
|
||||
<pre><code class="language-html" id="code-block-518"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<pre><code class="language-html" id="code-block-570"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> registerIconLibrary <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'/dist/utilities/icon-library.js'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function">registerIconLibrary</span><span class="token punctuation">(</span><span class="token string">'unicons'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
@ -2487,7 +2466,7 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>unicons<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rocket-s<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>unicons<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>star-s<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-518"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-570"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2496,7 +2475,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-155"
|
||||
aria-controls="code-preview-source-group-175"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -2546,14 +2525,14 @@
|
||||
library, register an icon library using the <code>default</code> name and a custom resolver.
|
||||
</p>
|
||||
<p>This example will load the same set of icons from the jsDelivr CDN instead of your local assets folder.</p>
|
||||
<pre><code class="language-html" id="code-block-519"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<pre><code class="language-html" id="code-block-571"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> registerIconLibrary <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'/dist/utilities/icon-library.js'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function">registerIconLibrary</span><span class="token punctuation">(</span><span class="token string">'default'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
<span class="token function-variable function">resolver</span><span class="token operator">:</span> <span class="token parameter">name</span> <span class="token operator">=></span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">https://cdn.jsdelivr.net/npm/bootstrap-icons@1.0.0/icons/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.svg</span><span class="token template-punctuation string">`</span></span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-519"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-571"></sl-copy-button></pre>
|
||||
<h4 id="customize-the-default-library-to-use-svg-sprites" class="anchor-heading">
|
||||
Customize the default library to use SVG sprites<a
|
||||
href="#customize-the-default-library-to-use-svg-sprites"
|
||||
@ -2602,9 +2581,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-156">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-176">
|
||||
<div class="code-preview__source code-preview__source--html">
|
||||
<pre><code class="language-html" id="code-block-520"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<pre><code class="language-html" id="code-block-572"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> registerIconLibrary <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'/dist/utilities/icon-library.js'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function">registerIconLibrary</span><span class="token punctuation">(</span><span class="token string">'sprite'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
@ -2618,7 +2597,7 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sprite<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>clock<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">library</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sprite<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>speedometer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-520"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-572"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2627,7 +2606,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-156"
|
||||
aria-controls="code-preview-source-group-176"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -2678,14 +2657,14 @@
|
||||
provide all of the icons that are required by components. You can reference
|
||||
<code>src/components/library.system.ts</code> for a complete list of system icons used by Nebula.
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-521"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<pre><code class="language-html" id="code-block-573"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<span class="token keyword">import</span> <span class="token punctuation">{</span> registerIconLibrary <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'/dist/utilities/icon-library.js'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token function">registerIconLibrary</span><span class="token punctuation">(</span><span class="token string">'system'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||||
<span class="token function-variable function">resolver</span><span class="token operator">:</span> <span class="token parameter">name</span> <span class="token operator">=></span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/path/to/custom/icons/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.svg</span><span class="token template-punctuation string">`</span></span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-521"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-573"></sl-copy-button></pre>
|
||||
<!-- Supporting scripts and styles for the search utility -->
|
||||
<script>
|
||||
function wrapWithTooltip(item) {
|
||||
@ -2902,7 +2881,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-522"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/icon/icon.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-522"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-574"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/icon/icon.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-574"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -2917,17 +2896,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-523"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/icon/icon.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-523"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-575"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/icon/icon.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-575"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-524"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/icon/icon.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-524"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-576"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/icon/icon.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-576"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-525"><span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-525"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-577"><span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-577"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -92,27 +92,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -515,9 +494,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-157">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-158">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-526"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-image-comparer</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-540"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-image-comparer</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||||
<span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>before<span class="token punctuation">"</span></span>
|
||||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://images.unsplash.com/photo-1517331156700-3c241d2b4d83?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80&sat=-100&bri=-5<span class="token punctuation">"</span></span>
|
||||
@ -529,11 +508,11 @@
|
||||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Color version of kittens in a basket looking around.<span class="token punctuation">"</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-image-comparer</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-526"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-540"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-527"><span class="token keyword">import</span> SlImageComparer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/image-comparer'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-541"><span class="token keyword">import</span> SlImageComparer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/image-comparer'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlImageComparer</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -549,7 +528,7 @@
|
||||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlImageComparer</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-527"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-541"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -558,7 +537,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-157"
|
||||
aria-controls="code-preview-source-group-158"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -631,9 +610,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-158">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-159">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-528"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-image-comparer</span> <span class="token attr-name">position</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>25<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-542"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-image-comparer</span> <span class="token attr-name">position</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>25<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span>
|
||||
<span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>before<span class="token punctuation">"</span></span>
|
||||
<span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://images.unsplash.com/photo-1520903074185-8eca362b3dce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1200&q=80<span class="token punctuation">"</span></span>
|
||||
@ -645,11 +624,11 @@
|
||||
<span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A person sitting on a yellow curb tying shoelaces on a boot.<span class="token punctuation">"</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-image-comparer</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-528"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-542"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-529"><span class="token keyword">import</span> SlImageComparer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/image-comparer'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-543"><span class="token keyword">import</span> SlImageComparer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/image-comparer'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlImageComparer</span></span> <span class="token attr-name">position</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">25</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -665,7 +644,7 @@
|
||||
<span class="token punctuation">/></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlImageComparer</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-529"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-543"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -674,7 +653,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-158"
|
||||
aria-controls="code-preview-source-group-159"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -743,7 +722,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-530"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/image-comparer/image-comparer.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-530"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-544"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/image-comparer/image-comparer.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-544"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -758,17 +737,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-531"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/image-comparer/image-comparer.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-531"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-545"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/image-comparer/image-comparer.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-545"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-532"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/image-comparer/image-comparer.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-532"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-546"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/image-comparer/image-comparer.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-546"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-533"><span class="token keyword">import</span> SlImageComparer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/image-comparer'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-533"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-547"><span class="token keyword">import</span> SlImageComparer <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/image-comparer'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-547"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -92,27 +92,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -503,17 +482,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-165">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-196">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-550"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-include</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/assets/examples/include.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-include</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-550"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-623"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-include</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/assets/examples/include.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-include</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-623"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-551"><span class="token keyword">import</span> SlInclude <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/include'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-624"><span class="token keyword">import</span> SlInclude <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/include'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlInclude</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/assets/examples/include.html<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-551"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-624"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -522,7 +501,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-165"
|
||||
aria-controls="code-preview-source-group-196"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -579,7 +558,7 @@
|
||||
<code>event.detail.status</code> will contain the resulting HTTP status code of the request, e.g. 404 (not
|
||||
found).
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-552"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-include</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/assets/examples/include.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-include</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-625"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-include</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/assets/examples/include.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-include</span><span class="token punctuation">></span></span>
|
||||
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<span class="token keyword">const</span> include <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'sl-include'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@ -596,7 +575,7 @@
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-552"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-625"></sl-copy-button></pre>
|
||||
|
||||
<h2 id="importing" class="anchor-heading">
|
||||
Importing<a href="#importing" aria-label='Direct link to "Importing"'></a>
|
||||
@ -625,7 +604,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-553"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/include/include.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-553"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-626"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/include/include.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-626"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -640,17 +619,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-554"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/include/include.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-554"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-627"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/include/include.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-627"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-555"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/include/include.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-555"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-628"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/include/include.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-628"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-556"><span class="token keyword">import</span> SlInclude <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/include'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-556"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-629"><span class="token keyword">import</span> SlInclude <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/include'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-629"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -92,27 +92,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -509,17 +488,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-172">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-183">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-573"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-input</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-input</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-573"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-594"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-input</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-input</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-594"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-574"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-595"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlInput</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-574"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-595"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -528,7 +507,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-172"
|
||||
aria-controls="code-preview-source-group-183"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -595,18 +574,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-173">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-184">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-575"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-input</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>What is your name?<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-input</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-575"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-596"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-input</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>What is your name?<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-input</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-596"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-576"><span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-597"><span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlInput</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>What is your name?<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-576"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-597"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -615,7 +594,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-173"
|
||||
aria-controls="code-preview-source-group-184"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -674,18 +653,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-174">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-185">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-577"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-input</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Nickname<span class="token punctuation">"</span></span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>What would you like people to call you?<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-input</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-577"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-598"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-input</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Nickname<span class="token punctuation">"</span></span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>What would you like people to call you?<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-input</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-598"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-578"><span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-599"><span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlInput</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Nickname<span class="token punctuation">"</span></span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>What would you like people to call you?<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-578"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-599"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -694,7 +673,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-174"
|
||||
aria-controls="code-preview-source-group-185"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -750,17 +729,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-175">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-186">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-579"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Type something<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-input</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-579"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-600"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Type something<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-input</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-600"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-580"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-601"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlInput</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Type something<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-580"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-601"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -769,7 +748,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-175"
|
||||
aria-controls="code-preview-source-group-186"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -825,17 +804,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-176">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-187">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-581"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Clearable<span class="token punctuation">"</span></span> <span class="token attr-name">clearable</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-input</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-581"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-602"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Clearable<span class="token punctuation">"</span></span> <span class="token attr-name">clearable</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-input</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-602"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-582"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-603"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlInput</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Clearable<span class="token punctuation">"</span></span> <span class="token attr-name">clearable</span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-582"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-603"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -844,7 +823,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-176"
|
||||
aria-controls="code-preview-source-group-187"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -903,17 +882,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-177">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-188">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-583"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Password Toggle<span class="token punctuation">"</span></span> <span class="token attr-name">password-toggle</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-input</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-583"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-604"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Password Toggle<span class="token punctuation">"</span></span> <span class="token attr-name">password-toggle</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-input</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-604"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-584"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-605"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlInput</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Password Toggle<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span> <span class="token attr-name">password-toggle</span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-584"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-605"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -922,7 +901,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-177"
|
||||
aria-controls="code-preview-source-group-188"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -978,17 +957,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-178">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-189">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-585"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Type something<span class="token punctuation">"</span></span> <span class="token attr-name">filled</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-input</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-585"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-606"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Type something<span class="token punctuation">"</span></span> <span class="token attr-name">filled</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-input</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-606"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-586"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-607"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlInput</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Type something<span class="token punctuation">"</span></span> <span class="token attr-name">filled</span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-586"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-607"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -997,7 +976,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-178"
|
||||
aria-controls="code-preview-source-group-189"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1053,17 +1032,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-179">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-190">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-587"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Disabled<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-input</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-587"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-608"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Disabled<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-input</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-608"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-588"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-609"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlInput</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Disabled<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-588"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-609"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1072,7 +1051,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-179"
|
||||
aria-controls="code-preview-source-group-190"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1130,18 +1109,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-180">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-191">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-589"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Small<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-input</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-610"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Small<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-input</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Medium<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-input</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Large<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-input</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-589"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-610"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-590"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-611"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -1152,7 +1131,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlInput</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Large<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-590"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-611"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1161,7 +1140,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-180"
|
||||
aria-controls="code-preview-source-group-191"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1219,18 +1198,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-181">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-192">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-591"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Small<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-input</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-612"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Small<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-input</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Medium<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-input</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Large<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-input</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-591"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-612"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-592"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-613"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -1241,7 +1220,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlInput</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Large<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-592"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-613"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1250,7 +1229,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-181"
|
||||
aria-controls="code-preview-source-group-192"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1310,18 +1289,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-182">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-193">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-593"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Email<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-input</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-614"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Email<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-input</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Number<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-input</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Date<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-input</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-593"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-614"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-594"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-615"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -1332,7 +1311,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlInput</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Date<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-594"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-615"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1341,7 +1320,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-182"
|
||||
aria-controls="code-preview-source-group-193"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1413,9 +1392,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-183">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-194">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-595"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Small<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-616"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-input</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Small<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>house<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>prefix<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>chat<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>suffix<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-input</span><span class="token punctuation">></span></span>
|
||||
@ -1429,11 +1408,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>house<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>prefix<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>chat<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>suffix<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-input</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-595"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-616"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-596"><span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-617"><span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -1454,7 +1433,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlInput</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-596"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-617"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1463,7 +1442,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-183"
|
||||
aria-controls="code-preview-source-group-194"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1554,9 +1533,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-184">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-195">
|
||||
<div class="code-preview__source code-preview__source--html">
|
||||
<pre><code class="language-html" id="code-block-597"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-input</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>label-on-left<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Name<span class="token punctuation">"</span></span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Enter your name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-input</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-618"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-input</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>label-on-left<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Name<span class="token punctuation">"</span></span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Enter your name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-input</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-input</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>label-on-left<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Email<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Enter your email<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-input</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-textarea</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>label-on-left<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Bio<span class="token punctuation">"</span></span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Tell us something about yourself<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-textarea</span><span class="token punctuation">></span></span>
|
||||
|
||||
@ -1585,7 +1564,7 @@
|
||||
<span class="token property">grid-column-start</span><span class="token punctuation">:</span> 2<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-597"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-618"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1594,7 +1573,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-184"
|
||||
aria-controls="code-preview-source-group-195"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1655,7 +1634,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-598"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/input/input.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-598"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-619"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/input/input.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-619"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -1670,17 +1649,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-599"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/input/input.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-599"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-620"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/input/input.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-620"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-600"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/input/input.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-600"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-621"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/input/input.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-621"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-601"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-601"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-622"><span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-622"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -92,27 +92,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -518,9 +497,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-166">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-177">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-557"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-578"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span><span class="token punctuation">></span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span><span class="token punctuation">></span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span><span class="token punctuation">></span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
@ -537,11 +516,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>suffix<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>heart<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-557"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-578"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-558"><span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-579"><span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span>
|
||||
@ -567,7 +546,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlMenuItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlMenu</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-558"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-579"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -576,7 +555,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-166"
|
||||
aria-controls="code-preview-source-group-177"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -655,9 +634,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-167">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-178">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-559"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-580"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>prefix<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>house<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
Home
|
||||
@ -676,11 +655,11 @@
|
||||
Settings
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-559"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-580"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-560"><span class="token keyword">import</span> SlBadge <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/badge'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-581"><span class="token keyword">import</span> SlBadge <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/badge'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
|
||||
@ -709,7 +688,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlMenuItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlMenu</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-560"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-581"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -718,7 +697,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-167"
|
||||
aria-controls="code-preview-source-group-178"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -778,18 +757,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-168">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-179">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-561"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-582"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span><span class="token punctuation">></span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span><span class="token punctuation">></span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-561"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-582"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-562"><span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-583"><span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -799,7 +778,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlMenuItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlMenuItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlMenu</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-562"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-583"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -808,7 +787,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-168"
|
||||
aria-controls="code-preview-source-group-179"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -871,18 +850,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-169">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-180">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-563"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-584"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span><span class="token punctuation">></span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span> <span class="token attr-name">loading</span><span class="token punctuation">></span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span><span class="token punctuation">></span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-563"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-584"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-564"><span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-585"><span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -892,7 +871,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlMenuItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlMenuItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlMenu</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-564"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-585"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -901,7 +880,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-169"
|
||||
aria-controls="code-preview-source-group-180"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -968,18 +947,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-170">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-181">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-565"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-586"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Autosave<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span><span class="token punctuation">></span></span>Check Spelling<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Word Wrap<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-565"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-586"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-566"><span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-587"><span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -991,7 +970,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlMenuItem</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Word Wrap</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlMenuItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlMenu</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-566"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-587"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1000,7 +979,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-170"
|
||||
aria-controls="code-preview-source-group-181"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1086,9 +1065,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-171">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-182">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-567"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menu-value<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-588"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menu-value<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>opt-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>opt-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>opt-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
@ -1112,11 +1091,11 @@
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-567"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-588"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-568"><span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-589"><span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
@ -1138,7 +1117,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlMenu</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-568"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-589"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1147,7 +1126,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-171"
|
||||
aria-controls="code-preview-source-group-182"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1216,7 +1195,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-569"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/menu-item/menu-item.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-569"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-590"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/menu-item/menu-item.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-590"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -1231,17 +1210,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-570"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/menu-item/menu-item.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-570"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-591"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/menu-item/menu-item.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-591"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-571"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/menu-item/menu-item.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-571"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-592"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/menu-item/menu-item.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-592"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-572"><span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-572"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-593"><span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-593"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -92,27 +92,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -502,9 +481,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-185">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-197">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-602"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-630"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-label</span><span class="token punctuation">></span></span>Fruits<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-label</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>apple<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Apple<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>banana<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Banana<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
@ -515,11 +494,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>carrot<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Carrot<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zucchini<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Zucchini<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-602"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-630"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-603"><span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-631"><span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlMenuLabel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-label'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span>
|
||||
@ -537,7 +516,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlMenuItem</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zucchini<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Zucchini</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlMenuItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlMenu</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-603"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-631"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -546,7 +525,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-185"
|
||||
aria-controls="code-preview-source-group-197"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -615,7 +594,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-604"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/menu-label/menu-label.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-604"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-632"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/menu-label/menu-label.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-632"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -630,17 +609,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-605"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/menu-label/menu-label.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-605"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-633"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/menu-label/menu-label.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-633"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-606"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/menu-label/menu-label.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-606"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-634"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/menu-label/menu-label.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-634"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-607"><span class="token keyword">import</span> SlMenuLabel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-label'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-607"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-635"><span class="token keyword">import</span> SlMenuLabel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-label'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-635"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -92,27 +92,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -509,9 +488,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-186">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-198">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-608"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-636"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>undo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Undo<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>redo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Redo<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-divider</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-divider</span><span class="token punctuation">></span></span>
|
||||
@ -520,11 +499,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>paste<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Paste<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>delete<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Delete<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-608"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-636"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-609"><span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-637"><span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -539,7 +518,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlMenuItem</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>delete<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Delete</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlMenuItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlMenu</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-609"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-637"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -548,7 +527,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-186"
|
||||
aria-controls="code-preview-source-group-198"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -621,9 +600,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-187">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-199">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-610"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-dropdown</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-638"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-dropdown</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>trigger<span class="token punctuation">"</span></span> <span class="token attr-name">caret</span><span class="token punctuation">></span></span>Edit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>cut<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Cut<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
@ -631,11 +610,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>paste<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Paste<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-dropdown</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-610"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-638"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-611"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-639"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlDropdown <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/dropdown'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span>
|
||||
@ -650,7 +629,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlMenu</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlDropdown</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-611"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-639"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -659,7 +638,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-187"
|
||||
aria-controls="code-preview-source-group-199"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -742,9 +721,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-188">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-200">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-612"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-640"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>undo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Undo<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-menu-item</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>redo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Redo<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-divider</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-divider</span><span class="token punctuation">></span></span>
|
||||
@ -769,11 +748,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-menu</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-612"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-640"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-613"><span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-641"><span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -804,7 +783,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlMenuItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlMenu</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-613"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-641"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -813,7 +792,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-188"
|
||||
aria-controls="code-preview-source-group-200"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -886,7 +865,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-614"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/menu/menu.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-614"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-642"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/menu/menu.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-642"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -901,17 +880,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-615"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/menu/menu.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-615"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-643"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/menu/menu.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-643"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-616"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/menu/menu.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-616"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-644"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/menu/menu.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-644"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-617"><span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-617"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-645"><span class="token keyword">import</span> SlMenu <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-645"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -98,27 +98,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -557,9 +536,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-192">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-204">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-627"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mutation-overview<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-655"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mutation-overview<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-mutation-observer</span> <span class="token attr-name">attr</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>variant<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Click to mutate<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-mutation-observer</span><span class="token punctuation">></span></span>
|
||||
@ -592,11 +571,11 @@
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-627"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-655"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-628"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-656"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlMutationObserver <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/mutation-observer'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -634,7 +613,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-628"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-656"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -643,7 +622,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-192"
|
||||
aria-controls="code-preview-source-group-204"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -758,9 +737,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-193">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-205">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-629"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mutation-child-list<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-657"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mutation-child-list<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-mutation-observer</span> <span class="token attr-name">child-list</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>buttons<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Add button<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
@ -808,11 +787,11 @@
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-629"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-657"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-630"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-658"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlMutationObserver <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/mutation-observer'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -859,7 +838,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-630"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-658"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -868,7 +847,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-193"
|
||||
aria-controls="code-preview-source-group-205"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -937,7 +916,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-631"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/mutation-observer/mutation-observer.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-631"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-659"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/mutation-observer/mutation-observer.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-659"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -952,17 +931,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-632"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/mutation-observer/mutation-observer.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-632"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-660"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/mutation-observer/mutation-observer.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-660"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-633"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/mutation-observer/mutation-observer.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-633"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-661"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/mutation-observer/mutation-observer.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-661"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-634"><span class="token keyword">import</span> SlMutationObserver <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/mutation-observer'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-634"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-662"><span class="token keyword">import</span> SlMutationObserver <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/mutation-observer'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-662"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -98,27 +98,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -511,18 +490,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-189">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-201">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-618"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-select</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select one<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-646"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-select</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select one<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-select</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-618"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-646"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-619"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-647"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -532,7 +511,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlOption</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-619"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-647"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -541,7 +520,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-189"
|
||||
aria-controls="code-preview-source-group-201"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -604,18 +583,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-190">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-202">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-620"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-select</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select one<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-648"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-select</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select one<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-select</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-620"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-648"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-621"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-649"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -627,7 +606,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlOption</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-621"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-649"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -636,7 +615,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-190"
|
||||
aria-controls="code-preview-source-group-202"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -712,9 +691,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-191">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-203">
|
||||
<div class="code-preview__source code-preview__source--html">
|
||||
<pre><code class="language-html" id="code-block-622"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-select</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select one<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-650"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-select</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select one<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>prefix<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>envelope<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
Email
|
||||
@ -733,7 +712,7 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>suffix<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>patch-check<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-select</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-622"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-650"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -742,7 +721,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-191"
|
||||
aria-controls="code-preview-source-group-203"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -803,7 +782,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-623"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/option/option.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-623"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-651"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/option/option.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-651"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -818,17 +797,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-624"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/option/option.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-624"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-652"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/option/option.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-652"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-625"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/option/option.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-625"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-653"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/option/option.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-653"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-626"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-626"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-654"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-654"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -98,27 +98,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -638,9 +617,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-194">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-206">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-635"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-overview<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-663"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-overview<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-popup</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name">active</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
@ -726,11 +705,11 @@
|
||||
<span class="token property">margin-top</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-635"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-663"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-636"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-664"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlPopup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/popup'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span>
|
||||
@ -849,7 +828,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-636"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-664"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -858,7 +837,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-194"
|
||||
aria-controls="code-preview-source-group-206"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -964,9 +943,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-195">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-207">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-637"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-active<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-665"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-active<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-popup</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name">active</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
@ -1000,11 +979,11 @@
|
||||
|
||||
active<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-change'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>popup<span class="token punctuation">.</span>active <span class="token operator">=</span> active<span class="token punctuation">.</span>checked<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-637"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-665"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-638"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-666"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlPopup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/popup'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -1046,7 +1025,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-638"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-666"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1055,7 +1034,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-195"
|
||||
aria-controls="code-preview-source-group-207"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1137,9 +1116,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-196">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-208">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-639"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>external-anchor<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-667"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>external-anchor<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||||
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-popup</span> <span class="token attr-name">anchor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>external-anchor<span class="token punctuation">"</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name">active</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
@ -1161,11 +1140,11 @@
|
||||
<span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-border-radius-medium<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-639"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-667"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-640"><span class="token keyword">import</span> SlPopup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/popup'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-668"><span class="token keyword">import</span> SlPopup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/popup'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||||
#external-anchor {
|
||||
@ -1197,7 +1176,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-640"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-668"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1206,7 +1185,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-196"
|
||||
aria-controls="code-preview-source-group-208"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1322,9 +1301,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-197">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-209">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-641"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-placement<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-669"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-placement<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-popup</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name">active</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
@ -1374,11 +1353,11 @@
|
||||
|
||||
select<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-change'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>popup<span class="token punctuation">.</span>placement <span class="token operator">=</span> select<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-641"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-669"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-642"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-670"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlPopup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/popup'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span>
|
||||
@ -1435,7 +1414,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-642"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-670"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1444,7 +1423,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-197"
|
||||
aria-controls="code-preview-source-group-209"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1541,9 +1520,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-198">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-210">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-643"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-distance<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-671"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-distance<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-popup</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name">distance</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">active</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
@ -1580,11 +1559,11 @@
|
||||
|
||||
distance<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-input'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>popup<span class="token punctuation">.</span>distance <span class="token operator">=</span> distance<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-643"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-671"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-644"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-672"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlPopup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/popup'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlRange <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/range'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -1634,7 +1613,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-644"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-672"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1643,7 +1622,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-198"
|
||||
aria-controls="code-preview-source-group-210"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1740,9 +1719,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-199">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-211">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-645"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-skidding<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-673"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-skidding<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-popup</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name">skidding</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">active</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
@ -1779,11 +1758,11 @@
|
||||
|
||||
skidding<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-input'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>popup<span class="token punctuation">.</span>skidding <span class="token operator">=</span> skidding<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-645"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-673"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-646"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-674"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlPopup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/popup'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlRange <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/range'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -1833,7 +1812,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-646"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-674"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1842,7 +1821,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-199"
|
||||
aria-controls="code-preview-source-group-211"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1989,9 +1968,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-200">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-212">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-647"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-arrow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-675"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-arrow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-popup</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name">arrow</span> <span class="token attr-name">arrow-placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span> <span class="token attr-name">distance</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>8<span class="token punctuation">"</span></span> <span class="token attr-name">active</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
@ -2073,11 +2052,11 @@
|
||||
arrow<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-change'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>popup<span class="token punctuation">.</span>arrow <span class="token operator">=</span> arrow<span class="token punctuation">.</span>checked<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-647"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-675"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-648"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-676"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlPopup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/popup'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span>
|
||||
@ -2178,7 +2157,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-648"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-676"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2187,7 +2166,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-200"
|
||||
aria-controls="code-preview-source-group-212"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -2295,9 +2274,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-201">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-213">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-649"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-sync<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-677"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-sync<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-popup</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name">sync</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width<span class="token punctuation">"</span></span> <span class="token attr-name">active</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
@ -2342,11 +2321,11 @@
|
||||
|
||||
sync<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-change'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>popup<span class="token punctuation">.</span>sync <span class="token operator">=</span> sync<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-649"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-677"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-650"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-678"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlPopup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/popup'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span>
|
||||
@ -2397,7 +2376,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-650"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-678"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2406,7 +2385,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-201"
|
||||
aria-controls="code-preview-source-group-213"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -2540,9 +2519,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-202">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-214">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-651"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-strategy<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-679"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-strategy<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>overflow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-popup</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name">strategy</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fixed<span class="token punctuation">"</span></span> <span class="token attr-name">active</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||||
@ -2588,11 +2567,11 @@
|
||||
|
||||
fixed<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-change'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>popup<span class="token punctuation">.</span>strategy <span class="token operator">=</span> fixed<span class="token punctuation">.</span>checked <span class="token operator">?</span> <span class="token string">'fixed'</span> <span class="token operator">:</span> <span class="token string">'absolute'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-651"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-679"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-652"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-680"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlPopup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/popup'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -2646,7 +2625,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-652"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-680"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2655,7 +2634,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-202"
|
||||
aria-controls="code-preview-source-group-214"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -2760,9 +2739,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-203">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-215">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-653"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-flip<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-681"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-flip<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>overflow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-popup</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name">flip</span> <span class="token attr-name">active</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||||
@ -2805,11 +2784,11 @@
|
||||
|
||||
flip<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-change'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>popup<span class="token punctuation">.</span>flip <span class="token operator">=</span> flip<span class="token punctuation">.</span>checked<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-653"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-681"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-654"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-682"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlPopup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/popup'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -2860,7 +2839,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-654"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-682"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2869,7 +2848,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-203"
|
||||
aria-controls="code-preview-source-group-215"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -2978,9 +2957,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-204">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-216">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-655"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-flip-fallbacks<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-683"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-flip-fallbacks<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>overflow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-popup</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name">flip</span> <span class="token attr-name">flip-fallback-placements</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>right bottom<span class="token punctuation">"</span></span> <span class="token attr-name">flip-fallback-strategy</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>initial<span class="token punctuation">"</span></span> <span class="token attr-name">active</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||||
@ -3012,11 +2991,11 @@
|
||||
<span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-border-radius-medium<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-655"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-683"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-656"><span class="token keyword">import</span> SlPopup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/popup'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-684"><span class="token keyword">import</span> SlPopup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/popup'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||||
.popup-flip-fallbacks .overflow {
|
||||
@ -3058,7 +3037,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-656"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-684"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -3067,7 +3046,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-204"
|
||||
aria-controls="code-preview-source-group-216"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -3168,9 +3147,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-205">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-217">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-657"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-shift<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-685"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-shift<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>overflow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-popup</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name">shift</span> <span class="token attr-name">shift-padding</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">active</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||||
@ -3211,11 +3190,11 @@
|
||||
|
||||
shift<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-change'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>popup<span class="token punctuation">.</span>shift <span class="token operator">=</span> shift<span class="token punctuation">.</span>checked<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-657"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-685"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-658"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-686"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlPopup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/popup'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -3264,7 +3243,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-658"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-686"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -3273,7 +3252,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-205"
|
||||
aria-controls="code-preview-source-group-217"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -3393,9 +3372,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-206">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-218">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-659"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-auto-size<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-687"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-auto-size<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>overflow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-popup</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name">auto-size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>both<span class="token punctuation">"</span></span> <span class="token attr-name">auto-size-padding</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">active</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||||
@ -3445,11 +3424,11 @@
|
||||
|
||||
autoSize<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-change'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>popup<span class="token punctuation">.</span>autoSize <span class="token operator">=</span> autoSize<span class="token punctuation">.</span>checked <span class="token operator">?</span> <span class="token string">'both'</span> <span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-659"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-687"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-660"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-688"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlPopup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/popup'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -3507,7 +3486,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-660"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-688"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -3516,7 +3495,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-206"
|
||||
aria-controls="code-preview-source-group-218"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -3629,9 +3608,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-207">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-219">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-661"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-hover-bridge<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-689"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-hover-bridge<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-popup</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span> <span class="token attr-name">hover-bridge</span> <span class="token attr-name">distance</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">skidding</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">active</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>anchor<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
@ -3681,11 +3660,11 @@
|
||||
skidding<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-input'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>popup<span class="token punctuation">.</span>skidding <span class="token operator">=</span> skidding<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
hoverBridge<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-change'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>popup<span class="token punctuation">.</span>hoverBridge <span class="token operator">=</span> hoverBridge<span class="token punctuation">.</span>checked<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-661"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-689"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-662"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-690"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlPopup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/popup'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlRange <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/range'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
|
||||
@ -3759,7 +3738,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-662"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-690"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -3768,7 +3747,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-207"
|
||||
aria-controls="code-preview-source-group-219"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -3826,13 +3805,13 @@
|
||||
>
|
||||
object as shown below.
|
||||
</p>
|
||||
<pre><code class="language-ts" id="code-block-663"><span class="token keyword">const</span> virtualElement <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<pre><code class="language-ts" id="code-block-691"><span class="token keyword">const</span> virtualElement <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">getBoundingClientRect</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// ...</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">{</span> width<span class="token punctuation">,</span> height<span class="token punctuation">,</span> x<span class="token punctuation">,</span> y<span class="token punctuation">,</span> top<span class="token punctuation">,</span> left<span class="token punctuation">,</span> right<span class="token punctuation">,</span> bottom <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-663"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-691"></sl-copy-button></pre>
|
||||
<p>
|
||||
This example anchors a popup to the mouse cursor using a virtual element. As such, a mouse is required to
|
||||
properly view it.
|
||||
@ -3925,9 +3904,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-208">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-220">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-664"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-virtual-element<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-692"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>popup-virtual-element<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-popup</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>right-start<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-popup</span><span class="token punctuation">></span></span>
|
||||
@ -4000,11 +3979,11 @@
|
||||
<span class="token selector">50%</span> <span class="token punctuation">{</span> <span class="token property">scale</span><span class="token punctuation">:</span> 1.1<span class="token punctuation">;</span> <span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-664"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-692"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-665"><span class="token keyword">import</span> <span class="token punctuation">{</span> useRef<span class="token punctuation">,</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-693"><span class="token keyword">import</span> <span class="token punctuation">{</span> useRef<span class="token punctuation">,</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlPopup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/popup'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -4086,7 +4065,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-665"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-693"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -4095,7 +4074,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-208"
|
||||
aria-controls="code-preview-source-group-220"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -4141,14 +4120,14 @@
|
||||
Sometimes the <code>getBoundingClientRects</code> might be derived from a real element. In this case provide
|
||||
the anchor element as context to ensure clipping and position updates for the popup work well.
|
||||
</p>
|
||||
<pre><code class="language-ts" id="code-block-666"><span class="token keyword">const</span> virtualElement <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<pre><code class="language-ts" id="code-block-694"><span class="token keyword">const</span> virtualElement <span class="token operator">=</span> <span class="token punctuation">{</span>
|
||||
<span class="token function">getBoundingClientRect</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token comment">// ...</span>
|
||||
<span class="token keyword">return</span> <span class="token punctuation">{</span> width<span class="token punctuation">,</span> height<span class="token punctuation">,</span> x<span class="token punctuation">,</span> y<span class="token punctuation">,</span> top<span class="token punctuation">,</span> left<span class="token punctuation">,</span> right<span class="token punctuation">,</span> bottom <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||||
contextElement<span class="token operator">:</span> anchorElement
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-666"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-694"></sl-copy-button></pre>
|
||||
|
||||
<h2 id="importing" class="anchor-heading">
|
||||
Importing<a href="#importing" aria-label='Direct link to "Importing"'></a>
|
||||
@ -4177,7 +4156,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-667"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/popup/popup.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-667"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-695"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/popup/popup.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-695"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -4192,17 +4171,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-668"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/popup/popup.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-668"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-696"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/popup/popup.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-696"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-669"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/popup/popup.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-669"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-697"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/popup/popup.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-697"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-670"><span class="token keyword">import</span> SlPopup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/popup'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-670"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-698"><span class="token keyword">import</span> SlPopup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/popup'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-698"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -92,27 +92,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -499,17 +478,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-220">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-221">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-701"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-progress-bar</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-progress-bar</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-701"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-699"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-progress-bar</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-progress-bar</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-699"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-702"><span class="token keyword">import</span> SlProgressBar <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-bar'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-700"><span class="token keyword">import</span> SlProgressBar <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-bar'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlProgressBar</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">50</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-702"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-700"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -518,7 +497,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-220"
|
||||
aria-controls="code-preview-source-group-221"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -578,17 +557,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-221">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-222">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-703"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-progress-bar</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Upload progress<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-progress-bar</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-703"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-701"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-progress-bar</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Upload progress<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-progress-bar</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-701"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-704"><span class="token keyword">import</span> SlProgressBar <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-bar'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-702"><span class="token keyword">import</span> SlProgressBar <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-bar'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlProgressBar</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Upload progress<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-704"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-702"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -597,7 +576,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-221"
|
||||
aria-controls="code-preview-source-group-222"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -653,17 +632,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-222">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-223">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-705"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-progress-bar</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--height</span><span class="token punctuation">:</span> 6px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-progress-bar</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-705"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-703"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-progress-bar</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--height</span><span class="token punctuation">:</span> 6px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-progress-bar</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-703"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-706"><span class="token keyword">import</span> SlProgressBar <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-bar'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-704"><span class="token keyword">import</span> SlProgressBar <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-bar'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlProgressBar</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">50</span><span class="token punctuation">}</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token string-property property">'--height'</span><span class="token operator">:</span> <span class="token string">'6px'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-706"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-704"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -672,7 +651,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-222"
|
||||
aria-controls="code-preview-source-group-223"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -753,9 +732,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-223">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-224">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-707"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-progress-bar</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>progress-bar-values<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>50%<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-progress-bar</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-705"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-progress-bar</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>progress-bar-values<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>50%<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-progress-bar</span><span class="token punctuation">></span></span>
|
||||
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
|
||||
@ -779,11 +758,11 @@
|
||||
progressBar<span class="token punctuation">.</span>textContent <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>value<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">%</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-707"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-705"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-708"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-706"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlProgressBar <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-bar'</span><span class="token punctuation">;</span>
|
||||
@ -814,7 +793,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-708"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-706"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -823,7 +802,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-223"
|
||||
aria-controls="code-preview-source-group-224"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -883,17 +862,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-224">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-225">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-709"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-progress-bar</span> <span class="token attr-name">indeterminate</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-progress-bar</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-709"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-707"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-progress-bar</span> <span class="token attr-name">indeterminate</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-progress-bar</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-707"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-710"><span class="token keyword">import</span> SlProgressBar <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-bar'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-708"><span class="token keyword">import</span> SlProgressBar <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-bar'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlProgressBar</span></span> <span class="token attr-name">indeterminate</span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-710"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-708"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -902,7 +881,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-224"
|
||||
aria-controls="code-preview-source-group-225"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -971,7 +950,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-711"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/progress-bar/progress-bar.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-711"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-709"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/progress-bar/progress-bar.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-709"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -986,17 +965,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-712"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/progress-bar/progress-bar.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-712"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-710"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/progress-bar/progress-bar.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-710"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-713"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/progress-bar/progress-bar.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-713"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-711"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/progress-bar/progress-bar.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-711"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-714"><span class="token keyword">import</span> SlProgressBar <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-bar'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-714"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-712"><span class="token keyword">import</span> SlProgressBar <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-bar'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-712"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -98,27 +98,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -508,17 +487,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-214">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-231">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-685"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-progress-ring</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>25<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-progress-ring</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-685"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-727"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-progress-ring</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>25<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-progress-ring</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-727"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-686"><span class="token keyword">import</span> SlProgressRing <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-ring'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-728"><span class="token keyword">import</span> SlProgressRing <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-ring'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlProgressRing</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>25<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-686"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-728"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -527,7 +506,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-214"
|
||||
aria-controls="code-preview-source-group-231"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -584,17 +563,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-215">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-232">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-687"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-progress-ring</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--size</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-progress-ring</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-687"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-729"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-progress-ring</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--size</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-progress-ring</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-729"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-688"><span class="token keyword">import</span> SlProgressRing <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-ring'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-730"><span class="token keyword">import</span> SlProgressRing <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-ring'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlProgressRing</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token string-property property">'--size'</span><span class="token operator">:</span> <span class="token string">'200px'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-688"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-730"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -603,7 +582,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-215"
|
||||
aria-controls="code-preview-source-group-232"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -665,17 +644,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-216">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-233">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-689"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-progress-ring</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--track-width</span><span class="token punctuation">:</span> 6px<span class="token punctuation">;</span> <span class="token property">--indicator-width</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-progress-ring</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-689"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-731"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-progress-ring</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--track-width</span><span class="token punctuation">:</span> 6px<span class="token punctuation">;</span> <span class="token property">--indicator-width</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-progress-ring</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-731"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-690"><span class="token keyword">import</span> SlProgressRing <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-ring'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-732"><span class="token keyword">import</span> SlProgressRing <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-ring'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlProgressRing</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token string-property property">'--track-width'</span><span class="token operator">:</span> <span class="token string">'6px'</span><span class="token punctuation">,</span> <span class="token string-property property">'--indicator-width'</span><span class="token operator">:</span> <span class="token string">'12px'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-690"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-732"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -684,7 +663,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-216"
|
||||
aria-controls="code-preview-source-group-233"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -741,20 +720,20 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-217">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-234">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-691"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-progress-ring</span>
|
||||
<pre><code class="language-html" id="code-block-733"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-progress-ring</span>
|
||||
<span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span>
|
||||
<span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>
|
||||
--track-color: pink;
|
||||
--indicator-color: deeppink;
|
||||
<span class="token punctuation">"</span></span></span>
|
||||
<span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-progress-ring</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-691"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-733"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-692"><span class="token keyword">import</span> SlProgressRing <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-ring'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-734"><span class="token keyword">import</span> SlProgressRing <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-ring'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlProgressRing</span></span>
|
||||
@ -765,7 +744,7 @@
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-692"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-734"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -774,7 +753,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-217"
|
||||
aria-controls="code-preview-source-group-234"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -831,17 +810,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-218">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-235">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-693"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-progress-ring</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Upload progress<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-progress-ring</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-693"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-735"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-progress-ring</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Upload progress<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-progress-ring</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-735"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-694"><span class="token keyword">import</span> SlProgressRing <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-ring'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-736"><span class="token keyword">import</span> SlProgressRing <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-ring'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlProgressRing</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Upload progress<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-694"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-736"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -850,7 +829,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-218"
|
||||
aria-controls="code-preview-source-group-235"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -933,9 +912,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-219">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-236">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-695"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-progress-ring</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>progress-ring-values<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">margin-bottom</span><span class="token punctuation">:</span> .5rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>50%<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-progress-ring</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-737"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-progress-ring</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>50<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>progress-ring-values<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">margin-bottom</span><span class="token punctuation">:</span> .5rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>50%<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-progress-ring</span><span class="token punctuation">></span></span>
|
||||
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
|
||||
@ -959,11 +938,11 @@
|
||||
progressRing<span class="token punctuation">.</span>textContent <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>value<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">%</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-695"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-737"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-696"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-738"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlProgressRing <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-ring'</span><span class="token punctuation">;</span>
|
||||
@ -996,7 +975,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-696"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-738"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1005,7 +984,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-219"
|
||||
aria-controls="code-preview-source-group-236"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1074,7 +1053,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-697"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/progress-ring/progress-ring.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-697"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-739"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/progress-ring/progress-ring.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-739"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -1089,17 +1068,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-698"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/progress-ring/progress-ring.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-698"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-740"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/progress-ring/progress-ring.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-740"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-699"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/progress-ring/progress-ring.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-699"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-741"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/progress-ring/progress-ring.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-741"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-700"><span class="token keyword">import</span> SlProgressRing <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-ring'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-700"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-742"><span class="token keyword">import</span> SlProgressRing <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/progress-ring'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-742"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -92,27 +92,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -547,9 +526,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-209">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-226">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-671"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>qr-overview<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-713"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>qr-overview<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-qr-code</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Scan this code to visit Nebula on the web!<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-qr-code</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
|
||||
@ -576,11 +555,11 @@
|
||||
<span class="token property">margin-top</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-671"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-713"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-672"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-714"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlQrCode <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/qr-code'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlInput <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/input'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -610,7 +589,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-672"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-714"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -619,7 +598,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-209"
|
||||
aria-controls="code-preview-source-group-226"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -679,17 +658,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-210">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-227">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-673"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-qr-code</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>deeppink<span class="token punctuation">"</span></span> <span class="token attr-name">background</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-qr-code</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-673"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-715"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-qr-code</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>deeppink<span class="token punctuation">"</span></span> <span class="token attr-name">background</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-qr-code</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-715"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-674"><span class="token keyword">import</span> SlQrCode <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/qr-code'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-716"><span class="token keyword">import</span> SlQrCode <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/qr-code'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlQrCode</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/<span class="token punctuation">"</span></span> <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>deeppink<span class="token punctuation">"</span></span> <span class="token attr-name">background</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>white<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-674"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-716"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -698,7 +677,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-210"
|
||||
aria-controls="code-preview-source-group-227"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -752,17 +731,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-211">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-228">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-675"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-qr-code</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>64<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-qr-code</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-675"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-717"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-qr-code</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>64<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-qr-code</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-717"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-676"><span class="token keyword">import</span> SlQrCode <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/qr-code'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-718"><span class="token keyword">import</span> SlQrCode <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/qr-code'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlQrCode</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>64<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-676"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-718"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -771,7 +750,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-211"
|
||||
aria-controls="code-preview-source-group-228"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -825,17 +804,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-212">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-229">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-677"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-qr-code</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/<span class="token punctuation">"</span></span> <span class="token attr-name">radius</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0.5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-qr-code</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-677"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-719"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-qr-code</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/<span class="token punctuation">"</span></span> <span class="token attr-name">radius</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0.5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-qr-code</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-719"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-678"><span class="token keyword">import</span> SlQrCode <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/qr-code'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-720"><span class="token keyword">import</span> SlQrCode <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/qr-code'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlQrCode</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/<span class="token punctuation">"</span></span> <span class="token attr-name">radius</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0.5<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-678"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-720"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -844,7 +823,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-212"
|
||||
aria-controls="code-preview-source-group-229"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -924,9 +903,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-213">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-230">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-679"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>qr-error-correction<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-721"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>qr-error-correction<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-qr-code</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/<span class="token punctuation">"</span></span> <span class="token attr-name">error-correction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>L<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-qr-code</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-qr-code</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/<span class="token punctuation">"</span></span> <span class="token attr-name">error-correction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>M<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-qr-code</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-qr-code</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://shoelace.style/<span class="token punctuation">"</span></span> <span class="token attr-name">error-correction</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Q<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-qr-code</span><span class="token punctuation">></span></span>
|
||||
@ -940,11 +919,11 @@
|
||||
<span class="token property">gap</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-679"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-721"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-680"><span class="token keyword">import</span> SlQrCode <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/qr-code'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-722"><span class="token keyword">import</span> SlQrCode <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/qr-code'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||||
.qr-error-correction {
|
||||
@ -968,7 +947,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-680"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-722"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -977,7 +956,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-213"
|
||||
aria-controls="code-preview-source-group-230"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1046,7 +1025,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-681"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/qr-code/qr-code.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-681"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-723"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/qr-code/qr-code.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-723"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -1061,17 +1040,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-682"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/qr-code/qr-code.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-682"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-724"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/qr-code/qr-code.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-724"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-683"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/qr-code/qr-code.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-683"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-725"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/qr-code/qr-code.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-725"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-684"><span class="token keyword">import</span> SlQrCode <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/qr-code'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-684"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-726"><span class="token keyword">import</span> SlQrCode <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/qr-code'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-726"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -98,27 +98,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -520,18 +499,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-225">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-237">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-715"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-743"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-group</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-715"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-743"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-716"><span class="token keyword">import</span> SlRadioButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-744"><span class="token keyword">import</span> SlRadioButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlRadioGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-group'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -541,7 +520,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlRadioButton</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlRadioButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlRadioGroup</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-716"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-744"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -550,7 +529,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-225"
|
||||
aria-controls="code-preview-source-group-237"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -616,18 +595,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-226">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-238">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-717"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-745"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-group</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-717"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-745"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-718"><span class="token keyword">import</span> SlRadioButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-746"><span class="token keyword">import</span> SlRadioButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlRadioGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-group'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -637,7 +616,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlRadioButton</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlRadioButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlRadioGroup</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-718"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-746"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -646,7 +625,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-226"
|
||||
aria-controls="code-preview-source-group-238"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -706,18 +685,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-227">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-239">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-719"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-747"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-group</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-719"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-747"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-720"><span class="token keyword">import</span> SlRadioButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-748"><span class="token keyword">import</span> SlRadioButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlRadioGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-group'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -729,7 +708,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlRadioButton</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlRadioButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlRadioGroup</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-720"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-748"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -738,7 +717,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-227"
|
||||
aria-controls="code-preview-source-group-239"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -812,9 +791,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-228">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-240">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-721"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-group</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-749"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-group</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-button</span><span class="token punctuation">></span></span>
|
||||
@ -835,11 +814,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-group</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-721"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-749"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-722"><span class="token keyword">import</span> SlRadioButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-750"><span class="token keyword">import</span> SlRadioButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlRadioGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-group'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -865,7 +844,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlRadioButton</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlRadioButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlRadioGroup</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-722"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-750"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -874,7 +853,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-228"
|
||||
aria-controls="code-preview-source-group-240"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -950,9 +929,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-229">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-241">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-723"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-group</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-751"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-group</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-button</span> <span class="token attr-name">pill</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-button</span> <span class="token attr-name">pill</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-button</span> <span class="token attr-name">pill</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-button</span><span class="token punctuation">></span></span>
|
||||
@ -973,11 +952,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-button</span> <span class="token attr-name">pill</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-button</span> <span class="token attr-name">pill</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-group</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-723"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-751"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-724"><span class="token keyword">import</span> SlRadioButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-752"><span class="token keyword">import</span> SlRadioButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlRadioGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-group'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -1003,7 +982,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlRadioButton</span></span> <span class="token attr-name">pill</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlRadioButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlRadioGroup</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-724"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-752"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1012,7 +991,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-229"
|
||||
aria-controls="code-preview-source-group-241"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1087,9 +1066,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-230">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-242">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-725"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-753"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>prefix<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>archive<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
Option 1
|
||||
@ -1106,11 +1085,11 @@
|
||||
Option 3
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-group</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-725"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-753"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-726"><span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-754"><span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlRadioButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlRadioGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-group'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -1133,7 +1112,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlRadioButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlRadioGroup</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-726"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-754"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1142,7 +1121,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-230"
|
||||
aria-controls="code-preview-source-group-242"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1221,9 +1200,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-231">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-243">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-727"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>neutral<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-755"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>neutral<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>angry<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>emoji-angry<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Angry<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-button</span><span class="token punctuation">></span></span>
|
||||
@ -1244,11 +1223,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>emoji-laughing<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Laughing<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-group</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-727"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-755"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-728"><span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-756"><span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlRadioButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlRadioGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-group'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -1275,7 +1254,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlRadioButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlRadioGroup</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-728"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-756"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1284,7 +1263,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-231"
|
||||
aria-controls="code-preview-source-group-243"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1353,7 +1332,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-729"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/radio-button/radio-button.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-729"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-757"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/radio-button/radio-button.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-757"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -1368,17 +1347,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-730"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/radio-button/radio-button.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-730"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-758"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/radio-button/radio-button.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-758"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-731"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/radio-button/radio-button.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-731"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-759"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/radio-button/radio-button.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-759"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-732"><span class="token keyword">import</span> SlRadioButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-button'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-732"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-760"><span class="token keyword">import</span> SlRadioButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-button'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-760"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -98,27 +98,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -516,18 +495,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-232">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-244">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-733"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-761"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-group</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-733"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-761"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-734"><span class="token keyword">import</span> SlRadio <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-762"><span class="token keyword">import</span> SlRadio <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlRadioGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-group'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -537,7 +516,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlRadio</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlRadio</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlRadioGroup</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-734"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-762"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -546,7 +525,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-232"
|
||||
aria-controls="code-preview-source-group-244"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -617,18 +596,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-233">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-245">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-735"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Choose the most appropriate option.<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-763"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Choose the most appropriate option.<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-group</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-735"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-763"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-736"><span class="token keyword">import</span> SlRadio <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-764"><span class="token keyword">import</span> SlRadio <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlRadioGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-group'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -638,7 +617,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlRadio</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlRadio</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlRadioGroup</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-736"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-764"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -647,7 +626,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-233"
|
||||
aria-controls="code-preview-source-group-245"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -716,18 +695,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-234">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-246">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-737"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option that makes you proud.<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-765"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option that makes you proud.<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-button</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-group</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-737"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-765"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-738"><span class="token keyword">import</span> SlRadioButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-766"><span class="token keyword">import</span> SlRadioButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlRadioGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-group'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -737,7 +716,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlRadioButton</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlRadioButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlRadioGroup</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-738"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-766"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -746,7 +725,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-234"
|
||||
aria-controls="code-preview-source-group-246"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -809,18 +788,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-235">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-247">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-739"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-767"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-group</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-739"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-767"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-740"><span class="token keyword">import</span> SlRadio <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-768"><span class="token keyword">import</span> SlRadio <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlRadioGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-group'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -832,7 +811,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlRadio</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlRadio</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlRadioGroup</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-740"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-768"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -841,7 +820,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-235"
|
||||
aria-controls="code-preview-source-group-247"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -891,7 +870,7 @@
|
||||
<a href="/components/radio-buttons">Radio Buttons</a> will be determined by the Radio Group’s
|
||||
<code>size</code> attribute.
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-741"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio-group-size<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-769"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio-group-size<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Medium<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Large<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio</span><span class="token punctuation">></span></span>
|
||||
@ -904,8 +883,8 @@
|
||||
radioGroup<span class="token punctuation">.</span>size <span class="token operator">=</span> radioGroup<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-741"></sl-copy-button></pre>
|
||||
<pre><code class="language-jsx" id="code-block-742"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-769"></sl-copy-button></pre>
|
||||
<pre><code class="language-jsx" id="code-block-770"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlRadio <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlRadioGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-group'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -928,7 +907,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-742"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-770"></sl-copy-button></pre>
|
||||
<div role="alert" class="callout callout--tip">
|
||||
<p>
|
||||
<a href="/components/radio">Radios</a> and <a href="/components/radio-button">Radio Buttons</a> also have
|
||||
@ -973,9 +952,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-236">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-248">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-743"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>validation<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-771"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>validation<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio</span><span class="token punctuation">></span></span>
|
||||
@ -994,11 +973,11 @@
|
||||
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'All fields are valid!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-743"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-771"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-744"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-772"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlRadio <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlRadioGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-group'</span><span class="token punctuation">;</span>
|
||||
@ -1028,7 +1007,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-744"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-772"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1037,7 +1016,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-236"
|
||||
aria-controls="code-preview-source-group-248"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1130,9 +1109,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-237">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-249">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-745"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom-validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-773"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom-validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Not me<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Me neither<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio</span><span class="token punctuation">></span></span>
|
||||
@ -1164,11 +1143,11 @@
|
||||
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'All fields are valid!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-745"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-773"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-746"><span class="token keyword">import</span> <span class="token punctuation">{</span> useEffect<span class="token punctuation">,</span> useRef <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-774"><span class="token keyword">import</span> <span class="token punctuation">{</span> useEffect<span class="token punctuation">,</span> useRef <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlRadio <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio'</span><span class="token punctuation">;</span>
|
||||
@ -1204,7 +1183,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-746"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-774"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1213,7 +1192,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-237"
|
||||
aria-controls="code-preview-source-group-249"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1282,7 +1261,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-747"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/radio-group/radio-group.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-747"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-775"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/radio-group/radio-group.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-775"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -1297,17 +1276,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-748"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/radio-group/radio-group.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-748"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-776"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/radio-group/radio-group.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-776"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-749"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/radio-group/radio-group.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-749"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-777"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/radio-group/radio-group.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-777"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-750"><span class="token keyword">import</span> SlRadioGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-group'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-750"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-778"><span class="token keyword">import</span> SlRadioGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-group'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-778"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -92,27 +92,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -505,18 +484,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-248">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-250">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-775"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-779"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-group</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-775"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-779"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-776"><span class="token keyword">import</span> SlRadio <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-780"><span class="token keyword">import</span> SlRadio <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlRadioGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-group'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -526,7 +505,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlRadio</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlRadio</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlRadioGroup</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-776"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-780"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -535,7 +514,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-248"
|
||||
aria-controls="code-preview-source-group-250"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -608,18 +587,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-249">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-251">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-777"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-781"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-group</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-777"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-781"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-778"><span class="token keyword">import</span> SlRadio <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-782"><span class="token keyword">import</span> SlRadio <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlRadioGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-group'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -629,7 +608,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlRadio</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlRadio</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlRadioGroup</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-778"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-782"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -638,7 +617,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-249"
|
||||
aria-controls="code-preview-source-group-251"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -698,18 +677,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-250">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-252">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-779"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-783"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-group</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select an option<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-group</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-779"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-783"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-780"><span class="token keyword">import</span> SlRadio <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-784"><span class="token keyword">import</span> SlRadio <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlRadioGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio-group'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -721,7 +700,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlRadio</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlRadio</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlRadioGroup</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-780"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-784"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -730,7 +709,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-250"
|
||||
aria-controls="code-preview-source-group-252"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -777,7 +756,7 @@
|
||||
Add the <code>size</code> attribute to the <a href="/components/radio-group">Radio Group</a> to change the
|
||||
radios’ size.
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-781"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-group</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-785"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio-group</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Small 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Small 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Small 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio</span><span class="token punctuation">></span></span>
|
||||
@ -798,8 +777,8 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Large 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-radio</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Large 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-radio-group</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-781"></sl-copy-button></pre>
|
||||
<pre><code class="language-jsx" id="code-block-782"><span class="token keyword">import</span> SlRadio <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio'</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-785"></sl-copy-button></pre>
|
||||
<pre><code class="language-jsx" id="code-block-786"><span class="token keyword">import</span> SlRadio <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -826,7 +805,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlRadioGroup</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-782"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-786"></sl-copy-button></pre>
|
||||
|
||||
<h2 id="importing" class="anchor-heading">
|
||||
Importing<a href="#importing" aria-label='Direct link to "Importing"'></a>
|
||||
@ -855,7 +834,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-783"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/radio/radio.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-783"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-787"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/radio/radio.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-787"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -870,17 +849,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-784"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/radio/radio.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-784"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-788"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/radio/radio.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-788"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-785"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/radio/radio.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-785"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-789"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/radio/radio.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-789"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-786"><span class="token keyword">import</span> SlRadio <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-786"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-790"><span class="token keyword">import</span> SlRadio <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/radio'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-790"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -98,27 +98,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -514,17 +493,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-238">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-263">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-751"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-range</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-range</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-751"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-815"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-range</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-range</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-815"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-752"><span class="token keyword">import</span> SlRange <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/range'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-816"><span class="token keyword">import</span> SlRange <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/range'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlRange</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-752"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-816"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -533,7 +512,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-238"
|
||||
aria-controls="code-preview-source-group-263"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -600,17 +579,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-239">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-264">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-753"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-range</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Volume<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-range</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-753"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-817"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-range</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Volume<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-range</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-817"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-754"><span class="token keyword">import</span> SlRange <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/range'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-818"><span class="token keyword">import</span> SlRange <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/range'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlRange</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Volume<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">0</span><span class="token punctuation">}</span></span> <span class="token attr-name">max</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">100</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-754"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-818"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -619,7 +598,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-239"
|
||||
aria-controls="code-preview-source-group-264"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -683,17 +662,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-240">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-265">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-755"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-range</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Volume<span class="token punctuation">"</span></span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Controls the volume of the current song.<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-range</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-755"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-819"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-range</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Volume<span class="token punctuation">"</span></span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Controls the volume of the current song.<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-range</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-819"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-756"><span class="token keyword">import</span> SlRange <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/range'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-820"><span class="token keyword">import</span> SlRange <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/range'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlRange</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Volume<span class="token punctuation">"</span></span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Controls the volume of the current song.<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">0</span><span class="token punctuation">}</span></span> <span class="token attr-name">max</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">100</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-756"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-820"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -702,7 +681,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-240"
|
||||
aria-controls="code-preview-source-group-265"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -762,17 +741,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-241">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-266">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-757"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-range</span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-range</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-757"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-821"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-range</span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-range</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-821"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-758"><span class="token keyword">import</span> SlRange <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/range'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-822"><span class="token keyword">import</span> SlRange <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/range'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlRange</span></span> <span class="token attr-name">min</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">0</span><span class="token punctuation">}</span></span> <span class="token attr-name">max</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">10</span><span class="token punctuation">}</span></span> <span class="token attr-name">step</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-758"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-822"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -781,7 +760,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-241"
|
||||
aria-controls="code-preview-source-group-266"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -837,17 +816,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-242">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-267">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-759"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-range</span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-range</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-759"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-823"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-range</span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-range</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-823"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-760"><span class="token keyword">import</span> SlRange <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/range'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-824"><span class="token keyword">import</span> SlRange <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/range'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlRange</span></span> <span class="token attr-name">disabled</span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-760"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-824"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -856,7 +835,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-242"
|
||||
aria-controls="code-preview-source-group-267"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -915,17 +894,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-243">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-268">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-761"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-range</span> <span class="token attr-name">tooltip</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bottom<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-range</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-761"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-825"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-range</span> <span class="token attr-name">tooltip</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bottom<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-range</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-825"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-762"><span class="token keyword">import</span> SlRange <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/range'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-826"><span class="token keyword">import</span> SlRange <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/range'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlRange</span></span> <span class="token attr-name">tooltip</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bottom<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-762"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-826"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -934,7 +913,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-243"
|
||||
aria-controls="code-preview-source-group-268"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -990,17 +969,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-244">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-269">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-763"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-range</span> <span class="token attr-name">tooltip</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-range</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-763"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-827"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-range</span> <span class="token attr-name">tooltip</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-range</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-827"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-764"><span class="token keyword">import</span> SlRange <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/range'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-828"><span class="token keyword">import</span> SlRange <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/range'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlRange</span></span> <span class="token attr-name">tooltip</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-764"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-828"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1009,7 +988,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-244"
|
||||
aria-controls="code-preview-source-group-269"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1073,19 +1052,19 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-245">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-270">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-765"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-range</span>
|
||||
<pre><code class="language-html" id="code-block-829"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-range</span>
|
||||
<span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>
|
||||
--track-color-active: var(--sl-color-primary-600);
|
||||
--track-color-inactive: var(--sl-color-primary-100);
|
||||
<span class="token punctuation">"</span></span></span>
|
||||
<span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-range</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-765"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-829"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-766"><span class="token keyword">import</span> SlRange <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/range'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-830"><span class="token keyword">import</span> SlRange <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/range'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlRange</span></span>
|
||||
@ -1095,7 +1074,7 @@
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-766"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-830"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1104,7 +1083,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-245"
|
||||
aria-controls="code-preview-source-group-270"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1171,9 +1150,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-246">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-271">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-767"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-range</span>
|
||||
<pre><code class="language-html" id="code-block-831"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-range</span>
|
||||
<span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>-100<span class="token punctuation">"</span></span>
|
||||
<span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span>
|
||||
<span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>
|
||||
@ -1182,11 +1161,11 @@
|
||||
--track-active-offset: 50%;
|
||||
<span class="token punctuation">"</span></span></span>
|
||||
<span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-range</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-767"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-831"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-768"><span class="token keyword">import</span> SlRange <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/range'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-832"><span class="token keyword">import</span> SlRange <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/range'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlRange</span></span>
|
||||
@ -1199,7 +1178,7 @@
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-768"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-832"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1208,7 +1187,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-246"
|
||||
aria-controls="code-preview-source-group-271"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1277,22 +1256,22 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-247">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-272">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-769"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-range</span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range-with-custom-formatter<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-range</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-833"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-range</span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>range-with-custom-formatter<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-range</span><span class="token punctuation">></span></span>
|
||||
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<span class="token keyword">const</span> range <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.range-with-custom-formatter'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
range<span class="token punctuation">.</span><span class="token function-variable function">tooltipFormatter</span> <span class="token operator">=</span> <span class="token parameter">value</span> <span class="token operator">=></span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Total - </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>value<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">%</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-769"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-833"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-770"><span class="token keyword">import</span> SlRange <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/range'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-834"><span class="token keyword">import</span> SlRange <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/range'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlRange</span></span> <span class="token attr-name">min</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">0</span><span class="token punctuation">}</span></span> <span class="token attr-name">max</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">100</span><span class="token punctuation">}</span></span> <span class="token attr-name">step</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span></span> <span class="token attr-name">tooltipFormatter</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token parameter">value</span> <span class="token operator">=></span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Total - </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>value<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">%</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-770"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-834"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1301,7 +1280,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-247"
|
||||
aria-controls="code-preview-source-group-272"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1370,7 +1349,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-771"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/range/range.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-771"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-835"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/range/range.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-835"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -1385,17 +1364,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-772"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/range/range.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-772"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-836"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/range/range.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-836"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-773"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/range/range.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-773"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-837"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/range/range.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-837"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-774"><span class="token keyword">import</span> SlRange <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/range'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-774"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-838"><span class="token keyword">import</span> SlRange <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/range'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-838"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -92,27 +92,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -506,17 +485,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-251">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-253">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-787"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-rating</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-rating</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-787"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-791"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-rating</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-rating</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-791"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-788"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-792"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlRating</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-788"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-792"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -525,7 +504,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-251"
|
||||
aria-controls="code-preview-source-group-253"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -585,17 +564,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-252">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-254">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-789"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-rating</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rate this component<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-rating</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-789"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-793"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-rating</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rate this component<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-rating</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-793"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-790"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-794"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlRating</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rate this component<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-790"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-794"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -604,7 +583,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-252"
|
||||
aria-controls="code-preview-source-group-254"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -660,17 +639,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-253">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-255">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-791"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-rating</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-rating</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-791"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-795"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-rating</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-rating</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-795"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-792"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-796"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlRating</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">3</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-792"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-796"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -679,7 +658,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-253"
|
||||
aria-controls="code-preview-source-group-255"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -735,17 +714,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-254">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-256">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-793"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-rating</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token attr-name">precision</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0.5<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2.5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-rating</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-793"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-797"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-rating</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token attr-name">precision</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0.5<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2.5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-rating</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-797"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-794"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-798"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlRating</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token attr-name">precision</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">0.5</span><span class="token punctuation">}</span></span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">2.5</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-794"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-798"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -754,7 +733,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-254"
|
||||
aria-controls="code-preview-source-group-256"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -810,17 +789,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-255">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-257">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-795"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-rating</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--symbol-size</span><span class="token punctuation">:</span> 2rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-rating</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-795"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-799"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-rating</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--symbol-size</span><span class="token punctuation">:</span> 2rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-rating</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-799"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-796"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-800"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlRating</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token string-property property">'--symbol-size'</span><span class="token operator">:</span> <span class="token string">'2rem'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-796"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-800"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -829,7 +808,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-255"
|
||||
aria-controls="code-preview-source-group-257"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -885,17 +864,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-256">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-258">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-797"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-rating</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token attr-name">readonly</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-rating</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-797"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-801"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-rating</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token attr-name">readonly</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-rating</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-801"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-798"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-802"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlRating</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token attr-name">readonly</span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">3</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-798"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-802"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -904,7 +883,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-256"
|
||||
aria-controls="code-preview-source-group-258"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -960,17 +939,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-257">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-259">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-799"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-rating</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-rating</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-799"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-803"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-rating</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-rating</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-803"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-800"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-804"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlRating</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">3</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-800"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-804"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -979,7 +958,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-257"
|
||||
aria-controls="code-preview-source-group-259"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1081,9 +1060,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-258">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-260">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-801"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>detect-hover<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-805"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>detect-hover<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-rating</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-rating</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
@ -1119,11 +1098,11 @@
|
||||
<span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-801"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-805"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-802"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-806"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> terms <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'No rating'</span><span class="token punctuation">,</span> <span class="token string">'Terrible'</span><span class="token punctuation">,</span> <span class="token string">'Bad'</span><span class="token punctuation">,</span> <span class="token string">'OK'</span><span class="token punctuation">,</span> <span class="token string">'Good'</span><span class="token punctuation">,</span> <span class="token string">'Excellent'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
@ -1168,7 +1147,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-802"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-806"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1177,7 +1156,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-258"
|
||||
aria-controls="code-preview-source-group-260"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1240,19 +1219,19 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-259">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-261">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-803"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-rating</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rating-hearts<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--symbol-color-active</span><span class="token punctuation">:</span> #ff4136<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-rating</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-807"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-rating</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rating-hearts<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--symbol-color-active</span><span class="token punctuation">:</span> #ff4136<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-rating</span><span class="token punctuation">></span></span>
|
||||
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<span class="token keyword">const</span> rating <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.rating-hearts'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
rating<span class="token punctuation">.</span><span class="token function-variable function">getSymbol</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token string">'<sl-icon name="heart-fill"></sl-icon>'</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-803"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-807"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-804"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-808"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlRating</span></span>
|
||||
@ -1261,7 +1240,7 @@
|
||||
<span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token string-property property">'--symbol-color-active'</span><span class="token operator">:</span> <span class="token string">'#ff4136'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-804"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-808"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1270,7 +1249,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-259"
|
||||
aria-controls="code-preview-source-group-261"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1343,9 +1322,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-260">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-262">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-805"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-rating</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rating-emojis<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-rating</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-809"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-rating</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rating-emojis<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-rating</span><span class="token punctuation">></span></span>
|
||||
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
|
||||
<span class="token keyword">const</span> rating <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.rating-emojis'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@ -1355,11 +1334,11 @@
|
||||
<span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string"><sl-icon name="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>icons<span class="token punctuation">[</span>value <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">"></sl-icon></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-805"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-809"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-806"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-810"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">function</span> <span class="token function">getSymbol</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
<span class="token keyword">const</span> icons <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'emoji-angry'</span><span class="token punctuation">,</span> <span class="token string">'emoji-frown'</span><span class="token punctuation">,</span> <span class="token string">'emoji-expressionless'</span><span class="token punctuation">,</span> <span class="token string">'emoji-smile'</span><span class="token punctuation">,</span> <span class="token string">'emoji-laughing'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||||
@ -1367,7 +1346,7 @@
|
||||
<span class="token punctuation">}</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlRating</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Rating<span class="token punctuation">"</span></span> <span class="token attr-name">getSymbol</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>getSymbol<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-806"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-810"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1376,7 +1355,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-260"
|
||||
aria-controls="code-preview-source-group-262"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1445,7 +1424,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-807"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/rating/rating.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-807"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-811"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/rating/rating.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-811"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -1460,17 +1439,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-808"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/rating/rating.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-808"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-812"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/rating/rating.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-812"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-809"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/rating/rating.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-809"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-813"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/rating/rating.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-813"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-810"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-810"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-814"><span class="token keyword">import</span> SlRating <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/rating'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-814"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -92,27 +92,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -507,18 +486,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-261">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-273">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-811"><span class="token comment"><!-- Nebula 2 release date 🎉 --></span>
|
||||
<pre><code class="language-html" id="code-block-839"><span class="token comment"><!-- Nebula 2 release date 🎉 --></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-relative-time</span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-07-15T09:17:00-04:00<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-relative-time</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-811"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-839"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-812"><span class="token keyword">import</span> SlRelativeTime <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/relative-time'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-840"><span class="token keyword">import</span> SlRelativeTime <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/relative-time'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlRelativeTime</span></span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-07-15T09:17:00-04:00<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-812"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-840"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -527,7 +506,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-261"
|
||||
aria-controls="code-preview-source-group-273"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -630,9 +609,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-262">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-274">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-813"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>relative-time-sync<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-841"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>relative-time-sync<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-relative-time</span> <span class="token attr-name">sync</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-relative-time</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
|
||||
@ -642,16 +621,16 @@
|
||||
|
||||
relativeTime<span class="token punctuation">.</span>date <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">60000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-813"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-841"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-814"><span class="token keyword">import</span> SlRelativeTime <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/relative-time'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-842"><span class="token keyword">import</span> SlRelativeTime <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/relative-time'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> date <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">60000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlRelativeTime</span></span> <span class="token attr-name">date</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>date<span class="token punctuation">}</span></span> <span class="token attr-name">sync</span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-814"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-842"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -660,7 +639,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-262"
|
||||
aria-controls="code-preview-source-group-274"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -721,16 +700,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-263">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-275">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-815"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-relative-time</span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-07-15T09:17:00-04:00<span class="token punctuation">"</span></span> <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>narrow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-relative-time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<pre><code class="language-html" id="code-block-843"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-relative-time</span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-07-15T09:17:00-04:00<span class="token punctuation">"</span></span> <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>narrow<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-relative-time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-relative-time</span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-07-15T09:17:00-04:00<span class="token punctuation">"</span></span> <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>short<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-relative-time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-relative-time</span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-07-15T09:17:00-04:00<span class="token punctuation">"</span></span> <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>long<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-relative-time</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-815"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-843"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-816"><span class="token keyword">import</span> SlRelativeTime <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/relative-time'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-844"><span class="token keyword">import</span> SlRelativeTime <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/relative-time'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -741,7 +720,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlRelativeTime</span></span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-07-15T09:17:00-04:00<span class="token punctuation">"</span></span> <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>long<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-816"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-844"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -750,7 +729,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-263"
|
||||
aria-controls="code-preview-source-group-275"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -810,18 +789,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-264">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-276">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-817">English: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-relative-time</span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-07-15T09:17:00-04:00<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en-US<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-relative-time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<pre><code class="language-html" id="code-block-845">English: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-relative-time</span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-07-15T09:17:00-04:00<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en-US<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-relative-time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
Chinese: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-relative-time</span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-07-15T09:17:00-04:00<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zh-CN<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-relative-time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
German: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-relative-time</span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-07-15T09:17:00-04:00<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-relative-time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
Greek: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-relative-time</span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-07-15T09:17:00-04:00<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>el<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-relative-time</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
Russian: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-relative-time</span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-07-15T09:17:00-04:00<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ru<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-relative-time</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-817"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-845"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-818"><span class="token keyword">import</span> SlRelativeTime <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/relative-time'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-846"><span class="token keyword">import</span> SlRelativeTime <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/relative-time'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -836,7 +815,7 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
|
||||
Russian: </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlRelativeTime</span></span> <span class="token attr-name">date</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-07-15T09:17:00-04:00<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ru<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-818"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-846"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -845,7 +824,7 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-264"
|
||||
aria-controls="code-preview-source-group-276"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -914,7 +893,7 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-819"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/relative-time/relative-time.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-819"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-847"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/relative-time/relative-time.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-847"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -929,17 +908,17 @@ Russian: <span class="token tag"><span class="token tag"><span class="token punc
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-820"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/relative-time/relative-time.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-820"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-848"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/relative-time/relative-time.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-848"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-821"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/relative-time/relative-time.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-821"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-849"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/relative-time/relative-time.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-849"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-822"><span class="token keyword">import</span> SlRelativeTime <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/relative-time'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-822"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-850"><span class="token keyword">import</span> SlRelativeTime <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/relative-time'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-850"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -98,27 +98,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -548,9 +527,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-319">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-292">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-961"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>resize-observer-overview<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-884"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>resize-observer-overview<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-resize-observer</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>Resize this box and watch the console 👉<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-resize-observer</span><span class="token punctuation">></span></span>
|
||||
@ -575,11 +554,11 @@
|
||||
<span class="token property">padding</span><span class="token punctuation">:</span> 4rem 2rem<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-961"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-884"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-962"><span class="token keyword">import</span> SlResizeObserver <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/resize-observer'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-885"><span class="token keyword">import</span> SlResizeObserver <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/resize-observer'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||||
.resize-observer-overview div {
|
||||
@ -603,7 +582,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-962"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-885"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -612,7 +591,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-319"
|
||||
aria-controls="code-preview-source-group-292"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -681,7 +660,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-963"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/resize-observer/resize-observer.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-963"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-886"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/resize-observer/resize-observer.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-886"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -696,17 +675,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-964"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/resize-observer/resize-observer.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-964"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-887"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/resize-observer/resize-observer.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-887"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-965"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/resize-observer/resize-observer.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-965"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-888"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/resize-observer/resize-observer.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-888"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-966"><span class="token keyword">import</span> SlResizeObserver <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/resize-observer'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-966"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-889"><span class="token keyword">import</span> SlResizeObserver <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/resize-observer'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-889"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -92,27 +92,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -518,9 +497,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-269">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-277">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-835"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-select</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-851"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-select</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
@ -528,11 +507,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 6<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-select</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-835"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-851"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-836"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-852"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -545,7 +524,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Option 6</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlOption</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-836"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-852"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -554,7 +533,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-269"
|
||||
aria-controls="code-preview-source-group-277"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -625,18 +604,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-270">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-278">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-837"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-select</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select one<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-853"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-select</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select one<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-select</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-837"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-853"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-838"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-854"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -646,7 +625,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlOption</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-838"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-854"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -655,7 +634,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-270"
|
||||
aria-controls="code-preview-source-group-278"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -718,18 +697,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-271">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-279">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-839"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-select</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Experience<span class="token punctuation">"</span></span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Please tell us your skill level.<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-855"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-select</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Experience<span class="token punctuation">"</span></span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Please tell us your skill level.<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Novice<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Intermediate<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Advanced<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-select</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-839"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-855"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-840"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-856"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -739,7 +718,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Advanced</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlOption</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-840"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-856"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -748,7 +727,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-271"
|
||||
aria-controls="code-preview-source-group-279"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -808,18 +787,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-272">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-280">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-841"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-select</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select one<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-857"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-select</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select one<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-select</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-841"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-857"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-842"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-858"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -829,7 +808,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlOption</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-842"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-858"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -838,7 +817,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-272"
|
||||
aria-controls="code-preview-source-group-280"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -901,18 +880,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-273">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-281">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-843"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-select</span> <span class="token attr-name">clearable</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-859"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-select</span> <span class="token attr-name">clearable</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-select</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-843"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-859"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-844"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-860"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -922,7 +901,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlOption</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-844"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-860"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -931,7 +910,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-273"
|
||||
aria-controls="code-preview-source-group-281"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -991,18 +970,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-274">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-282">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-845"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-select</span> <span class="token attr-name">filled</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-861"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-select</span> <span class="token attr-name">filled</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-select</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-845"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-861"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-846"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-862"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -1012,7 +991,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlOption</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-846"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-862"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1021,7 +1000,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-274"
|
||||
aria-controls="code-preview-source-group-282"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1079,18 +1058,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-275">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-283">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-847"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-select</span> <span class="token attr-name">pill</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-863"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-select</span> <span class="token attr-name">pill</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-select</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-847"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-863"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-848"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-864"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -1100,7 +1079,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlOption</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-848"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-864"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1109,7 +1088,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-275"
|
||||
aria-controls="code-preview-source-group-283"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1169,18 +1148,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-276">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-284">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-849"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-select</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Disabled<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-865"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-select</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Disabled<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-select</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-849"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-865"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-850"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-866"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -1190,7 +1169,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlOption</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-850"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-866"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1199,7 +1178,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-276"
|
||||
aria-controls="code-preview-source-group-284"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1266,9 +1245,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-277">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-285">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-851"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-select</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a Few<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1 option-2 option-3<span class="token punctuation">"</span></span> <span class="token attr-name">multiple</span> <span class="token attr-name">clearable</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-867"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-select</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select a Few<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1 option-2 option-3<span class="token punctuation">"</span></span> <span class="token attr-name">multiple</span> <span class="token attr-name">clearable</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
@ -1276,11 +1255,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 6<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-select</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-851"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-867"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-852"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-868"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -1293,7 +1272,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Option 6</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlOption</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-852"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-868"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1302,7 +1281,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-277"
|
||||
aria-controls="code-preview-source-group-285"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1378,19 +1357,19 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-278">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-286">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-853"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-select</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1 option-2<span class="token punctuation">"</span></span> <span class="token attr-name">multiple</span> <span class="token attr-name">clearable</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-869"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-select</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1 option-2<span class="token punctuation">"</span></span> <span class="token attr-name">multiple</span> <span class="token attr-name">clearable</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-select</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-853"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-869"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-854"><span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-870"><span class="token keyword">import</span> SlDivider <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/divider'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -1401,7 +1380,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlOption</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-854"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-870"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1410,7 +1389,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-278"
|
||||
aria-controls="code-preview-source-group-286"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1479,9 +1458,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-279">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-287">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-855"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-select</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-871"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-select</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>small</span><span class="token punctuation">></span></span>Section 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>small</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
@ -1492,11 +1471,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 6<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-select</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-855"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-871"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-856"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-872"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -1509,7 +1488,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Option 6</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlOption</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-856"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-872"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1518,7 +1497,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-279"
|
||||
aria-controls="code-preview-source-group-287"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1595,9 +1574,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-280">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-288">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-857"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-select</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Small<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-873"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-select</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Small<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
@ -1618,11 +1597,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-select</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-857"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-873"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-858"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-874"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -1650,7 +1629,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-858"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-874"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1659,7 +1638,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-280"
|
||||
aria-controls="code-preview-source-group-288"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1723,18 +1702,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-281">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-289">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-859"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-select</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-875"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-select</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-select</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-859"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-875"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-860"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-876"><span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -1744,7 +1723,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlOption</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Option 3</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlOption</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlDropdown</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
);
|
||||
</span></code><sl-copy-button class="copy-code-button" from="code-block-860"></sl-copy-button></pre>
|
||||
</span></code><sl-copy-button class="copy-code-button" from="code-block-876"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1753,7 +1732,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-281"
|
||||
aria-controls="code-preview-source-group-289"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1828,9 +1807,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-282">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-290">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-861"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-select</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Small<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">clearable</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-877"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-select</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Small<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">clearable</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>house<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>prefix<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
@ -1850,11 +1829,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>option-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Option 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-select</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-861"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-877"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-862"><span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-878"><span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlOption <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/option'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -1882,7 +1861,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlSelect</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-862"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-878"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1891,7 +1870,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-282"
|
||||
aria-controls="code-preview-source-group-290"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -2009,9 +1988,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-283">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-291">
|
||||
<div class="code-preview__source code-preview__source--html">
|
||||
<pre><code class="language-html" id="code-block-863"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-select</span>
|
||||
<pre><code class="language-html" id="code-block-879"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-select</span>
|
||||
<span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Select one<span class="token punctuation">"</span></span>
|
||||
<span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email phone<span class="token punctuation">"</span></span>
|
||||
<span class="token attr-name">multiple</span>
|
||||
@ -2048,7 +2027,7 @@
|
||||
</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-863"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-879"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2057,7 +2036,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-283"
|
||||
aria-controls="code-preview-source-group-291"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -2125,7 +2104,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-864"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/select/select.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-864"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-880"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/select/select.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-880"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -2140,17 +2119,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-865"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/select/select.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-865"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-881"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/select/select.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-881"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-866"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/select/select.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-866"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-882"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/select/select.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-882"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-867"><span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-867"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-883"><span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-883"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -98,27 +98,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -559,9 +538,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-295">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-297">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-893"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>skeleton-overview<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-902"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>skeleton-overview<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-skeleton</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-skeleton</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-skeleton</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-skeleton</span><span class="token punctuation">></span></span>
|
||||
@ -604,11 +583,11 @@
|
||||
<span class="token property">width</span><span class="token punctuation">:</span> 80%<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-893"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-902"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-894"><span class="token keyword">import</span> SlSkeleton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/skeleton'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-903"><span class="token keyword">import</span> SlSkeleton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/skeleton'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||||
.skeleton-overview header {
|
||||
@ -659,7 +638,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-894"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-903"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -668,7 +647,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-295"
|
||||
aria-controls="code-preview-source-group-297"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -750,9 +729,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-296">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-298">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-895"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>skeleton-effects<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-904"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>skeleton-effects<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-skeleton</span> <span class="token attr-name">effect</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-skeleton</span><span class="token punctuation">></span></span>
|
||||
None
|
||||
|
||||
@ -772,11 +751,11 @@
|
||||
<span class="token property">margin-top</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-895"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-904"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-896"><span class="token keyword">import</span> SlSkeleton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/skeleton'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-905"><span class="token keyword">import</span> SlSkeleton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/skeleton'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||||
.skeleton-effects {
|
||||
@ -802,7 +781,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-896"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-905"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -811,7 +790,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-296"
|
||||
aria-controls="code-preview-source-group-298"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -891,9 +870,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-297">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-299">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-897"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>skeleton-paragraphs<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-906"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>skeleton-paragraphs<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-skeleton</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-skeleton</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-skeleton</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-skeleton</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-skeleton</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-skeleton</span><span class="token punctuation">></span></span>
|
||||
@ -918,11 +897,11 @@
|
||||
<span class="token property">width</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-897"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-906"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-898"><span class="token keyword">import</span> SlSkeleton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/skeleton'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-907"><span class="token keyword">import</span> SlSkeleton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/skeleton'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||||
.skeleton-paragraphs sl-skeleton {
|
||||
@ -955,7 +934,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-898"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-907"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -964,7 +943,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-297"
|
||||
aria-controls="code-preview-source-group-299"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1041,9 +1020,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-298">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-300">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-899"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>skeleton-avatars<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-908"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>skeleton-avatars<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-skeleton</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-skeleton</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-skeleton</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-skeleton</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-skeleton</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-skeleton</span><span class="token punctuation">></span></span>
|
||||
@ -1065,11 +1044,11 @@
|
||||
<span class="token property">--border-radius</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-border-radius-medium<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-899"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-908"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-900"><span class="token keyword">import</span> SlSkeleton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/skeleton'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-909"><span class="token keyword">import</span> SlSkeleton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/skeleton'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||||
.skeleton-avatars sl-skeleton {
|
||||
@ -1099,7 +1078,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-900"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-909"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1108,7 +1087,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-298"
|
||||
aria-controls="code-preview-source-group-300"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1225,9 +1204,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-299">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-301">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-901"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>skeleton-shapes<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-910"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>skeleton-shapes<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-skeleton</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>square<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-skeleton</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-skeleton</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-skeleton</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-skeleton</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>triangle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-skeleton</span><span class="token punctuation">></span></span>
|
||||
@ -1282,11 +1261,11 @@
|
||||
<span class="token property">margin-right</span><span class="token punctuation">:</span> 0.5rem<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-901"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-910"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-902"><span class="token keyword">import</span> SlSkeleton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/skeleton'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-911"><span class="token keyword">import</span> SlSkeleton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/skeleton'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||||
.skeleton-shapes sl-skeleton {
|
||||
@ -1336,7 +1315,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-902"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-911"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1345,7 +1324,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-299"
|
||||
aria-controls="code-preview-source-group-301"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1404,14 +1383,14 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-300">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-302">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-903"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-skeleton</span> <span class="token attr-name">effect</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sheen<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--color</span><span class="token punctuation">:</span> tomato<span class="token punctuation">;</span> <span class="token property">--sheen-color</span><span class="token punctuation">:</span> #ffb094<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-skeleton</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-903"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-912"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-skeleton</span> <span class="token attr-name">effect</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sheen<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--color</span><span class="token punctuation">:</span> tomato<span class="token punctuation">;</span> <span class="token property">--sheen-color</span><span class="token punctuation">:</span> #ffb094<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-skeleton</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-912"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-904"><span class="token keyword">import</span> SlSkeleton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/skeleton'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-913"><span class="token keyword">import</span> SlSkeleton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/skeleton'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||||
.skeleton-avatars sl-skeleton {
|
||||
@ -1431,7 +1410,7 @@
|
||||
</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlSkeleton</span></span> <span class="token attr-name">effect</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sheen<span class="token punctuation">"</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token string-property property">'--color'</span><span class="token operator">:</span> <span class="token string">'tomato'</span><span class="token punctuation">,</span> <span class="token string-property property">'--sheen-color'</span><span class="token operator">:</span> <span class="token string">'#ffb094'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-904"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-913"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1440,7 +1419,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-300"
|
||||
aria-controls="code-preview-source-group-302"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1509,7 +1488,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-905"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/skeleton/skeleton.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-905"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-914"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/skeleton/skeleton.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-914"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -1524,17 +1503,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-906"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/skeleton/skeleton.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-906"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-915"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/skeleton/skeleton.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-915"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-907"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/skeleton/skeleton.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-907"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-916"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/skeleton/skeleton.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-916"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-908"><span class="token keyword">import</span> SlSkeleton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/skeleton'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-908"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-917"><span class="token keyword">import</span> SlSkeleton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/skeleton'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-917"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -92,27 +92,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -496,17 +475,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-265">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-293">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-823"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-spinner</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-spinner</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-823"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-890"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-spinner</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-spinner</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-890"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-824"><span class="token keyword">import</span> SlSpinner <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/spinner'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-891"><span class="token keyword">import</span> SlSpinner <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/spinner'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlSpinner</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-824"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-891"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -515,7 +494,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-265"
|
||||
aria-controls="code-preview-source-group-293"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -577,16 +556,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-266">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-294">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-825"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-spinner</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-spinner</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-892"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-spinner</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-spinner</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-spinner</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-size</span><span class="token punctuation">:</span> 2rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-spinner</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-spinner</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-size</span><span class="token punctuation">:</span> 3rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-spinner</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-825"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-892"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-826"><span class="token keyword">import</span> SlSpinner <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/spinner'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-893"><span class="token keyword">import</span> SlSpinner <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/spinner'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -595,7 +574,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlSpinner</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token string">'3rem'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-826"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-893"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -604,7 +583,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-266"
|
||||
aria-controls="code-preview-source-group-294"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -662,14 +641,14 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-267">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-295">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-827"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-spinner</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-size</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span> <span class="token property">--track-width</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-spinner</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-827"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-894"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-spinner</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-size</span><span class="token punctuation">:</span> 50px<span class="token punctuation">;</span> <span class="token property">--track-width</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-spinner</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-894"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-828"><span class="token keyword">import</span> SlSpinner <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/spinner'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-895"><span class="token keyword">import</span> SlSpinner <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/spinner'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlSpinner</span></span>
|
||||
@ -679,7 +658,7 @@
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-828"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-895"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -688,7 +667,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-267"
|
||||
aria-controls="code-preview-source-group-295"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -745,14 +724,14 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-268">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-296">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-829"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-spinner</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-size</span><span class="token punctuation">:</span> 3rem<span class="token punctuation">;</span> <span class="token property">--indicator-color</span><span class="token punctuation">:</span> deeppink<span class="token punctuation">;</span> <span class="token property">--track-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-spinner</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-829"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-896"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-spinner</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">font-size</span><span class="token punctuation">:</span> 3rem<span class="token punctuation">;</span> <span class="token property">--indicator-color</span><span class="token punctuation">:</span> deeppink<span class="token punctuation">;</span> <span class="token property">--track-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-spinner</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-896"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-830"><span class="token keyword">import</span> SlSpinner <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/spinner'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-897"><span class="token keyword">import</span> SlSpinner <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/spinner'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlSpinner</span></span>
|
||||
@ -763,7 +742,7 @@
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-830"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-897"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -772,7 +751,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-268"
|
||||
aria-controls="code-preview-source-group-296"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -841,7 +820,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-831"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/spinner/spinner.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-831"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-898"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/spinner/spinner.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-898"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -856,17 +835,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-832"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/spinner/spinner.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-832"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-899"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/spinner/spinner.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-899"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-833"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/spinner/spinner.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-833"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-900"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/spinner/spinner.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-900"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-834"><span class="token keyword">import</span> SlSpinner <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/spinner'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-834"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-901"><span class="token keyword">import</span> SlSpinner <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/spinner'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-901"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -98,27 +98,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -540,9 +519,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-284">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-309">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-868"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-split-panel</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-938"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-split-panel</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span>
|
||||
<span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>start<span class="token punctuation">"</span></span>
|
||||
<span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-neutral-50<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span>
|
||||
@ -556,11 +535,11 @@
|
||||
End
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-split-panel</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-868"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-938"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-869"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-939"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlSplitPanel</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -590,7 +569,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlSplitPanel</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-869"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-939"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -599,7 +578,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-284"
|
||||
aria-controls="code-preview-source-group-309"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -688,9 +667,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-285">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-310">
|
||||
<div class="code-preview__source code-preview__source--html">
|
||||
<pre><code class="language-html" id="code-block-870"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-split-panel</span> <span class="token attr-name">position</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>75<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-940"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-split-panel</span> <span class="token attr-name">position</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>75<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span>
|
||||
<span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>start<span class="token punctuation">"</span></span>
|
||||
<span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-neutral-50<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span>
|
||||
@ -704,7 +683,7 @@
|
||||
End
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-split-panel</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-870"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-940"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -713,7 +692,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-285"
|
||||
aria-controls="code-preview-source-group-310"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -794,9 +773,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-286">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-311">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-871"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-split-panel</span> <span class="token attr-name">position-in-pixels</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>150<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-941"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-split-panel</span> <span class="token attr-name">position-in-pixels</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>150<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span>
|
||||
<span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>start<span class="token punctuation">"</span></span>
|
||||
<span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-neutral-50<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span>
|
||||
@ -810,11 +789,11 @@
|
||||
End
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-split-panel</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-871"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-941"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-872"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-942"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlSplitPanel</span></span> <span class="token attr-name">position</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>200<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -844,7 +823,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlSplitPanel</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-872"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-942"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -853,7 +832,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-286"
|
||||
aria-controls="code-preview-source-group-311"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -939,9 +918,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-287">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-312">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-873"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-split-panel</span> <span class="token attr-name">vertical</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-943"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-split-panel</span> <span class="token attr-name">vertical</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span>
|
||||
<span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>start<span class="token punctuation">"</span></span>
|
||||
<span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-neutral-50<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span>
|
||||
@ -955,11 +934,11 @@
|
||||
End
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-split-panel</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-873"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-943"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-874"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-944"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlSplitPanel</span></span> <span class="token attr-name">vertical</span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token string">'400px'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -989,7 +968,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlSplitPanel</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-874"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-944"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -998,7 +977,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-287"
|
||||
aria-controls="code-preview-source-group-312"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1116,9 +1095,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-288">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-313">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-875"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>split-panel-snapping<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-945"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>split-panel-snapping<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-split-panel</span> <span class="token attr-name">snap</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100px 50%<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span>
|
||||
<span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>start<span class="token punctuation">"</span></span>
|
||||
@ -1162,11 +1141,11 @@
|
||||
<span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-875"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-945"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-876"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-946"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||||
.split-panel-snapping {
|
||||
@ -1230,7 +1209,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-876"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-946"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1239,7 +1218,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-288"
|
||||
aria-controls="code-preview-source-group-313"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1322,9 +1301,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-289">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-314">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-877"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-split-panel</span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-947"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-split-panel</span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span>
|
||||
<span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>start<span class="token punctuation">"</span></span>
|
||||
<span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-neutral-50<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span>
|
||||
@ -1338,11 +1317,11 @@
|
||||
End
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-split-panel</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-877"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-947"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-878"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-948"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlSplitPanel</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -1372,7 +1351,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlSplitPanel</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-878"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-948"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1381,7 +1360,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-289"
|
||||
aria-controls="code-preview-source-group-314"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1491,9 +1470,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-290">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-315">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-879"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>split-panel-primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-949"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>split-panel-primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-split-panel</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span>
|
||||
<span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>start<span class="token punctuation">"</span></span>
|
||||
@ -1523,11 +1502,11 @@
|
||||
|
||||
select<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-change'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>splitPanel<span class="token punctuation">.</span>primary <span class="token operator">=</span> select<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-879"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-949"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-880"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-950"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlSelect <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/select'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlMenuItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/menu-item'</span><span class="token punctuation">;</span>
|
||||
@ -1577,7 +1556,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-880"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-950"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1586,7 +1565,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-290"
|
||||
aria-controls="code-preview-source-group-315"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1678,9 +1657,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-291">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-316">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-881"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-split-panel</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--min</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span> <span class="token property">--max</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>100% - 150px<span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-951"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-split-panel</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--min</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span> <span class="token property">--max</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>100% - 150px<span class="token punctuation">)</span><span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span>
|
||||
<span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>start<span class="token punctuation">"</span></span>
|
||||
<span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-neutral-50<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span>
|
||||
@ -1694,11 +1673,11 @@
|
||||
End
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-split-panel</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-881"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-951"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-882"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-952"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlSplitPanel</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token string-property property">'--min'</span><span class="token operator">:</span> <span class="token string">'150px'</span><span class="token punctuation">,</span> <span class="token string-property property">'--max'</span><span class="token operator">:</span> <span class="token string">'calc(100% - 150px)'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -1728,7 +1707,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlSplitPanel</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-882"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-952"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1737,7 +1716,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-291"
|
||||
aria-controls="code-preview-source-group-316"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1837,9 +1816,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-292">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-317">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-883"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-split-panel</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-953"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-split-panel</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span>
|
||||
<span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>start<span class="token punctuation">"</span></span>
|
||||
<span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">height</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-neutral-50<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden</span><span class="token punctuation">"</span></span></span>
|
||||
@ -1863,11 +1842,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-split-panel</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-split-panel</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-883"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-953"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-884"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-954"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlSplitPanel</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -1913,7 +1892,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlSplitPanel</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-884"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-954"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1922,7 +1901,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-292"
|
||||
aria-controls="code-preview-source-group-317"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -2013,9 +1992,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-293">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-318">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-885"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-split-panel</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--divider-width</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-955"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-split-panel</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--divider-width</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>divider<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>grip-vertical<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span>
|
||||
<span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>start<span class="token punctuation">"</span></span>
|
||||
@ -2030,11 +2009,11 @@
|
||||
End
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-split-panel</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-885"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-955"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-886"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-956"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -2066,7 +2045,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlSplitPanel</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-886"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-956"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2075,7 +2054,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-293"
|
||||
aria-controls="code-preview-source-group-318"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -2185,9 +2164,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-294">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-319">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-887"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>split-panel-divider<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-957"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>split-panel-divider<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-split-panel</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>divider<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>grip-vertical<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span>
|
||||
@ -2231,11 +2210,11 @@
|
||||
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-color-neutral-0<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-887"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-957"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-888"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-958"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||||
@ -2300,7 +2279,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-888"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-958"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -2309,7 +2288,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-294"
|
||||
aria-controls="code-preview-source-group-319"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -2378,7 +2357,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-889"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/split-panel/split-panel.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-889"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-959"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/split-panel/split-panel.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-959"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -2393,17 +2372,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-890"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/split-panel/split-panel.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-890"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-960"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/split-panel/split-panel.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-960"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-891"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/split-panel/split-panel.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-891"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-961"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/split-panel/split-panel.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-961"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-892"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-892"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-962"><span class="token keyword">import</span> SlSplitPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/split-panel'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-962"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -92,27 +92,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -502,17 +481,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-301">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-303">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-909"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-switch</span><span class="token punctuation">></span></span>Switch<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-switch</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-909"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-918"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-switch</span><span class="token punctuation">></span></span>Switch<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-switch</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-918"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-910"><span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-919"><span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlSwitch</span></span><span class="token punctuation">></span></span><span class="token plain-text">Switch</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlSwitch</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-910"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-919"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -521,7 +500,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-301"
|
||||
aria-controls="code-preview-source-group-303"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -587,17 +566,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-302">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-304">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-911"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-switch</span> <span class="token attr-name">checked</span><span class="token punctuation">></span></span>Checked<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-switch</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-911"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-920"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-switch</span> <span class="token attr-name">checked</span><span class="token punctuation">></span></span>Checked<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-switch</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-920"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-912"><span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-921"><span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlSwitch</span></span> <span class="token attr-name">checked</span><span class="token punctuation">></span></span><span class="token plain-text">Checked</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlSwitch</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-912"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-921"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -606,7 +585,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-302"
|
||||
aria-controls="code-preview-source-group-304"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -662,17 +641,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-303">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-305">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-913"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-switch</span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>Disabled<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-switch</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-913"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-922"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-switch</span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>Disabled<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-switch</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-922"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-914"><span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-923"><span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlSwitch</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span><span class="token plain-text">Disabled</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlSwitch</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-914"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-923"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -681,7 +660,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-303"
|
||||
aria-controls="code-preview-source-group-305"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -739,18 +718,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-304">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-306">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-915"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-switch</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-switch</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-924"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-switch</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-switch</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-switch</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Medium<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-switch</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-switch</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Large<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-switch</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-915"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-924"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-916"><span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-925"><span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -761,7 +740,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlSwitch</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Large</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlSwitch</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-916"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-925"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -770,7 +749,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-304"
|
||||
aria-controls="code-preview-source-group-306"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -829,17 +808,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-305">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-307">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-917"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-switch</span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>What should the user know about the switch?<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Label<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-switch</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-917"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-926"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-switch</span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>What should the user know about the switch?<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Label<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-switch</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-926"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-918"><span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/checkbox'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-927"><span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/checkbox'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlSwitch</span></span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>What should the user know about the switch?<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Label</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlSwitch</span></span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-918"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-927"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -848,7 +827,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-305"
|
||||
aria-controls="code-preview-source-group-307"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -904,14 +883,14 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-306">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-308">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-919"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-switch</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--width</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span> <span class="token property">--height</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span> <span class="token property">--thumb-size</span><span class="token punctuation">:</span> 36px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Really big<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-switch</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-919"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-928"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-switch</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--width</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span> <span class="token property">--height</span><span class="token punctuation">:</span> 40px<span class="token punctuation">;</span> <span class="token property">--thumb-size</span><span class="token punctuation">:</span> 36px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Really big<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-switch</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-928"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-920"><span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-929"><span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlSwitch</span></span>
|
||||
@ -922,7 +901,7 @@
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||||
<span class="token punctuation">/></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-920"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-929"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -931,7 +910,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-306"
|
||||
aria-controls="code-preview-source-group-308"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1000,7 +979,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-921"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/switch/switch.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-921"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-930"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/switch/switch.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-930"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -1015,17 +994,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-922"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/switch/switch.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-922"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-931"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/switch/switch.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-931"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-923"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/switch/switch.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-923"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-932"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/switch/switch.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-932"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-924"><span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-924"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-933"><span class="token keyword">import</span> SlSwitch <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/switch'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-933"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -95,27 +95,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -525,9 +504,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-307">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-320">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-925"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab-group</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-963"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab-group</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>general<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>General<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Custom<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>advanced<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Advanced<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab</span><span class="token punctuation">></span></span>
|
||||
@ -538,11 +517,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab-panel</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>advanced<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This is the advanced tab panel.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab-panel</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab-panel</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This is a disabled tab panel.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab-panel</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab-group</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-925"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-963"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-926"><span class="token keyword">import</span> SlTab <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-964"><span class="token keyword">import</span> SlTab <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlTabGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-group'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlTabPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-panel'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -567,7 +546,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTabPanel</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">This is a disabled tab panel.</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTabPanel</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTabGroup</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-926"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-964"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -576,7 +555,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-307"
|
||||
aria-controls="code-preview-source-group-320"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -645,9 +624,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-308">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-321">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-927"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab-group</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bottom<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-965"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab-group</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bottom<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>general<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>General<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Custom<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>advanced<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Advanced<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab</span><span class="token punctuation">></span></span>
|
||||
@ -658,11 +637,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab-panel</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>advanced<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This is the advanced tab panel.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab-panel</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab-panel</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This is a disabled tab panel.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab-panel</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab-group</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-927"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-965"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-928"><span class="token keyword">import</span> SlTab <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-966"><span class="token keyword">import</span> SlTab <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlTabGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-group'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlTabPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-panel'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -687,7 +666,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTabPanel</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">This is a disabled tab panel.</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTabPanel</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTabGroup</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-928"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-966"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -696,7 +675,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-308"
|
||||
aria-controls="code-preview-source-group-321"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -762,9 +741,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-309">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-322">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-929"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab-group</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>start<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-967"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab-group</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>start<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>general<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>General<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Custom<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>advanced<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Advanced<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab</span><span class="token punctuation">></span></span>
|
||||
@ -775,11 +754,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab-panel</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>advanced<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This is the advanced tab panel.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab-panel</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab-panel</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This is a disabled tab panel.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab-panel</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab-group</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-929"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-967"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-930"><span class="token keyword">import</span> SlTab <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-968"><span class="token keyword">import</span> SlTab <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlTabGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-group'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlTabPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-panel'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -804,7 +783,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTabPanel</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">This is a disabled tab panel.</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTabPanel</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTabGroup</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-930"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-968"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -813,7 +792,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-309"
|
||||
aria-controls="code-preview-source-group-322"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -879,9 +858,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-310">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-323">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-931"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab-group</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>end<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-969"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab-group</span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>end<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>general<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>General<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Custom<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>advanced<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Advanced<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab</span><span class="token punctuation">></span></span>
|
||||
@ -892,11 +871,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab-panel</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>advanced<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This is the advanced tab panel.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab-panel</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab-panel</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This is a disabled tab panel.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab-panel</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab-group</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-931"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-969"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-932"><span class="token keyword">import</span> SlTab <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-970"><span class="token keyword">import</span> SlTab <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlTabGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-group'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlTabPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-panel'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -921,7 +900,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTabPanel</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">This is a disabled tab panel.</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTabPanel</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTabGroup</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-932"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-970"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -930,7 +909,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-310"
|
||||
aria-controls="code-preview-source-group-323"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1019,9 +998,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-311">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-324">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-933"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab-group</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tabs-closable<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-971"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab-group</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tabs-closable<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>general<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>General<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>closable-1<span class="token punctuation">"</span></span> <span class="token attr-name">closable</span><span class="token punctuation">></span></span>Closable 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>closable-2<span class="token punctuation">"</span></span> <span class="token attr-name">closable</span><span class="token punctuation">></span></span>Closable 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab</span><span class="token punctuation">></span></span>
|
||||
@ -1050,11 +1029,11 @@
|
||||
panel<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-933"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-971"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-934"><span class="token keyword">import</span> SlTab <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-972"><span class="token keyword">import</span> SlTab <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlTabGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-group'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlTabPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-panel'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -1095,7 +1074,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTabGroup</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-934"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-972"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1104,7 +1083,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-311"
|
||||
aria-controls="code-preview-source-group-324"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1202,9 +1181,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-312">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-325">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-935"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab-group</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-973"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab-group</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tab-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Tab 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tab-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Tab 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tab-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Tab 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab</span><span class="token punctuation">></span></span>
|
||||
@ -1247,11 +1226,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab-panel</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tab-19<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Tab panel 19<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab-panel</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab-panel</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tab-20<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Tab panel 20<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab-panel</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab-group</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-935"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-973"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-936"><span class="token keyword">import</span> SlTab <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-974"><span class="token keyword">import</span> SlTab <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlTabGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-group'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlTabPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-panel'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -1340,7 +1319,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTabPanel</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tab-20<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Tab panel 20</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTabPanel</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTabGroup</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-936"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-974"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1349,7 +1328,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-312"
|
||||
aria-controls="code-preview-source-group-325"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1420,9 +1399,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-313">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-326">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-937"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab-group</span> <span class="token attr-name">activation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>manual<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-975"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab-group</span> <span class="token attr-name">activation</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>manual<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>general<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>General<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Custom<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>advanced<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Advanced<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab</span><span class="token punctuation">></span></span>
|
||||
@ -1433,11 +1412,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab-panel</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>advanced<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This is the advanced tab panel.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab-panel</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab-panel</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This is a disabled tab panel.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab-panel</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab-group</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-937"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-975"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-938"><span class="token keyword">import</span> SlTab <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-976"><span class="token keyword">import</span> SlTab <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlTabGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-group'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlTabPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-panel'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -1462,7 +1441,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTabPanel</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">This is a disabled tab panel.</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTabPanel</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTabGroup</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-938"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-976"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1471,7 +1450,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-313"
|
||||
aria-controls="code-preview-source-group-326"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1540,7 +1519,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-939"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tab-group/tab-group.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-939"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-977"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tab-group/tab-group.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-977"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -1555,17 +1534,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-940"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tab-group/tab-group.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-940"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-978"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tab-group/tab-group.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-978"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-941"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/tab-group/tab-group.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-941"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-979"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/tab-group/tab-group.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-979"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-942"><span class="token keyword">import</span> SlTabGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-group'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-942"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-980"><span class="token keyword">import</span> SlTabGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-group'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-980"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -92,27 +92,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -506,9 +485,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-318">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-331">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-955"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab-group</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-993"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab-group</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>general<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>General<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Custom<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav<span class="token punctuation">"</span></span> <span class="token attr-name">panel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>advanced<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Advanced<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab</span><span class="token punctuation">></span></span>
|
||||
@ -519,11 +498,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab-panel</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>advanced<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This is the advanced tab panel.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab-panel</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tab-panel</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>This is a disabled tab panel.<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab-panel</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tab-group</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-955"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-993"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-956"><span class="token keyword">import</span> SlTab <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-994"><span class="token keyword">import</span> SlTab <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlTabGroup <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-group'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlTabPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-panel'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -548,7 +527,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTabPanel</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>disabled<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">This is a disabled tab panel.</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTabPanel</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTabGroup</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-956"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-994"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -557,7 +536,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-318"
|
||||
aria-controls="code-preview-source-group-331"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -630,7 +609,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-957"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tab-panel/tab-panel.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-957"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-995"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tab-panel/tab-panel.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-995"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -645,17 +624,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-958"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tab-panel/tab-panel.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-958"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-996"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tab-panel/tab-panel.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-996"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-959"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/tab-panel/tab-panel.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-959"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-997"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/tab-panel/tab-panel.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-997"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-960"><span class="token keyword">import</span> SlTabPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-panel'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-960"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-998"><span class="token keyword">import</span> SlTabPanel <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab-panel'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-998"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -92,27 +92,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -520,7 +499,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-967"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tab/tab.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-967"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-934"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tab/tab.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-934"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -535,17 +514,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-968"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tab/tab.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-968"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-935"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tab/tab.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-935"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-969"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/tab/tab.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-969"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-936"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/tab/tab.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-936"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-970"><span class="token keyword">import</span> SlTab <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-970"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-937"><span class="token keyword">import</span> SlTab <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tab'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-937"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -92,27 +92,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -503,18 +482,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-314">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-327">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-943"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tag</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tag</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-981"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tag</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tag</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tag</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>success<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Success<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tag</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tag</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>neutral<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Neutral<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tag</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tag</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Warning<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tag</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tag</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tag</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-943"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-981"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-944"><span class="token keyword">import</span> SlTag <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tag'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-982"><span class="token keyword">import</span> SlTag <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tag'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -525,7 +504,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTag</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Danger</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTag</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-944"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-982"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -534,7 +513,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-314"
|
||||
aria-controls="code-preview-source-group-327"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -593,16 +572,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-315">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-328">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-945"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tag</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tag</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-983"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tag</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tag</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tag</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Medium<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tag</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tag</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Large<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tag</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-945"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-983"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-946"><span class="token keyword">import</span> SlTag <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tag'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-984"><span class="token keyword">import</span> SlTag <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tag'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -611,7 +590,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTag</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">Large</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTag</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-946"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-984"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -620,7 +599,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-315"
|
||||
aria-controls="code-preview-source-group-328"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -676,16 +655,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-316">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-329">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-947"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tag</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">></span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tag</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-985"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tag</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">></span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tag</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tag</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">></span></span>Medium<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tag</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tag</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span> <span class="token attr-name">pill</span><span class="token punctuation">></span></span>Large<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tag</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-947"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-985"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-948"><span class="token keyword">import</span> SlTag <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tag'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-986"><span class="token keyword">import</span> SlTag <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tag'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -700,7 +679,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTag</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-948"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-986"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -709,7 +688,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-316"
|
||||
aria-controls="code-preview-source-group-329"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -787,9 +766,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-317">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-330">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-949"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tags-removable<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-987"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tags-removable<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tag</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">removable</span><span class="token punctuation">></span></span>Small<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tag</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tag</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span> <span class="token attr-name">removable</span><span class="token punctuation">></span></span>Medium<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tag</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tag</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span> <span class="token attr-name">removable</span><span class="token punctuation">></span></span>Large<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tag</span><span class="token punctuation">></span></span>
|
||||
@ -810,11 +789,11 @@
|
||||
<span class="token property">transition</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-transition-medium<span class="token punctuation">)</span> opacity<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-949"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-987"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-950"><span class="token keyword">import</span> SlTag <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tag'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-988"><span class="token keyword">import</span> SlTag <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tag'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||||
.tags-removable sl-tag {
|
||||
@ -849,7 +828,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-950"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-988"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -858,7 +837,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-317"
|
||||
aria-controls="code-preview-source-group-330"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -927,7 +906,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-951"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tag/tag.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-951"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-989"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tag/tag.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-989"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -942,17 +921,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-952"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tag/tag.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-952"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-990"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tag/tag.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-990"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-953"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/tag/tag.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-953"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-991"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/tag/tag.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-991"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-954"><span class="token keyword">import</span> SlTag <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tag'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-954"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-992"><span class="token keyword">import</span> SlTag <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tag'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-992"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -92,27 +92,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -505,17 +484,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-324">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-332">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-983"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-textarea</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-textarea</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-983"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-999"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-textarea</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-textarea</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-999"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-984"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-1000"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTextarea</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-984"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1000"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -524,7 +503,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-324"
|
||||
aria-controls="code-preview-source-group-332"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -591,17 +570,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-325">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-333">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-985"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-textarea</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Comments<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-textarea</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-985"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-1001"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-textarea</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Comments<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-textarea</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1001"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-986"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-1002"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTextarea</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Comments<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-986"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1002"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -610,7 +589,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-325"
|
||||
aria-controls="code-preview-source-group-333"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -669,17 +648,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-326">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-334">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-987"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-textarea</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Feedback<span class="token punctuation">"</span></span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Please tell us what you think.<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-textarea</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-987"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-1003"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-textarea</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Feedback<span class="token punctuation">"</span></span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Please tell us what you think.<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-textarea</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1003"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-988"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-1004"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTextarea</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Feedback<span class="token punctuation">"</span></span> <span class="token attr-name">help-text</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Please tell us what you think.<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-988"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1004"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -688,7 +667,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-326"
|
||||
aria-controls="code-preview-source-group-334"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -742,17 +721,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-327">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-335">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-989"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-textarea</span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-textarea</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-989"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-1005"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-textarea</span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-textarea</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1005"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-990"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-1006"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTextarea</span></span> <span class="token attr-name">rows</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">2</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-990"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1006"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -761,7 +740,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-327"
|
||||
aria-controls="code-preview-source-group-335"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -817,17 +796,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-328">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-336">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-991"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-textarea</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Type something<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-textarea</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-991"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-1007"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-textarea</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Type something<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-textarea</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1007"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-992"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-1008"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTextarea</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Type something<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-992"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1008"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -836,7 +815,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-328"
|
||||
aria-controls="code-preview-source-group-336"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -892,17 +871,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-329">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-337">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-993"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-textarea</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Type something<span class="token punctuation">"</span></span> <span class="token attr-name">filled</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-textarea</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-993"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-1009"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-textarea</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Type something<span class="token punctuation">"</span></span> <span class="token attr-name">filled</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-textarea</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1009"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-994"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-1010"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTextarea</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Type something<span class="token punctuation">"</span></span> <span class="token attr-name">filled</span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-994"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1010"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -911,7 +890,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-329"
|
||||
aria-controls="code-preview-source-group-337"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -967,17 +946,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-330">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-338">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-995"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-textarea</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Textarea<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-textarea</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-995"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-1011"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-textarea</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Textarea<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-textarea</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1011"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-996"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-1012"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTextarea</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Textarea<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-996"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1012"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -986,7 +965,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-330"
|
||||
aria-controls="code-preview-source-group-338"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1044,18 +1023,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-331">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-339">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-997"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-textarea</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Small<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-textarea</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-1013"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-textarea</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Small<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-textarea</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-textarea</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Medium<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>medium<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-textarea</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-textarea</span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Large<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-textarea</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-997"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1013"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-998"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-1014"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
@ -1066,7 +1045,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTextarea</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Large<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTextarea</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-998"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1014"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1075,7 +1054,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-331"
|
||||
aria-controls="code-preview-source-group-339"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1134,17 +1113,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-332">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-340">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-999"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-textarea</span> <span class="token attr-name">resize</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-textarea</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-999"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-1015"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-textarea</span> <span class="token attr-name">resize</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-textarea</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1015"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-1000"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-1016"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTextarea</span></span> <span class="token attr-name">resize</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1000"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1016"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1153,7 +1132,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-332"
|
||||
aria-controls="code-preview-source-group-340"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1212,17 +1191,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-333">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-341">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-1001"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-textarea</span> <span class="token attr-name">resize</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>auto<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-textarea</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1001"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-1017"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-textarea</span> <span class="token attr-name">resize</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>auto<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-textarea</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1017"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-1002"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-1018"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTextarea</span></span> <span class="token attr-name">resize</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>auto<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1002"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1018"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1231,7 +1210,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-333"
|
||||
aria-controls="code-preview-source-group-341"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1300,7 +1279,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-1003"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/textarea/textarea.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-1003"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-1019"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/textarea/textarea.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-1019"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -1315,17 +1294,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-1004"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/textarea/textarea.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1004"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-1020"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/textarea/textarea.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1020"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-1005"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/textarea/textarea.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1005"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-1021"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/textarea/textarea.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1021"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-1006"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1006"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-1022"><span class="token keyword">import</span> SlTextarea <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/textarea'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1022"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -92,27 +92,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -517,16 +496,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-334">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-342">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-1007"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>This is a tooltip<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-1023"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>This is a tooltip<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span><span class="token punctuation">></span></span>Hover Me<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tooltip</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1007"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1023"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-1008"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-1024"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlTooltip <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tooltip'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -534,7 +513,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">Hover Me</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTooltip</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1008"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1024"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -543,7 +522,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-334"
|
||||
aria-controls="code-preview-source-group-342"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -691,9 +670,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-335">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-343">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-1009"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tooltip-placement-example<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-1025"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tooltip-placement-example<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tooltip-placement-example-row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top-start<span class="token punctuation">"</span></span> <span class="token attr-name">placement</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top-start<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
@ -783,11 +762,11 @@
|
||||
<span class="token property">margin-left</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span><span class="token punctuation">(</span>40px * 3<span class="token punctuation">)</span> + <span class="token punctuation">(</span>0.25rem * 3<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1009"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1025"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-1010"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-1026"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlTooltip <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tooltip'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||||
@ -885,7 +864,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1010"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1026"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -894,7 +873,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-335"
|
||||
aria-controls="code-preview-source-group-343"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -955,16 +934,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-336">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-344">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-1011"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Click again to dismiss<span class="token punctuation">"</span></span> <span class="token attr-name">trigger</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>click<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-1027"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Click again to dismiss<span class="token punctuation">"</span></span> <span class="token attr-name">trigger</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>click<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span><span class="token punctuation">></span></span>Click to Toggle<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tooltip</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1011"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1027"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-1012"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-1028"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlTooltip <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tooltip'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -972,7 +951,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">Click to Toggle</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTooltip</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1012"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1028"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -981,7 +960,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-336"
|
||||
aria-controls="code-preview-source-group-344"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1053,9 +1032,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-337">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-345">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-1013"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">margin-right</span><span class="token punctuation">:</span> 4rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Toggle Manually<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-1029"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">margin-right</span><span class="token punctuation">:</span> 4rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Toggle Manually<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>This is an avatar<span class="token punctuation">"</span></span> <span class="token attr-name">trigger</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>manual<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>manual-tooltip<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-avatar</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>User<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-avatar</span><span class="token punctuation">></span></span>
|
||||
@ -1067,11 +1046,11 @@
|
||||
|
||||
toggle<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>tooltip<span class="token punctuation">.</span>open <span class="token operator">=</span> <span class="token operator">!</span>tooltip<span class="token punctuation">.</span>open<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1013"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1029"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-1014"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-1030"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlAvatar <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/avatar'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlTooltip <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tooltip'</span><span class="token punctuation">;</span>
|
||||
@ -1091,7 +1070,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1014"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1030"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1100,7 +1079,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-337"
|
||||
aria-controls="code-preview-source-group-345"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1161,16 +1140,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-338">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-346">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-1015"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>This is a tooltip<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--sl-tooltip-arrow-size</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-1031"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>This is a tooltip<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--sl-tooltip-arrow-size</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span><span class="token punctuation">></span></span>No Arrow<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tooltip</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1015"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1031"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-1016"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-1032"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlTooltip <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tooltip'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -1184,7 +1163,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTooltip</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1016"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1032"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1193,7 +1172,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-338"
|
||||
aria-controls="code-preview-source-group-346"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1238,10 +1217,10 @@
|
||||
<p>
|
||||
To override it globally, set it in a root block in your stylesheet after the Nebula stylesheet is loaded.
|
||||
</p>
|
||||
<pre><code class="language-css" id="code-block-1017"><span class="token selector">:root</span> <span class="token punctuation">{</span>
|
||||
<pre><code class="language-css" id="code-block-1033"><span class="token selector">:root</span> <span class="token punctuation">{</span>
|
||||
<span class="token property">--sl-tooltip-arrow-size</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1017"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1033"></sl-copy-button></pre>
|
||||
<h3 id="html-in-tooltips" class="anchor-heading">
|
||||
HTML in Tooltips<a href="#html-in-tooltips" aria-label='Direct link to "HTML in Tooltips"'></a>
|
||||
</h3>
|
||||
@ -1264,18 +1243,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-339">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-347">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-1018"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tooltip</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-1034"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tooltip</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>I'm not <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span>just<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span> a tooltip, I'm a <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>em</span><span class="token punctuation">></span></span>tooltip<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>em</span><span class="token punctuation">></span></span> with HTML!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span><span class="token punctuation">></span></span>Hover me<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tooltip</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1018"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1034"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-1019"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-1035"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlTooltip <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tooltip'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -1287,7 +1266,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">Hover Me</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTooltip</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1019"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1035"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1296,7 +1275,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-339"
|
||||
aria-controls="code-preview-source-group-347"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1360,16 +1339,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-340">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-348">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-1020"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tooltip</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--max-width</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>This tooltip will wrap after only 80 pixels.<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-1036"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tooltip</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">--max-width</span><span class="token punctuation">:</span> 80px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>This tooltip will wrap after only 80 pixels.<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span><span class="token punctuation">></span></span>Hover me<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tooltip</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1020"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1036"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-1021"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-1037"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlTooltip <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tooltip'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -1377,7 +1356,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">Hover Me</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTooltip</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1021"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1037"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1386,7 +1365,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-340"
|
||||
aria-controls="code-preview-source-group-348"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1479,9 +1458,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-341">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-349">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-1022"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tooltip-hoist<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-1038"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tooltip-hoist<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tooltip</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>This is a tooltip<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-button</span><span class="token punctuation">></span></span>No Hoist<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-button</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tooltip</span><span class="token punctuation">></span></span>
|
||||
@ -1499,11 +1478,11 @@
|
||||
<span class="token property">padding</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-spacing-medium<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1022"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1038"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-1023"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-1039"><span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlTooltip <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tooltip'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||||
@ -1530,7 +1509,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1023"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1039"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1539,7 +1518,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-341"
|
||||
aria-controls="code-preview-source-group-349"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1608,7 +1587,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-1024"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tooltip/tooltip.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-1024"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-1040"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tooltip/tooltip.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-1040"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -1623,17 +1602,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-1025"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tooltip/tooltip.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1025"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-1041"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tooltip/tooltip.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1041"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-1026"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/tooltip/tooltip.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1026"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-1042"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/tooltip/tooltip.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1042"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-1027"><span class="token keyword">import</span> SlTooltip <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tooltip'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1027"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-1043"><span class="token keyword">import</span> SlTooltip <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tooltip'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1043"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -92,27 +92,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -511,9 +490,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-320">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-350">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-971"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-1044"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree-item</span><span class="token punctuation">></span></span>
|
||||
Item 1
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree-item</span><span class="token punctuation">></span></span>Item A<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tree-item</span><span class="token punctuation">></span></span>
|
||||
@ -523,11 +502,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree-item</span><span class="token punctuation">></span></span>Item 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tree-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree-item</span><span class="token punctuation">></span></span>Item 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tree-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tree</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-971"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1044"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-972"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-1045"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlTreeItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree-item'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -542,7 +521,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTreeItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">Item 3</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTreeItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTree</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-972"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1045"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -551,7 +530,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-320"
|
||||
aria-controls="code-preview-source-group-350"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -624,9 +603,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-321">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-351">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-973"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-1046"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree-item</span><span class="token punctuation">></span></span>
|
||||
Item 1
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree-item</span><span class="token punctuation">></span></span>
|
||||
@ -641,11 +620,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree-item</span><span class="token punctuation">></span></span>Item 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tree-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree-item</span><span class="token punctuation">></span></span>Item 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tree-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tree</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-973"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1046"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-974"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-1047"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlTreeItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree-item'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -665,7 +644,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTreeItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">Item 3</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTreeItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTree</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-974"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1047"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -674,7 +653,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-321"
|
||||
aria-controls="code-preview-source-group-351"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -739,9 +718,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-322">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-352">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-975"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-1048"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree-item</span> <span class="token attr-name">selected</span><span class="token punctuation">></span></span>
|
||||
Item 1
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree-item</span><span class="token punctuation">></span></span>Item A<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tree-item</span><span class="token punctuation">></span></span>
|
||||
@ -751,11 +730,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree-item</span><span class="token punctuation">></span></span>Item 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tree-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree-item</span><span class="token punctuation">></span></span>Item 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tree-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tree</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-975"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1048"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-976"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-1049"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlTreeItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree-item'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -770,7 +749,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTreeItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">Item 3</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTreeItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTree</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-976"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1049"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -779,7 +758,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-322"
|
||||
aria-controls="code-preview-source-group-352"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -849,9 +828,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-323">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-353">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-977"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-1050"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree-item</span> <span class="token attr-name">expanded</span><span class="token punctuation">></span></span>
|
||||
Item 1
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree-item</span> <span class="token attr-name">expanded</span><span class="token punctuation">></span></span>
|
||||
@ -866,11 +845,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree-item</span><span class="token punctuation">></span></span>Item 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tree-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree-item</span><span class="token punctuation">></span></span>Item 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tree-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tree</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-977"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1050"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-978"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-1051"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlTreeItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree-item'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -890,7 +869,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SlTreeItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">Item 3</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTreeItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTree</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-978"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1051"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -899,7 +878,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-323"
|
||||
aria-controls="code-preview-source-group-353"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -968,7 +947,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-979"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tree-item/tree-item.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-979"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-1052"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tree-item/tree-item.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-1052"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -983,17 +962,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-980"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tree-item/tree-item.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-980"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-1053"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tree-item/tree-item.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1053"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-981"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/tree-item/tree-item.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-981"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-1054"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/tree-item/tree-item.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1054"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-982"><span class="token keyword">import</span> SlTreeItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree-item'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-982"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-1055"><span class="token keyword">import</span> SlTreeItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree-item'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1055"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -98,27 +98,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -538,9 +517,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-342">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-354">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-1028"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-1056"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree-item</span><span class="token punctuation">></span></span>
|
||||
Deciduous
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree-item</span><span class="token punctuation">></span></span>Birch<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tree-item</span><span class="token punctuation">></span></span>
|
||||
@ -567,11 +546,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree-item</span><span class="token punctuation">></span></span>Fern<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tree-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tree-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tree</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1028"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1056"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-1029"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-1057"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlTreeItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree-item'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -603,7 +582,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTreeItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTree</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1029"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1057"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -612,7 +591,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-342"
|
||||
aria-controls="code-preview-source-group-354"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -710,9 +689,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-343">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-355">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-1030"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-select</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>selection-mode<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>single<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Selection<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-1058"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-select</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>selection-mode<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>single<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Selection<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>single<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Single<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>multiple<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Multiple<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>leaf<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Leaf<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-option</span><span class="token punctuation">></span></span>
|
||||
@ -745,11 +724,11 @@
|
||||
tree<span class="token punctuation">.</span>selection <span class="token operator">=</span> selectionMode<span class="token punctuation">.</span>value<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1030"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1058"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-1031"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-1059"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlTreeItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree-item'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
@ -783,7 +762,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1031"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1059"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -792,7 +771,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-343"
|
||||
aria-controls="code-preview-source-group-355"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -884,9 +863,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-344">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-356">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-1032"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tree-with-lines<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-1060"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tree-with-lines<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree-item</span> <span class="token attr-name">expanded</span><span class="token punctuation">></span></span>
|
||||
Deciduous
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree-item</span><span class="token punctuation">></span></span>Birch<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tree-item</span><span class="token punctuation">></span></span>
|
||||
@ -919,11 +898,11 @@
|
||||
<span class="token property">--indent-guide-width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1032"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1060"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-1033"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-1061"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlTreeItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree-item'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -955,7 +934,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTreeItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTree</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1033"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1061"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -964,7 +943,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-344"
|
||||
aria-controls="code-preview-source-group-356"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1051,9 +1030,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-345">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-357">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-1034"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree</span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-1062"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree-item</span> <span class="token attr-name">lazy</span><span class="token punctuation">></span></span>Available Trees<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tree-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tree</span><span class="token punctuation">></span></span>
|
||||
|
||||
@ -1076,11 +1055,11 @@
|
||||
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1034"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1062"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-1035"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-1063"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlTreeItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree-item'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
||||
@ -1108,7 +1087,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTree</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1035"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1063"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1117,7 +1096,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-345"
|
||||
aria-controls="code-preview-source-group-357"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1216,9 +1195,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-346">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-358">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-1036"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom-icons<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-1064"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>custom-icons<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>plus-square<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>expand-icon<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dash-square<span class="token punctuation">"</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>collapse-icon<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
|
||||
@ -1255,11 +1234,11 @@
|
||||
<span class="token property">rotate</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1036"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1064"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-1037"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-1065"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlTreeItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree-item'</span><span class="token punctuation">;</span>
|
||||
|
||||
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span>
|
||||
@ -1294,7 +1273,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTreeItem</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTree</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1037"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1065"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1303,7 +1282,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-346"
|
||||
aria-controls="code-preview-source-group-358"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1398,9 +1377,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-347">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-359">
|
||||
<div class="code-preview__source code-preview__source--html" data-flavor="html">
|
||||
<pre><code class="language-html" id="code-block-1038"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tree-with-icons<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-1066"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tree-with-icons<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-tree-item</span> <span class="token attr-name">expanded</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>folder<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
Documents
|
||||
@ -1440,11 +1419,11 @@
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tree-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tree-item</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-tree</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1038"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1066"></sl-copy-button></pre>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx" id="code-block-1039"><span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
|
||||
<pre><code class="language-jsx" id="code-block-1067"><span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span>
|
||||
<span class="token keyword">import</span> SlTreeItem <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree-item'</span><span class="token punctuation">;</span>
|
||||
|
||||
@ -1488,7 +1467,7 @@
|
||||
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SlTree</span></span><span class="token punctuation">></span></span>
|
||||
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1039"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1067"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1497,7 +1476,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-347"
|
||||
aria-controls="code-preview-source-group-359"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -1566,7 +1545,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-1040"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tree/tree.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-1040"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-1068"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tree/tree.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-1068"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -1581,17 +1560,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-1041"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tree/tree.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1041"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-1069"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/tree/tree.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1069"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-1042"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/tree/tree.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1042"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-1070"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/tree/tree.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1070"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-1043"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1043"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-1071"><span class="token keyword">import</span> SlTree <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/tree'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1071"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -98,27 +98,6 @@
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner with-toc external-link"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="#f36944"
|
||||
d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"
|
||||
></path>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Nebula, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll="">
|
||||
<header>
|
||||
<a href="/">
|
||||
@ -525,14 +504,14 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-348">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-360">
|
||||
<div class="code-preview__source code-preview__source--html">
|
||||
<pre><code class="language-html" id="code-block-1044"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">min-height</span><span class="token punctuation">:</span> 1.875rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-1072"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">min-height</span><span class="token punctuation">:</span> 1.875rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-visually-hidden</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Skip to main content<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-visually-hidden</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1044"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1072"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -541,7 +520,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-348"
|
||||
aria-controls="code-preview-source-group-360"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -602,14 +581,14 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-349">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-361">
|
||||
<div class="code-preview__source code-preview__source--html">
|
||||
<pre><code class="language-html" id="code-block-1045"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://example.com/<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-1073"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://example.com/<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
|
||||
Visit External Page
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-icon</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>box-arrow-up-right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-icon</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-visually-hidden</span><span class="token punctuation">></span></span>opens in a new window<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-visually-hidden</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1045"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1073"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -618,7 +597,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-349"
|
||||
aria-controls="code-preview-source-group-361"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -679,16 +658,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-350">
|
||||
<div class="code-preview__source-group" id="code-preview-source-group-362">
|
||||
<div class="code-preview__source code-preview__source--html">
|
||||
<pre><code class="language-html" id="code-block-1046"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-card</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">max-width</span><span class="token punctuation">:</span> 360px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<pre><code class="language-html" id="code-block-1074"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-card</span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">max-width</span><span class="token punctuation">:</span> 360px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-visually-hidden</span><span class="token punctuation">></span></span>Personal Info<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-visually-hidden</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-input</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Name<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">margin-bottom</span><span class="token punctuation">:</span> .5rem<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-input</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>sl-input</span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Email<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>email<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-input</span><span class="token punctuation">></span></span>
|
||||
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>sl-card</span><span class="token punctuation">></span></span>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1046"></sl-copy-button></pre>
|
||||
</code><sl-copy-button class="copy-code-button" from="code-block-1074"></sl-copy-button></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -697,7 +676,7 @@
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="code-preview-source-group-350"
|
||||
aria-controls="code-preview-source-group-362"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
@ -758,7 +737,7 @@
|
||||
>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html" id="code-block-1047"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/visually-hidden/visually-hidden.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-1047"></sl-copy-button></pre>
|
||||
<pre><code class="language-html" id="code-block-1075"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/visually-hidden/visually-hidden.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></code><sl-copy-button class="copy-code-button" from="code-block-1075"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
@ -773,17 +752,17 @@
|
||||
>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js" id="code-block-1048"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/visually-hidden/visually-hidden.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1048"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-1076"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/visually-hidden/visually-hidden.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1076"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-1049"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/visually-hidden/visually-hidden.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1049"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-1077"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/visually-hidden/visually-hidden.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1077"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
|
||||
<pre><code class="language-js" id="code-block-1050"><span class="token keyword">import</span> SlVisuallyHidden <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/visually-hidden'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1050"></sl-copy-button></pre>
|
||||
<pre><code class="language-js" id="code-block-1078"><span class="token keyword">import</span> SlVisuallyHidden <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/visually-hidden'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-1078"></sl-copy-button></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
|
||||
@ -18,12 +18,12 @@ import {
|
||||
import {
|
||||
HasSlotController
|
||||
} from "./chunk.NYIIDP5N.js";
|
||||
import {
|
||||
alert_styles_default
|
||||
} from "./chunk.M2WZ4AXO.js";
|
||||
import {
|
||||
e
|
||||
} from "./chunk.UZVKBFXH.js";
|
||||
import {
|
||||
alert_styles_default
|
||||
} from "./chunk.M2WZ4AXO.js";
|
||||
import {
|
||||
watch
|
||||
} from "./chunk.FA5RT4K4.js";
|
||||
@ -1,6 +1,6 @@
|
||||
import {
|
||||
SlAlert
|
||||
} from "./chunk.WF5XVJPW.js";
|
||||
} from "./chunk.EA27M3TE.js";
|
||||
|
||||
// src/react/alert/index.ts
|
||||
import * as React from "react";
|
||||
@ -1,6 +1,6 @@
|
||||
import {
|
||||
SlAnimatedImage
|
||||
} from "./chunk.FKYLS2FH.js";
|
||||
} from "./chunk.THDZPG3S.js";
|
||||
|
||||
// src/react/animated-image/index.ts
|
||||
import * as React from "react";
|
||||
@ -1,6 +1,6 @@
|
||||
import {
|
||||
SlAnimation
|
||||
} from "./chunk.UYEAPXNR.js";
|
||||
} from "./chunk.ZPH3EXSL.js";
|
||||
|
||||
// src/react/animation/index.ts
|
||||
import * as React from "react";
|
||||
@ -1,6 +1,6 @@
|
||||
import {
|
||||
SlAnimation
|
||||
} from "./chunk.UYEAPXNR.js";
|
||||
} from "./chunk.ZPH3EXSL.js";
|
||||
|
||||
// src/components/animation/animation.ts
|
||||
var animation_default = SlAnimation;
|
||||
@ -1,9 +1,6 @@
|
||||
import {
|
||||
SlIcon
|
||||
} from "./chunk.QQHXFE7X.js";
|
||||
import {
|
||||
animated_image_styles_default
|
||||
} from "./chunk.WIDVIH73.js";
|
||||
import {
|
||||
watch
|
||||
} from "./chunk.FA5RT4K4.js";
|
||||
@ -16,6 +13,9 @@ import {
|
||||
n,
|
||||
r
|
||||
} from "./chunk.URGPTPT3.js";
|
||||
import {
|
||||
animated_image_styles_default
|
||||
} from "./chunk.WIDVIH73.js";
|
||||
import {
|
||||
x
|
||||
} from "./chunk.CXZZ2LVK.js";
|
||||
@ -1,6 +1,6 @@
|
||||
import {
|
||||
SlAnimatedImage
|
||||
} from "./chunk.FKYLS2FH.js";
|
||||
} from "./chunk.THDZPG3S.js";
|
||||
|
||||
// src/components/animated-image/animated-image.ts
|
||||
var animated_image_default = SlAnimatedImage;
|
||||
@ -1,6 +1,6 @@
|
||||
import {
|
||||
SlAlert
|
||||
} from "./chunk.WF5XVJPW.js";
|
||||
} from "./chunk.EA27M3TE.js";
|
||||
|
||||
// src/components/alert/alert.ts
|
||||
var alert_default = SlAlert;
|
||||
@ -1,3 +1,6 @@
|
||||
import {
|
||||
animation_styles_default
|
||||
} from "./chunk.UG4GPH4N.js";
|
||||
import {
|
||||
dist_exports
|
||||
} from "./chunk.RAB4VAMR.js";
|
||||
@ -12,9 +15,6 @@ import {
|
||||
n,
|
||||
r2 as r
|
||||
} from "./chunk.URGPTPT3.js";
|
||||
import {
|
||||
animation_styles_default
|
||||
} from "./chunk.UG4GPH4N.js";
|
||||
import {
|
||||
x
|
||||
} from "./chunk.CXZZ2LVK.js";
|
||||
6
dist/components/alert/alert.component.js
vendored
6
dist/components/alert/alert.component.js
vendored
@ -1,6 +1,6 @@
|
||||
import {
|
||||
SlAlert
|
||||
} from "../../chunks/chunk.WF5XVJPW.js";
|
||||
} from "../../chunks/chunk.EA27M3TE.js";
|
||||
import "../../chunks/chunk.EUMKZFJV.js";
|
||||
import "../../chunks/chunk.OGR6IZGY.js";
|
||||
import "../../chunks/chunk.RCZVQXWP.js";
|
||||
@ -12,9 +12,9 @@ import "../../chunks/chunk.QPSNFEB2.js";
|
||||
import "../../chunks/chunk.O27EHOBW.js";
|
||||
import "../../chunks/chunk.2URMUHDY.js";
|
||||
import "../../chunks/chunk.NYIIDP5N.js";
|
||||
import "../../chunks/chunk.M2WZ4AXO.js";
|
||||
import "../../chunks/chunk.UZVKBFXH.js";
|
||||
import "../../chunks/chunk.UP75L23G.js";
|
||||
import "../../chunks/chunk.M2WZ4AXO.js";
|
||||
import "../../chunks/chunk.QQHXFE7X.js";
|
||||
import "../../chunks/chunk.2L6GHXIJ.js";
|
||||
import "../../chunks/chunk.7KGEATF3.js";
|
||||
@ -23,10 +23,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
|
||||
import "../../chunks/chunk.X772EESY.js";
|
||||
import "../../chunks/chunk.4UBLNU4Z.js";
|
||||
import "../../chunks/chunk.33QRBYPI.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.FA5RT4K4.js";
|
||||
import "../../chunks/chunk.K23QWHWK.js";
|
||||
import "../../chunks/chunk.URGPTPT3.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.CXZZ2LVK.js";
|
||||
import "../../chunks/chunk.KIILAQWQ.js";
|
||||
export {
|
||||
|
||||
8
dist/components/alert/alert.js
vendored
8
dist/components/alert/alert.js
vendored
@ -1,7 +1,7 @@
|
||||
import {
|
||||
alert_default
|
||||
} from "../../chunks/chunk.T7XEDVND.js";
|
||||
import "../../chunks/chunk.WF5XVJPW.js";
|
||||
} from "../../chunks/chunk.ZDSL2GV6.js";
|
||||
import "../../chunks/chunk.EA27M3TE.js";
|
||||
import "../../chunks/chunk.EUMKZFJV.js";
|
||||
import "../../chunks/chunk.OGR6IZGY.js";
|
||||
import "../../chunks/chunk.RCZVQXWP.js";
|
||||
@ -13,9 +13,9 @@ import "../../chunks/chunk.QPSNFEB2.js";
|
||||
import "../../chunks/chunk.O27EHOBW.js";
|
||||
import "../../chunks/chunk.2URMUHDY.js";
|
||||
import "../../chunks/chunk.NYIIDP5N.js";
|
||||
import "../../chunks/chunk.M2WZ4AXO.js";
|
||||
import "../../chunks/chunk.UZVKBFXH.js";
|
||||
import "../../chunks/chunk.UP75L23G.js";
|
||||
import "../../chunks/chunk.M2WZ4AXO.js";
|
||||
import "../../chunks/chunk.QQHXFE7X.js";
|
||||
import "../../chunks/chunk.2L6GHXIJ.js";
|
||||
import "../../chunks/chunk.7KGEATF3.js";
|
||||
@ -24,10 +24,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
|
||||
import "../../chunks/chunk.X772EESY.js";
|
||||
import "../../chunks/chunk.4UBLNU4Z.js";
|
||||
import "../../chunks/chunk.33QRBYPI.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.FA5RT4K4.js";
|
||||
import "../../chunks/chunk.K23QWHWK.js";
|
||||
import "../../chunks/chunk.URGPTPT3.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.CXZZ2LVK.js";
|
||||
import "../../chunks/chunk.KIILAQWQ.js";
|
||||
export {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import {
|
||||
SlAnimatedImage
|
||||
} from "../../chunks/chunk.FKYLS2FH.js";
|
||||
} from "../../chunks/chunk.THDZPG3S.js";
|
||||
import "../../chunks/chunk.QQHXFE7X.js";
|
||||
import "../../chunks/chunk.2L6GHXIJ.js";
|
||||
import "../../chunks/chunk.7KGEATF3.js";
|
||||
@ -9,11 +9,11 @@ import "../../chunks/chunk.P7ZG6EMR.js";
|
||||
import "../../chunks/chunk.X772EESY.js";
|
||||
import "../../chunks/chunk.4UBLNU4Z.js";
|
||||
import "../../chunks/chunk.33QRBYPI.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.WIDVIH73.js";
|
||||
import "../../chunks/chunk.FA5RT4K4.js";
|
||||
import "../../chunks/chunk.K23QWHWK.js";
|
||||
import "../../chunks/chunk.URGPTPT3.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.WIDVIH73.js";
|
||||
import "../../chunks/chunk.CXZZ2LVK.js";
|
||||
import "../../chunks/chunk.KIILAQWQ.js";
|
||||
export {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import {
|
||||
animated_image_default
|
||||
} from "../../chunks/chunk.RALGEJU5.js";
|
||||
import "../../chunks/chunk.FKYLS2FH.js";
|
||||
} from "../../chunks/chunk.TQRRFFWX.js";
|
||||
import "../../chunks/chunk.THDZPG3S.js";
|
||||
import "../../chunks/chunk.QQHXFE7X.js";
|
||||
import "../../chunks/chunk.2L6GHXIJ.js";
|
||||
import "../../chunks/chunk.7KGEATF3.js";
|
||||
@ -10,11 +10,11 @@ import "../../chunks/chunk.P7ZG6EMR.js";
|
||||
import "../../chunks/chunk.X772EESY.js";
|
||||
import "../../chunks/chunk.4UBLNU4Z.js";
|
||||
import "../../chunks/chunk.33QRBYPI.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.WIDVIH73.js";
|
||||
import "../../chunks/chunk.FA5RT4K4.js";
|
||||
import "../../chunks/chunk.K23QWHWK.js";
|
||||
import "../../chunks/chunk.URGPTPT3.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.WIDVIH73.js";
|
||||
import "../../chunks/chunk.CXZZ2LVK.js";
|
||||
import "../../chunks/chunk.KIILAQWQ.js";
|
||||
export {
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import {
|
||||
SlAnimation
|
||||
} from "../../chunks/chunk.UYEAPXNR.js";
|
||||
} from "../../chunks/chunk.ZPH3EXSL.js";
|
||||
import "../../chunks/chunk.UG4GPH4N.js";
|
||||
import "../../chunks/chunk.RAB4VAMR.js";
|
||||
import "../../chunks/chunk.FA5RT4K4.js";
|
||||
import "../../chunks/chunk.K23QWHWK.js";
|
||||
import "../../chunks/chunk.URGPTPT3.js";
|
||||
import "../../chunks/chunk.UG4GPH4N.js";
|
||||
import "../../chunks/chunk.CXZZ2LVK.js";
|
||||
import "../../chunks/chunk.KIILAQWQ.js";
|
||||
export {
|
||||
|
||||
6
dist/components/animation/animation.js
vendored
6
dist/components/animation/animation.js
vendored
@ -1,12 +1,12 @@
|
||||
import {
|
||||
animation_default
|
||||
} from "../../chunks/chunk.6PGWJ74B.js";
|
||||
import "../../chunks/chunk.UYEAPXNR.js";
|
||||
} from "../../chunks/chunk.SSHR2JDI.js";
|
||||
import "../../chunks/chunk.ZPH3EXSL.js";
|
||||
import "../../chunks/chunk.UG4GPH4N.js";
|
||||
import "../../chunks/chunk.RAB4VAMR.js";
|
||||
import "../../chunks/chunk.FA5RT4K4.js";
|
||||
import "../../chunks/chunk.K23QWHWK.js";
|
||||
import "../../chunks/chunk.URGPTPT3.js";
|
||||
import "../../chunks/chunk.UG4GPH4N.js";
|
||||
import "../../chunks/chunk.CXZZ2LVK.js";
|
||||
import "../../chunks/chunk.KIILAQWQ.js";
|
||||
export {
|
||||
|
||||
2
dist/components/avatar/avatar.component.js
vendored
2
dist/components/avatar/avatar.component.js
vendored
@ -12,10 +12,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
|
||||
import "../../chunks/chunk.X772EESY.js";
|
||||
import "../../chunks/chunk.4UBLNU4Z.js";
|
||||
import "../../chunks/chunk.33QRBYPI.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.FA5RT4K4.js";
|
||||
import "../../chunks/chunk.K23QWHWK.js";
|
||||
import "../../chunks/chunk.URGPTPT3.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.CXZZ2LVK.js";
|
||||
import "../../chunks/chunk.KIILAQWQ.js";
|
||||
export {
|
||||
|
||||
2
dist/components/avatar/avatar.js
vendored
2
dist/components/avatar/avatar.js
vendored
@ -13,10 +13,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
|
||||
import "../../chunks/chunk.X772EESY.js";
|
||||
import "../../chunks/chunk.4UBLNU4Z.js";
|
||||
import "../../chunks/chunk.33QRBYPI.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.FA5RT4K4.js";
|
||||
import "../../chunks/chunk.K23QWHWK.js";
|
||||
import "../../chunks/chunk.URGPTPT3.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.CXZZ2LVK.js";
|
||||
import "../../chunks/chunk.KIILAQWQ.js";
|
||||
export {
|
||||
|
||||
@ -13,10 +13,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
|
||||
import "../../chunks/chunk.X772EESY.js";
|
||||
import "../../chunks/chunk.4UBLNU4Z.js";
|
||||
import "../../chunks/chunk.33QRBYPI.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.FA5RT4K4.js";
|
||||
import "../../chunks/chunk.K23QWHWK.js";
|
||||
import "../../chunks/chunk.URGPTPT3.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.CXZZ2LVK.js";
|
||||
import "../../chunks/chunk.KIILAQWQ.js";
|
||||
export {
|
||||
|
||||
2
dist/components/breadcrumb/breadcrumb.js
vendored
2
dist/components/breadcrumb/breadcrumb.js
vendored
@ -14,10 +14,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
|
||||
import "../../chunks/chunk.X772EESY.js";
|
||||
import "../../chunks/chunk.4UBLNU4Z.js";
|
||||
import "../../chunks/chunk.33QRBYPI.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.FA5RT4K4.js";
|
||||
import "../../chunks/chunk.K23QWHWK.js";
|
||||
import "../../chunks/chunk.URGPTPT3.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.CXZZ2LVK.js";
|
||||
import "../../chunks/chunk.KIILAQWQ.js";
|
||||
export {
|
||||
|
||||
2
dist/components/button/button.component.js
vendored
2
dist/components/button/button.component.js
vendored
@ -21,10 +21,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
|
||||
import "../../chunks/chunk.X772EESY.js";
|
||||
import "../../chunks/chunk.4UBLNU4Z.js";
|
||||
import "../../chunks/chunk.33QRBYPI.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.FA5RT4K4.js";
|
||||
import "../../chunks/chunk.K23QWHWK.js";
|
||||
import "../../chunks/chunk.URGPTPT3.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.CXZZ2LVK.js";
|
||||
import "../../chunks/chunk.KIILAQWQ.js";
|
||||
export {
|
||||
|
||||
2
dist/components/button/button.js
vendored
2
dist/components/button/button.js
vendored
@ -22,10 +22,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
|
||||
import "../../chunks/chunk.X772EESY.js";
|
||||
import "../../chunks/chunk.4UBLNU4Z.js";
|
||||
import "../../chunks/chunk.33QRBYPI.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.FA5RT4K4.js";
|
||||
import "../../chunks/chunk.K23QWHWK.js";
|
||||
import "../../chunks/chunk.URGPTPT3.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.CXZZ2LVK.js";
|
||||
import "../../chunks/chunk.KIILAQWQ.js";
|
||||
export {
|
||||
|
||||
@ -19,10 +19,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
|
||||
import "../../chunks/chunk.X772EESY.js";
|
||||
import "../../chunks/chunk.4UBLNU4Z.js";
|
||||
import "../../chunks/chunk.33QRBYPI.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.FA5RT4K4.js";
|
||||
import "../../chunks/chunk.K23QWHWK.js";
|
||||
import "../../chunks/chunk.URGPTPT3.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.CXZZ2LVK.js";
|
||||
import "../../chunks/chunk.KIILAQWQ.js";
|
||||
export {
|
||||
|
||||
2
dist/components/carousel/carousel.js
vendored
2
dist/components/carousel/carousel.js
vendored
@ -20,10 +20,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
|
||||
import "../../chunks/chunk.X772EESY.js";
|
||||
import "../../chunks/chunk.4UBLNU4Z.js";
|
||||
import "../../chunks/chunk.33QRBYPI.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.FA5RT4K4.js";
|
||||
import "../../chunks/chunk.K23QWHWK.js";
|
||||
import "../../chunks/chunk.URGPTPT3.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.CXZZ2LVK.js";
|
||||
import "../../chunks/chunk.KIILAQWQ.js";
|
||||
export {
|
||||
|
||||
@ -18,10 +18,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
|
||||
import "../../chunks/chunk.X772EESY.js";
|
||||
import "../../chunks/chunk.4UBLNU4Z.js";
|
||||
import "../../chunks/chunk.33QRBYPI.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.FA5RT4K4.js";
|
||||
import "../../chunks/chunk.K23QWHWK.js";
|
||||
import "../../chunks/chunk.URGPTPT3.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.CXZZ2LVK.js";
|
||||
import "../../chunks/chunk.KIILAQWQ.js";
|
||||
export {
|
||||
|
||||
2
dist/components/checkbox/checkbox.js
vendored
2
dist/components/checkbox/checkbox.js
vendored
@ -19,10 +19,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
|
||||
import "../../chunks/chunk.X772EESY.js";
|
||||
import "../../chunks/chunk.4UBLNU4Z.js";
|
||||
import "../../chunks/chunk.33QRBYPI.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.FA5RT4K4.js";
|
||||
import "../../chunks/chunk.K23QWHWK.js";
|
||||
import "../../chunks/chunk.URGPTPT3.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.CXZZ2LVK.js";
|
||||
import "../../chunks/chunk.KIILAQWQ.js";
|
||||
export {
|
||||
|
||||
@ -43,10 +43,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
|
||||
import "../../chunks/chunk.X772EESY.js";
|
||||
import "../../chunks/chunk.4UBLNU4Z.js";
|
||||
import "../../chunks/chunk.33QRBYPI.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.FA5RT4K4.js";
|
||||
import "../../chunks/chunk.K23QWHWK.js";
|
||||
import "../../chunks/chunk.URGPTPT3.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.CXZZ2LVK.js";
|
||||
import "../../chunks/chunk.KIILAQWQ.js";
|
||||
export {
|
||||
|
||||
2
dist/components/color-picker/color-picker.js
vendored
2
dist/components/color-picker/color-picker.js
vendored
@ -44,10 +44,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
|
||||
import "../../chunks/chunk.X772EESY.js";
|
||||
import "../../chunks/chunk.4UBLNU4Z.js";
|
||||
import "../../chunks/chunk.33QRBYPI.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.FA5RT4K4.js";
|
||||
import "../../chunks/chunk.K23QWHWK.js";
|
||||
import "../../chunks/chunk.URGPTPT3.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.CXZZ2LVK.js";
|
||||
import "../../chunks/chunk.KIILAQWQ.js";
|
||||
export {
|
||||
|
||||
@ -22,10 +22,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
|
||||
import "../../chunks/chunk.X772EESY.js";
|
||||
import "../../chunks/chunk.4UBLNU4Z.js";
|
||||
import "../../chunks/chunk.33QRBYPI.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.FA5RT4K4.js";
|
||||
import "../../chunks/chunk.K23QWHWK.js";
|
||||
import "../../chunks/chunk.URGPTPT3.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.CXZZ2LVK.js";
|
||||
import "../../chunks/chunk.KIILAQWQ.js";
|
||||
export {
|
||||
|
||||
2
dist/components/copy-button/copy-button.js
vendored
2
dist/components/copy-button/copy-button.js
vendored
@ -23,10 +23,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
|
||||
import "../../chunks/chunk.X772EESY.js";
|
||||
import "../../chunks/chunk.4UBLNU4Z.js";
|
||||
import "../../chunks/chunk.33QRBYPI.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.FA5RT4K4.js";
|
||||
import "../../chunks/chunk.K23QWHWK.js";
|
||||
import "../../chunks/chunk.URGPTPT3.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.CXZZ2LVK.js";
|
||||
import "../../chunks/chunk.KIILAQWQ.js";
|
||||
export {
|
||||
|
||||
2
dist/components/details/details.component.js
vendored
2
dist/components/details/details.component.js
vendored
@ -18,10 +18,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
|
||||
import "../../chunks/chunk.X772EESY.js";
|
||||
import "../../chunks/chunk.4UBLNU4Z.js";
|
||||
import "../../chunks/chunk.33QRBYPI.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.FA5RT4K4.js";
|
||||
import "../../chunks/chunk.K23QWHWK.js";
|
||||
import "../../chunks/chunk.URGPTPT3.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.CXZZ2LVK.js";
|
||||
import "../../chunks/chunk.KIILAQWQ.js";
|
||||
export {
|
||||
|
||||
2
dist/components/details/details.js
vendored
2
dist/components/details/details.js
vendored
@ -19,10 +19,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
|
||||
import "../../chunks/chunk.X772EESY.js";
|
||||
import "../../chunks/chunk.4UBLNU4Z.js";
|
||||
import "../../chunks/chunk.33QRBYPI.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.FA5RT4K4.js";
|
||||
import "../../chunks/chunk.K23QWHWK.js";
|
||||
import "../../chunks/chunk.URGPTPT3.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.CXZZ2LVK.js";
|
||||
import "../../chunks/chunk.KIILAQWQ.js";
|
||||
export {
|
||||
|
||||
2
dist/components/dialog/dialog.component.js
vendored
2
dist/components/dialog/dialog.component.js
vendored
@ -26,10 +26,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
|
||||
import "../../chunks/chunk.X772EESY.js";
|
||||
import "../../chunks/chunk.4UBLNU4Z.js";
|
||||
import "../../chunks/chunk.33QRBYPI.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.FA5RT4K4.js";
|
||||
import "../../chunks/chunk.K23QWHWK.js";
|
||||
import "../../chunks/chunk.URGPTPT3.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.CXZZ2LVK.js";
|
||||
import "../../chunks/chunk.KIILAQWQ.js";
|
||||
export {
|
||||
|
||||
2
dist/components/dialog/dialog.js
vendored
2
dist/components/dialog/dialog.js
vendored
@ -27,10 +27,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
|
||||
import "../../chunks/chunk.X772EESY.js";
|
||||
import "../../chunks/chunk.4UBLNU4Z.js";
|
||||
import "../../chunks/chunk.33QRBYPI.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.FA5RT4K4.js";
|
||||
import "../../chunks/chunk.K23QWHWK.js";
|
||||
import "../../chunks/chunk.URGPTPT3.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.CXZZ2LVK.js";
|
||||
import "../../chunks/chunk.KIILAQWQ.js";
|
||||
export {
|
||||
|
||||
2
dist/components/drawer/drawer.component.js
vendored
2
dist/components/drawer/drawer.component.js
vendored
@ -26,10 +26,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
|
||||
import "../../chunks/chunk.X772EESY.js";
|
||||
import "../../chunks/chunk.4UBLNU4Z.js";
|
||||
import "../../chunks/chunk.33QRBYPI.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.FA5RT4K4.js";
|
||||
import "../../chunks/chunk.K23QWHWK.js";
|
||||
import "../../chunks/chunk.URGPTPT3.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.CXZZ2LVK.js";
|
||||
import "../../chunks/chunk.KIILAQWQ.js";
|
||||
export {
|
||||
|
||||
2
dist/components/drawer/drawer.js
vendored
2
dist/components/drawer/drawer.js
vendored
@ -27,10 +27,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
|
||||
import "../../chunks/chunk.X772EESY.js";
|
||||
import "../../chunks/chunk.4UBLNU4Z.js";
|
||||
import "../../chunks/chunk.33QRBYPI.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.FA5RT4K4.js";
|
||||
import "../../chunks/chunk.K23QWHWK.js";
|
||||
import "../../chunks/chunk.URGPTPT3.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.CXZZ2LVK.js";
|
||||
import "../../chunks/chunk.KIILAQWQ.js";
|
||||
export {
|
||||
|
||||
@ -14,10 +14,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
|
||||
import "../../chunks/chunk.X772EESY.js";
|
||||
import "../../chunks/chunk.4UBLNU4Z.js";
|
||||
import "../../chunks/chunk.33QRBYPI.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.FA5RT4K4.js";
|
||||
import "../../chunks/chunk.K23QWHWK.js";
|
||||
import "../../chunks/chunk.URGPTPT3.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.CXZZ2LVK.js";
|
||||
import "../../chunks/chunk.KIILAQWQ.js";
|
||||
export {
|
||||
|
||||
2
dist/components/icon-button/icon-button.js
vendored
2
dist/components/icon-button/icon-button.js
vendored
@ -15,10 +15,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
|
||||
import "../../chunks/chunk.X772EESY.js";
|
||||
import "../../chunks/chunk.4UBLNU4Z.js";
|
||||
import "../../chunks/chunk.33QRBYPI.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.FA5RT4K4.js";
|
||||
import "../../chunks/chunk.K23QWHWK.js";
|
||||
import "../../chunks/chunk.URGPTPT3.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.CXZZ2LVK.js";
|
||||
import "../../chunks/chunk.KIILAQWQ.js";
|
||||
export {
|
||||
|
||||
2
dist/components/icon/icon.component.js
vendored
2
dist/components/icon/icon.component.js
vendored
@ -8,10 +8,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
|
||||
import "../../chunks/chunk.X772EESY.js";
|
||||
import "../../chunks/chunk.4UBLNU4Z.js";
|
||||
import "../../chunks/chunk.33QRBYPI.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.FA5RT4K4.js";
|
||||
import "../../chunks/chunk.K23QWHWK.js";
|
||||
import "../../chunks/chunk.URGPTPT3.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.CXZZ2LVK.js";
|
||||
import "../../chunks/chunk.KIILAQWQ.js";
|
||||
export {
|
||||
|
||||
2
dist/components/icon/icon.js
vendored
2
dist/components/icon/icon.js
vendored
@ -9,10 +9,10 @@ import "../../chunks/chunk.P7ZG6EMR.js";
|
||||
import "../../chunks/chunk.X772EESY.js";
|
||||
import "../../chunks/chunk.4UBLNU4Z.js";
|
||||
import "../../chunks/chunk.33QRBYPI.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.FA5RT4K4.js";
|
||||
import "../../chunks/chunk.K23QWHWK.js";
|
||||
import "../../chunks/chunk.URGPTPT3.js";
|
||||
import "../../chunks/chunk.3Y6SB6QS.js";
|
||||
import "../../chunks/chunk.CXZZ2LVK.js";
|
||||
import "../../chunks/chunk.KIILAQWQ.js";
|
||||
export {
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user