sean/manja_ui_dev
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

refactor: update examples

Browse Source
This commit is contained in:
Łukasz Holeczek
2021-08-29 16:10:33 +02:00
parent 1b7a092079
commit cac84bdcdd
38 changed files with 601 additions and 1422 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/base/Tables.vue
+44 -44
View File
@@ -13,7 +13,7 @@
Using the most basic table CoreUI, here's how
<code>&lt;CTable&gt;</code>-based tables look in CoreUI.
</p>
<Example href="components/table">
<DocsExample href="components/table">
<CTable>
<CTableHead>
<CTableRow>
@@ -43,7 +43,7 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -57,7 +57,7 @@
Use contextual classes to color tables, table rows or individual
cells.
</p>
<Example href="components/table#variants">
<DocsExample href="components/table#variants">
<CTable>
<CTableHead>
<CTableRow>
@@ -114,7 +114,7 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -128,7 +128,7 @@
Use <code>striped</code> property to add zebra-striping to any table
row within the <code>&lt;CTableBody&gt;</code>.
</p>
<Example href="components/table#striped-rows">
<DocsExample href="components/table#striped-rows">
<CTable striped>
<CTableHead>
<CTableRow>
@@ -158,11 +158,11 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
<p class="text-medium-emphasis small">
These classes can also be added to table variants:
</p>
<Example href="components/table#striped-rows">
<DocsExample href="components/table#striped-rows">
<CTable color="dark" striped>
<CTableHead>
<CTableRow>
@@ -192,8 +192,8 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
<Example href="components/table#striped-rows">
</DocsExample>
<DocsExample href="components/table#striped-rows">
<CTable color="success" striped>
<CTableHead>
<CTableRow>
@@ -223,7 +223,7 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -237,7 +237,7 @@
Use <code>hover</code> property to enable a hover state on table
rows within a <code>&lt;CTableBody&gt;</code>.
</p>
<Example href="components/table#hoverable-rows">
<DocsExample href="components/table#hoverable-rows">
<CTable hover>
<CTableHead>
<CTableRow>
@@ -267,8 +267,8 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
<Example href="components/table#hoverable-rows">
</DocsExample>
<DocsExample href="components/table#hoverable-rows">
<CTable color="dark" hover>
<CTableHead>
<CTableRow>
@@ -298,8 +298,8 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
<Example href="components/table#hoverable-rows">
</DocsExample>
<DocsExample href="components/table#hoverable-rows">
<CTable striped hover>
<CTableHead>
<CTableRow>
@@ -329,7 +329,7 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -339,7 +339,7 @@
<strong>Vue Table</strong> <small>Active tables</small>
</CCardHeader>
<CCardBody>
<Example href="components/table#active-tables">
<DocsExample href="components/table#active-tables">
<CTable>
<CTableHead>
<CTableRow>
@@ -371,8 +371,8 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
<Example href="components/table#active-tables">
</DocsExample>
<DocsExample href="components/table#active-tables">
<CTable color="dark">
<CTableHead>
<CTableRow>
@@ -404,7 +404,7 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -418,7 +418,7 @@
Add <code>bordered</code> property for borders on all sides of the
table and cells.
</p>
<Example href="components/table#bordered-tables">
<DocsExample href="components/table#bordered-tables">
<CTable bordered>
<CTableHead>
<CTableRow>
@@ -448,13 +448,13 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
<p class="text-medium-emphasis small">
<a href="https://coreui.io/docs/4.0/utilities/borders#border-color">
Border color utilities </a
> can be added to change colors:
</p>
<Example href="components/table#bordered-tables">
<DocsExample href="components/table#bordered-tables">
<CTable bordered borderColor="primary">
<CTableHead>
<CTableRow>
@@ -484,7 +484,7 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -497,7 +497,7 @@
<p class="text-medium-emphasis small">
Add <code>borderless</code> property for a table without borders.
</p>
<Example href="components/table#tables-without-borders">
<DocsExample href="components/table#tables-without-borders">
<CTable borderless>
<CTableHead>
<CTableRow>
@@ -527,8 +527,8 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
<Example href="components/table#tables-without-borders">
</DocsExample>
<DocsExample href="components/table#tables-without-borders">
<CTable color="dark" borderless>
<CTableHead>
<CTableRow>
@@ -558,7 +558,7 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -573,7 +573,7 @@
<code>&lt;CTable&gt;</code> more compact by cutting all cell
<code>padding</code> in half.
</p>
<Example href="components/table#small-tables">
<DocsExample href="components/table#small-tables">
<CTable small>
<CTableHead>
<CTableRow>
@@ -603,7 +603,7 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -620,7 +620,7 @@
<code>&lt;CTable&gt;</code> and are aligned to the the top by
default. Use the align property to re-align where needed.
</p>
<Example href="components/table#vertical-alignment">
<DocsExample href="components/table#vertical-alignment">
<CTable align="middle" responsive>
<CTableHead>
<CTableRow>
@@ -697,7 +697,7 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -711,7 +711,7 @@
Border styles, active styles, and table variants are not inherited
by nested tables.
</p>
<Example href="components/table#nesting">
<DocsExample href="components/table#nesting">
<CTable striped>
<CTableHead>
<CTableRow>
@@ -771,7 +771,7 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -787,7 +787,7 @@
<code>color=&#34;dark&#34;</code> to make
<code>&lt;CTableHead&gt;</code>s appear light or dark gray.
</p>
<Example href="components/table#table-head">
<DocsExample href="components/table#table-head">
<CTable>
<CTableHead color="light">
<CTableRow>
@@ -818,8 +818,8 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
<Example href="components/table#table-head">
</DocsExample>
<DocsExample href="components/table#table-head">
<CTable>
<CTableHead color="dark">
<CTableRow>
@@ -849,7 +849,7 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -859,7 +859,7 @@
<strong>Vue Table</strong> <small>Table foot</small>
</CCardHeader>
<CCardBody>
<Example href="components/table#table-foot">
<DocsExample href="components/table#table-foot">
<CTable>
<CTableHead color="light">
<CTableRow>
@@ -897,7 +897,7 @@
</CTableRow>
</CTableHead>
</CTable>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -912,7 +912,7 @@
table. It helps users with screen readers to find a table and
understand what it&#39;s about and decide if they want to read it.
</p>
<Example href="components/table#captions">
<DocsExample href="components/table#captions">
<CTable>
<CTableCaption>List of users</CTableCaption>
<CTableHead>
@@ -944,12 +944,12 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
<p class="text-medium-emphasis small">
You can also put the <code>&lt;CTableCaption&gt;</code> on the top
of the table with <code>caption=&#34;top&#34;</code>.
</p>
<Example href="components/table#captions">
<DocsExample href="components/table#captions">
<CTable caption="top">
<CTableCaption>List of users</CTableCaption>
<CTableHead>
@@ -981,7 +981,7 @@
</CTableRow>
</CTableBody>
</CTable>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>