Skip to content

Commit

Permalink
Rewrite JS options, methods, and events in Markdown
Browse files Browse the repository at this point in the history
  • Loading branch information
@mdo @XhmikosR
mdo authored and XhmikosR committed Oct 31, 2020
1 parent 9cedf5b commit bfafc06
Show file tree
Hide file tree
Showing 10 changed files with 257 additions and 1,141 deletions.
69 changes: 13 additions & 56 deletions site/content/docs/5.0/components/alerts.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,40 +106,13 @@ var bsAlert = new bootstrap.Alert(myAlert)

This makes an alert listen for click events on descendant elements which have the `data-dismiss="alert"` attribute. (Not necessary when using the data-api's auto-initialization.)

<table class="table">
<thead>
<tr>
<th>Method</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>close</code>
</td>
<td>
Closes an alert by removing it from the DOM. If the <code>.fade</code> and <code>.show</code> classes are present on the element, the alert will fade out before it is removed.
</td>
</tr>
<tr>
<td>
<code>dispose</code>
</td>
<td>
Destroys an element's alert. (Removes stored data on the DOM element)
</td>
</tr>
<tr>
<td>
<code>getInstance</code>
</td>
<td>
Static method which allows you to get the alert instance associated to a DOM element, you can use it like this: <code>bootstrap.Alert.getInstance(alert)</code>
</td>
</tr>
</tbody>
</table>
{{< bs-table "table" >}}
| Method | Description |
| --- | --- |
| `close` | Closes an alert by removing it from the DOM. If the `.fade` and `.show` classes are present on the element, the alert will fade out before it is removed. |
| `dispose` | Destroys an element's alert. (Removes stored data on the DOM element) |
| `getInstance` | Static method which allows you to get the alert instance associated to a DOM element, you can use it like this: `bootstrap.Alert.getInstance(alert)`. |
{{< /bs-table >}}

```js
var alertNode = document.querySelector('.alert')
Expand All @@ -151,28 +124,12 @@ alert.close()

Bootstrap's alert plugin exposes a few events for hooking into alert functionality.

<table class="table">
<thead>
<tr>
<th>Event</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>close.bs.alert</code></td>
<td>
Fires immediately when the <code>close</code> instance method is called.
</td>
</tr>
<tr>
<td><code>closed.bs.alert</code></td>
<td>
Fired when the alert has been closed and CSS transitions have completed.
</td>
</tr>
</tbody>
</table>
{{< bs-table "table" >}}
| Event | Description |
| --- | --- |
| `close.bs.alert` | Fires immediately when the `close` instance method is called. |
| `closed.bs.alert` | Fired when the alert has been closed and CSS transitions have completed. |
{{< /bs-table >}}

```js
var myAlert = document.getElementById('myAlert')
Expand Down
32 changes: 6 additions & 26 deletions site/content/docs/5.0/components/buttons.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,32 +134,12 @@ var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
```

<table class="table">
<thead>
<tr>
<th>Method</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code>toggle</code>
</td>
<td>
Toggles push state. Gives the button the appearance that it has been activated.
</td>
</tr>
<tr>
<td>
<code>dispose</code>
</td>
<td>
Destroys an element's button. (Removes stored data on the DOM element)
</td>
</tr>
</tbody>
</table>
{{< bs-table "table bs-js-table" >}}
| Method | Description |
| --- | --- |
| `toggle` | Toggles push state. Gives the button the appearance that it has been activated. |
| `dispose` | Destroys an element's button. (Removes stored data on the DOM element) |
{{< /bs-table >}}

For example, to toggle all buttons

Expand Down
137 changes: 28 additions & 109 deletions site/content/docs/5.0/components/carousel.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -272,55 +272,16 @@ var carousel = new bootstrap.Carousel(myCarousel)

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-interval=""`.

<table class="table">
<thead>
<tr>
<th style="width: 100px;">Name</th>
<th style="width: 50px;">Type</th>
<th style="width: 50px;">Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>interval</code></td>
<td>number</td>
<td><code>5000</code></td>
<td>The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.</td>
</tr>
<tr>
<td><code>keyboard</code></td>
<td>boolean</td>
<td><code>true</code></td>
<td>Whether the carousel should react to keyboard events.</td>
</tr>
<tr>
<td><code>pause</code></td>
<td>string | boolean</td>
<td><code>"hover"</code></td>
<td><p>If set to <code>"hover"</code>, pauses the cycling of the carousel on <code>mouseenter</code> and resumes the cycling of the carousel on <code>mouseleave</code>. If set to <code>false</code>, hovering over the carousel won't pause it.</p>
<p>On touch-enabled devices, when set to <code>"hover"</code>, cycling will pause on <code>touchend</code> (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.</p></td>
</tr>
<tr>
<td><code>slide</code></td>
<td>string | boolean</td>
<td><code>false</code></td>
<td>Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.</td>
</tr>
<tr>
<td><code>wrap</code></td>
<td>boolean</td>
<td><code>true</code></td>
<td>Whether the carousel should cycle continuously or have hard stops.</td>
</tr>
<tr>
<td><code>touch</code></td>
<td>boolean</td>
<td><code>true</code></td>
<td>Whether the carousel should support left/right swipe interactions on touchscreen devices.</td>
</tr>
</tbody>
</table>
{{< bs-table "table" >}}
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `interval` | number | `5000` | The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle. |
| `keyboard` | boolean | `true` | Whether the carousel should react to keyboard events. |
| `pause` | string, boolean | `"hover"` | If set to `"hover"`, pauses the cycling of the carousel on `mouseenter` and resumes the cycling of the carousel on `mouseleave`. If set to `false`, hovering over the carousel won't pause it. On touch-enabled devices, when set to `"hover"`, cycling will pause on `touchend` (once the user finished interacting with the carousel) for two intervals, before automatically resuming. This is in addition to the mouse behavior. |
| `slide` | string, boolean | `false` | Autoplays the carousel after the user manually cycles the first item. If `"carousel"`, autoplays the carousel on load. |
| `wrap` | boolean | `true` | Whether the carousel should cycle continuously or have hard stops. |
| `touch` | boolean | `true` | Whether the carousel should support left/right swipe interactions on touchscreen devices. |
{{< /bs-table >}}

### Methods

Expand All @@ -338,48 +299,18 @@ var carousel = new bootstrap.Carousel(myCarousel, {
})
```

<table class="table">
<thead>
<tr>
<th>Method</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>cycle</code></td>
<td>Cycles through the carousel items from left to right.</td>
</tr>
<tr>
<td><code>pause</code></td>
<td>Stops the carousel from cycling through items.</td>
</tr>
<tr>
<td><code>prev</code></td>
<td>Cycles to the previous item. <strong>Returns to the caller before the previous item has been shown</strong> (e.g., before the <code>slid.bs.carousel</code> event occurs).</td>
</tr>
<tr>
<td><code>next</code></td>
<td>Cycles to the next item. <strong>Returns to the caller before the next item has been shown</strong> (e.g., before the <code>slid.bs.carousel</code> event occurs).</td>
</tr>
<tr>
<td><code>nextWhenVisible</code></td>
<td>Don't cycle carousel to next when the page isn't visible or the carousel or its parent isn't visible. <strong>Returns to the caller before the target item has been shown</strong>
</tr>
<tr>
<td><code>to</code></td>
<td>Cycles the carousel to a particular frame (0 based, similar to an array). <strong>Returns to the caller before the target item has been shown</strong> (e.g., before the <code>slid.bs.carousel</code> event occurs).</td>
</tr>
<tr>
<td><code>dispose</code></td>
<td>Destroys an element's carousel. (Removes stored data on the DOM element)</td>
</tr>
<tr>
<td><code>getInstance</code></td>
<td>Static method which allows you to get the carousel instance associated with a DOM element.</td>
</tr>
</tbody>
</table>
{{< bs-table "table" >}}
| Method | Description |
| --- | --- |
| `cycle` | Cycles through the carousel items from left to right. |
| `pause` | Stops the carousel from cycling through items. |
| `prev` | Cycles to the previous item. **Returns to the caller before the previous item has been shown** (e.g., before the `slid.bs.carousel` event occurs). |
| `next` | Cycles to the next item. **Returns to the caller before the next item has been shown** (e.g., before the `slid.bs.carousel` event occurs). |
| `nextWhenVisible` | Don't cycle carousel to next when the page isn't visible or the carousel or its parent isn't visible. **Returns to the caller before the target item has been shown** |
| `to` | Cycles the carousel to a particular frame (0 based, similar to an array). **Returns to the caller before the target item has been shown** (e.g., before the `slid.bs.carousel` event occurs). |
| `dispose` | Destroys an element's carousel. (Removes stored data on the DOM element) |
| `getInstance` | Static method which allows you to get the carousel instance associated with a DOM element. |
{{< /bs-table >}}

### Events

Expand All @@ -392,24 +323,12 @@ Bootstrap's carousel class exposes two events for hooking into carousel function

All carousel events are fired at the carousel itself (i.e. at the `<div class="carousel">`).

<table class="table">
<thead>
<tr>
<th style="width: 150px;">Event type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>slide.bs.carousel</code></td>
<td>Fires immediately when the <code>slide</code> instance method is invoked.</td>
</tr>
<tr>
<td><code>slid.bs.carousel</code></td>
<td>Fired when the carousel has completed its slide transition.</td>
</tr>
</tbody>
</table>
{{< bs-table "table" >}}
| Event type | Description |
| --- | --- |
| `slide.bs.carousel` | Fires immediately when the `slide` instance method is invoked. |
| `slid.bs.carousel` | Fired when the carousel has completed its slide transition. |
{{< /bs-table >}}

```js
var myCarousel = document.getElementById('myCarousel')
Expand Down

0 comments on commit bfafc06

Please sign in to comment.