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

Update docs

Browse Source
This commit is contained in:
Cory LaViska
2017-08-29 17:53:59 -04:00
parent 7c2a0fcc95
commit 581dd36866
2 changed files with 23 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
docs/dropdowns.html
View File

@@ -156,9 +156,9 @@
</div>
</div>
<h3 id="events">Events</h3>
<p>Dropdowns require <code>shoelace.js</code> to make them interactive. You don’t need to initialize them. Simply include the script and everything “just works.”</p>
<p>There is no JavaScript API. Shoelace’s philosophy believes that custom components should act like native components as much as possible. You can, however, listen for various events:</p>
<h3 id="interactivity">Interactivity</h3>
<p>Dropdowns require <code>shoelace.js</code> for interactivity. You don’t need to initialize anything. Just include the script and everything “just works.”</p>
<p>There is no JavaScript API. Shoelace’s philosophy believes that custom components should act like native components as much as possible. You can, however, listen for various events.</p>
<ul>
<li><code>show</code> – Fires when a dropdown is shown.</li>
<li><code>hide</code> – Fires when a dropdown is hidden.</li>
@@ -175,6 +175,13 @@
.on(&#39;select&#39;, function(event, item) {
console.log(&#39;select&#39;, event.target, item);
});
</code></pre>
<p>To show or hide a dropdown programmatically, just add or remove the <code>active</code> class to the dropdown.</p>
<pre><code class="lang-javascript">// Show the dropdown
$(&#39;#my-dropdown&#39;).addClass(&#39;active&#39;);
// Hide the dropdown
$(&#39;#my-dropdown&#39;).removeClass(&#39;active&#39;);
</code></pre>
</div>

16
source/docs/dropdowns.md
View File

@@ -121,11 +121,11 @@ Dropdowns with button triggers can be used inside input groups.
</div>
</div>
### Events
### Interactivity
Dropdowns require `shoelace.js` to make them interactive. You don’t need to initialize them. Simply include the script and everything “just works.”
Dropdowns require `shoelace.js` for interactivity. You don’t need to initialize anything. Just include the script and everything “just works.”
There is no JavaScript API. Shoelace’s philosophy believes that custom components should act like native components as much as possible. You can, however, listen for various events:
There is no JavaScript API. Shoelace’s philosophy believes that custom components should act like native components as much as possible. You can, however, listen for various events.
- `show` – Fires when a dropdown is shown.
- `hide` – Fires when a dropdown is hidden.
@@ -145,3 +145,13 @@ $('#my-dropdown')
console.log('select', event.target, item);
});
```
To show or hide a dropdown programmatically, just add or remove the `active` class to the dropdown.
```javascript
// Show the dropdown
$('#my-dropdown').addClass('active');
// Hide the dropdown
$('#my-dropdown').removeClass('active');
```