docs: update links to documentation
This commit is contained in:
Łukasz Holeczek
@@ -9,7 +9,7 @@
|
||||
<p class="text-medium-emphasis small">
|
||||
Click the accordions below to expand/collapse the accordion content.
|
||||
</p>
|
||||
<DocsExample href="components/accordion">
|
||||
<DocsExample href="components/accordion.html">
|
||||
<CAccordion>
|
||||
<CAccordionItem :item-key="1">
|
||||
<CAccordionHeader> Accordion Item #1 </CAccordionHeader>
|
||||
@@ -68,7 +68,7 @@
|
||||
corners to render accordions edge-to-edge with their parent
|
||||
container.
|
||||
</p>
|
||||
<DocsExample href="components/accordion#flush">
|
||||
<DocsExample href="components/accordion.html#flush">
|
||||
<CAccordion flush>
|
||||
<CAccordionItem>
|
||||
<CAccordionHeader> Accordion Item #1 </CAccordionHeader>
|
||||
@@ -125,7 +125,7 @@
|
||||
Add <code>always-open</code> property to make accordion items stay
|
||||
open when another item is opened.
|
||||
</p>
|
||||
<DocsExample href="components/accordion#always-open">
|
||||
<DocsExample href="components/accordion.html#always-open">
|
||||
<CAccordion :active-item-key="2" always-open>
|
||||
<CAccordionItem :item-key="1">
|
||||
<CAccordionHeader> Accordion Item #1 </CAccordionHeader>
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
<DocsExample href="components/breadcrumb">
|
||||
<DocsExample href="components/breadcrumb.html">
|
||||
<CBreadcrumb>
|
||||
<CBreadcrumbItem>
|
||||
<CLink href="#">Home</CLink>
|
||||
|
||||
+24
-24
@@ -23,7 +23,7 @@
|
||||
width. Cards have no fixed width to start, so they'll naturally
|
||||
fill the full width of its parent element.
|
||||
</p>
|
||||
<DocsExample href="components/card">
|
||||
<DocsExample href="components/card.html">
|
||||
<CCard style="width: 18rem">
|
||||
<CCardImage orientation="top" :src="VueImg" />
|
||||
<CCardBody>
|
||||
@@ -47,7 +47,7 @@
|
||||
The main block of a card is the <code><CCardBody></code>. Use
|
||||
it whenever you need a padded section within a card.
|
||||
</p>
|
||||
<DocsExample href="components/card/#body">
|
||||
<DocsExample href="components/card.html/#body">
|
||||
<CCard>
|
||||
<CCardBody>This is some text within a card body.</CCardBody>
|
||||
</CCard>
|
||||
@@ -76,7 +76,7 @@
|
||||
<code><CCardBody></code> item, the card title, and subtitle
|
||||
are arranged rightly.
|
||||
</p>
|
||||
<DocsExample href="components/card/#titles-text-and-links">
|
||||
<DocsExample href="components/card.html/#titles-text-and-links">
|
||||
<CCard style="width: 18rem">
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
@@ -105,7 +105,7 @@
|
||||
within <code>.card-text</code> can additionally be styled with the
|
||||
regular HTML tags.
|
||||
</p>
|
||||
<DocsExample href="components/card/#images">
|
||||
<DocsExample href="components/card.html/#images">
|
||||
<CCard style="width: 18rem">
|
||||
<CCardImage orientation="top" :src="VueImg" />
|
||||
<CCardBody>
|
||||
@@ -128,7 +128,7 @@
|
||||
<p class="text-medium-emphasis small">
|
||||
Create lists of content in a card with a flush list group.
|
||||
</p>
|
||||
<DocsExample href="components/card/#list-groups">
|
||||
<DocsExample href="components/card.html/#list-groups">
|
||||
<CRow>
|
||||
<CCol :lg="4">
|
||||
<CCard>
|
||||
@@ -175,7 +175,7 @@
|
||||
throw everything in there. Shown below are image styles, blocks,
|
||||
text styles, and a list group—all wrapped in a fixed-width card.
|
||||
</p>
|
||||
<DocsExample href="components/card/#kitchen-sink">
|
||||
<DocsExample href="components/card.html/#kitchen-sink">
|
||||
<CCard style="width: 18rem">
|
||||
<CCardImage orientation="top" :src="VueImg" />
|
||||
<CCardBody>
|
||||
@@ -208,7 +208,7 @@
|
||||
<p class="text-medium-emphasis small">
|
||||
Add an optional header and/or footer within a card.
|
||||
</p>
|
||||
<DocsExample href="components/card/#header-and-footer">
|
||||
<DocsExample href="components/card.html/#header-and-footer">
|
||||
<CCard>
|
||||
<CCardHeader>Header</CCardHeader>
|
||||
<CCardBody>
|
||||
@@ -225,7 +225,7 @@
|
||||
Card headers can be styled by adding ex.
|
||||
<code>component="h5"</code>.
|
||||
</p>
|
||||
<DocsExample href="components/card/#header-and-footer">
|
||||
<DocsExample href="components/card.html/#header-and-footer">
|
||||
<CCard>
|
||||
<CCardHeader component="h5">Header</CCardHeader>
|
||||
<CCardBody>
|
||||
@@ -238,7 +238,7 @@
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</DocsExample>
|
||||
<DocsExample href="components/card/#header-and-footer">
|
||||
<DocsExample href="components/card.html/#header-and-footer">
|
||||
<CCard>
|
||||
<CCardHeader>Quote</CCardHeader>
|
||||
<CCardBody>
|
||||
@@ -255,7 +255,7 @@
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</DocsExample>
|
||||
<DocsExample href="components/card/#header-and-footer">
|
||||
<DocsExample href="components/card.html/#header-and-footer">
|
||||
<CCard class="text-center">
|
||||
<CCardHeader>Header</CCardHeader>
|
||||
<CCardBody>
|
||||
@@ -286,7 +286,7 @@
|
||||
<p class="text-medium-emphasis small">
|
||||
Using the grid, wrap cards in columns and rows as needed.
|
||||
</p>
|
||||
<DocsExample href="components/card/#sizing">
|
||||
<DocsExample href="components/card.html/#sizing">
|
||||
<CRow>
|
||||
<CCol :sm="6">
|
||||
<CCard>
|
||||
@@ -322,7 +322,7 @@
|
||||
>
|
||||
to rapidly set a card's width.
|
||||
</p>
|
||||
<DocsExample href="components/card/#sizing">
|
||||
<DocsExample href="components/card.html/#sizing">
|
||||
<CCard class="w-75">
|
||||
<CCardBody>
|
||||
<CCardTitle>Card title</CCardTitle>
|
||||
@@ -349,7 +349,7 @@
|
||||
Use custom CSS in your stylesheets or as inline styles to set a
|
||||
width.
|
||||
</p>
|
||||
<DocsExample href="components/card/#sizing">
|
||||
<DocsExample href="components/card.html/#sizing">
|
||||
<CCard style="width: 18rem">
|
||||
<CCardBody>
|
||||
<CCardTitle>Special title treatment</CCardTitle>
|
||||
@@ -378,7 +378,7 @@
|
||||
>
|
||||
.
|
||||
</p>
|
||||
<DocsExample href="components/card/#text-alignment">
|
||||
<DocsExample href="components/card.html/#text-alignment">
|
||||
<CCard style="width: 18rem">
|
||||
<CCardBody>
|
||||
<CCardTitle>Special title treatment</CCardTitle>
|
||||
@@ -423,7 +423,7 @@
|
||||
Add some navigation to a <code><CCardHeader></code> with our
|
||||
<code><CNav></code> component.
|
||||
</p>
|
||||
<DocsExample href="components/card/##navigation">
|
||||
<DocsExample href="components/card.html/##navigation">
|
||||
<CCard class="text-center">
|
||||
<CCardHeader>
|
||||
<CNav variant="tabs" class="card-header-tabs">
|
||||
@@ -448,7 +448,7 @@
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</DocsExample>
|
||||
<DocsExample href="components/card/##navigation">
|
||||
<DocsExample href="components/card.html/##navigation">
|
||||
<CCard class="text-center">
|
||||
<CCardHeader>
|
||||
<CNav variant="pills" class="card-header-pills">
|
||||
@@ -486,7 +486,7 @@
|
||||
Similar to headers and footers, cards can include top and bottom
|
||||
"image caps"—images at the top or bottom of a card.
|
||||
</p>
|
||||
<DocsExample href="components/card/#image-caps">
|
||||
<DocsExample href="components/card.html/#image-caps">
|
||||
<CRow>
|
||||
<CCol :lg="6">
|
||||
<CCard class="mb-3">
|
||||
@@ -543,7 +543,7 @@
|
||||
<p class="text-medium-emphasis small">
|
||||
Use <code>color</code> property to change the appearance of a card.
|
||||
</p>
|
||||
<DocsExample href="components/card/#background-and-color">
|
||||
<DocsExample href="components/card.html/#background-and-color">
|
||||
<CRow>
|
||||
<template
|
||||
v-for="item in [
|
||||
@@ -594,7 +594,7 @@
|
||||
<code><CCard></code> or a subset of the card's contents as
|
||||
shown below.
|
||||
</p>
|
||||
<DocsExample href="components/card/#border">
|
||||
<DocsExample href="components/card.html/#border">
|
||||
<template
|
||||
v-for="item in [
|
||||
{ color: 'primary', textColor: 'primary' },
|
||||
@@ -636,7 +636,7 @@
|
||||
<code><CCard></code> or a subset of the card's contents as
|
||||
shown below.
|
||||
</p>
|
||||
<DocsExample href="components/card/#top-border">
|
||||
<DocsExample href="components/card.html/#top-border">
|
||||
<template
|
||||
v-for="item in [
|
||||
{ color: 'primary', textColor: 'primary' },
|
||||
@@ -682,7 +682,7 @@
|
||||
use <code>display: flex;</code> to become attached with uniform
|
||||
dimensions starting at the <code>sm</code> breakpoint.
|
||||
</p>
|
||||
<DocsExample href="components/card/#card-groups">
|
||||
<DocsExample href="components/card.html/#card-groups">
|
||||
<CCardGroup>
|
||||
<CCard>
|
||||
<CCardImage orientation="top" :src="VueImg" />
|
||||
@@ -737,7 +737,7 @@
|
||||
When using card groups with footers, their content will
|
||||
automatically line up.
|
||||
</p>
|
||||
<DocsExample href="components/card/#card-groups">
|
||||
<DocsExample href="components/card.html/#card-groups">
|
||||
<CCardGroup>
|
||||
<CCard>
|
||||
<CCardImage orientation="top" :src="VueImg" />
|
||||
@@ -807,7 +807,7 @@
|
||||
cards to equal width across multiple rows, from the medium
|
||||
breakpoint up.
|
||||
</p>
|
||||
<DocsExample href="components/card/#grid-cards">
|
||||
<DocsExample href="components/card.html/#grid-cards">
|
||||
<CRow :xs="{ cols: 1, gutter: 4 }" :md="{ cols: 2 }">
|
||||
<CCol xs>
|
||||
<CCard>
|
||||
@@ -887,7 +887,7 @@
|
||||
Change it to <code>md="{ cols: 3}"</code> and you'll
|
||||
see the fourth card wrap.
|
||||
</p>
|
||||
<DocsExample href="components/card/#grid-cards">
|
||||
<DocsExample href="components/card.html/#grid-cards">
|
||||
<CRow :xs="{ cols: 1, gutter: 4 }" :md="{ cols: 3 }">
|
||||
<CCol xs>
|
||||
<CCard>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
it with placeholders applied to create a "loading card". Size and
|
||||
proportions are the same between the two.
|
||||
</p>
|
||||
<DocsExample href="components/placeholder">
|
||||
<DocsExample href="components/placeholder.html">
|
||||
<div class="d-flex justify-content-around">
|
||||
<CCard style="width: 18rem">
|
||||
<CCardImage orientation="top" :src="VueImg" />
|
||||
@@ -75,7 +75,7 @@
|
||||
replace the text inside an element or be added as a modifier class
|
||||
to an existing component.
|
||||
</p>
|
||||
<DocsExample href="components/placeholder">
|
||||
<DocsExample href="components/placeholder.html">
|
||||
<p aria-hidden="true">
|
||||
<CPlaceholder :xs="6" />
|
||||
</p>
|
||||
@@ -99,7 +99,7 @@
|
||||
You can change the <code>width</code> through grid column classes,
|
||||
width utilities, or inline styles.
|
||||
</p>
|
||||
<DocsExample href="components/placeholder#width">
|
||||
<DocsExample href="components/placeholder.html#width">
|
||||
<CPlaceholder :xs="6" />
|
||||
<CPlaceholder class="w-75" />
|
||||
<CPlaceholder style="width: 30%" />
|
||||
@@ -116,7 +116,7 @@
|
||||
<code>currentColor</code>. This can be overridden with a custom
|
||||
color or utility class.
|
||||
</p>
|
||||
<DocsExample href="components/placeholder#color">
|
||||
<DocsExample href="components/placeholder.html#color">
|
||||
<CPlaceholder :xs="12" />
|
||||
|
||||
<CPlaceholder color="primary" :xs="12" />
|
||||
@@ -141,7 +141,7 @@
|
||||
<code>size</code> prop: <code>lg</code>, <code>sm</code>, or
|
||||
<code>xs</code>.
|
||||
</p>
|
||||
<DocsExample href="components/placeholder#color">
|
||||
<DocsExample href="components/placeholder.html#color">
|
||||
<CPlaceholder :xs="12" size="lg" />
|
||||
<CPlaceholder :xs="12" />
|
||||
<CPlaceholder :xs="12" size="sm" />
|
||||
@@ -159,7 +159,7 @@
|
||||
<code>animation="wave"</code> to better convey the perception of
|
||||
something being <em>actively</em> loaded.
|
||||
</p>
|
||||
<DocsExample href="components/placeholder#animation">
|
||||
<DocsExample href="components/placeholder.html#animation">
|
||||
<CPlaceholder component="p" animation="glow">
|
||||
<CPlaceholder :xs="12" />
|
||||
</CPlaceholder>
|
||||
|
||||
Reference in New Issue
Block a user