@open-rlb/ng-bootstrap 3.3.40 → 3.3.42
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -205,24 +205,55 @@ type TextAlignment = 'left' | 'center' | 'right';
|
|
|
205
205
|
|
|
206
206
|
## Tabs
|
|
207
207
|
|
|
208
|
+
`rlb-tabs` holds the tab strip; `rlb-tab-content` holds the panes. Each `rlb-tab`'s `target`
|
|
209
|
+
must equal its `rlb-tab-pane`'s `id`. Seed the initially-open tab/pane with `active`. The tab
|
|
210
|
+
label is projected content, so you can put a `rlb-badge` count inside it.
|
|
211
|
+
|
|
208
212
|
```html
|
|
209
|
-
<rlb-tabs
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
>
|
|
214
|
-
|
|
215
|
-
|
|
213
|
+
<rlb-tabs view="tab">
|
|
214
|
+
<rlb-tab
|
|
215
|
+
target="home"
|
|
216
|
+
active
|
|
217
|
+
>
|
|
218
|
+
Home
|
|
219
|
+
</rlb-tab>
|
|
220
|
+
<rlb-tab target="profile">
|
|
221
|
+
Profile
|
|
222
|
+
<span
|
|
223
|
+
rlb-badge
|
|
224
|
+
color="secondary"
|
|
225
|
+
[pill]="true"
|
|
226
|
+
>
|
|
227
|
+
3
|
|
228
|
+
</span>
|
|
229
|
+
</rlb-tab>
|
|
216
230
|
<rlb-tab
|
|
217
|
-
|
|
231
|
+
target="messages"
|
|
218
232
|
[disabled]="true"
|
|
219
233
|
>
|
|
220
|
-
|
|
234
|
+
Messages
|
|
221
235
|
</rlb-tab>
|
|
222
236
|
</rlb-tabs>
|
|
237
|
+
|
|
238
|
+
<rlb-tab-content>
|
|
239
|
+
<rlb-tab-pane
|
|
240
|
+
id="home"
|
|
241
|
+
active
|
|
242
|
+
>
|
|
243
|
+
Home content.
|
|
244
|
+
</rlb-tab-pane>
|
|
245
|
+
<rlb-tab-pane id="profile">Profile content.</rlb-tab-pane>
|
|
246
|
+
<rlb-tab-pane id="messages">Messages content.</rlb-tab-pane>
|
|
247
|
+
</rlb-tab-content>
|
|
223
248
|
```
|
|
224
249
|
|
|
225
|
-
|
|
250
|
+
**`rlb-tabs` inputs:** `view` ('tab'|'pills'|'underline'|'none'), `vertical`, `fill` ('fill'|'justified'), `horizontal-alignment` ('center'|'end'), `id`, `class`
|
|
251
|
+
**`rlb-tab` inputs:** `target` (**required** — matches a pane `id`), `active`, `disabled`, `class`
|
|
252
|
+
**`rlb-tab-pane` inputs:** `id` (**required**), `active`, `fade`
|
|
253
|
+
|
|
254
|
+
> Switching is driven by Bootstrap's tab plugin — there is **no select/change output**, and
|
|
255
|
+
> `active` only seeds the initial tab. For router-controlled or deep-linked tabs (active state
|
|
256
|
+
> lives in the URL), drive the markup yourself with plain `nav-tabs` instead.
|
|
226
257
|
|
|
227
258
|
---
|
|
228
259
|
|