sean/manja_dev_ui
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Add two theme views

Browse Source
This commit is contained in:
Marcin Michałek
2021-08-06 10:49:53 +02:00
parent 3977cbd88e
commit b0e8088e36
5 changed files with 298 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/_nav.js
+12 -12
View File
@@ -13,18 +13,18 @@ export default [
// _name: 'CNavTitle', // _name: 'CNavTitle',
// name: 'Theme' // name: 'Theme'
// }, // },
// { {
// _name: 'CNavItem', _name: 'CNavItem',
// name: 'Colors', name: 'Colors',
// to: '/theme/colors', to: '/theme/colors',
// icon: 'cil-drop' icon: 'cil-drop'
// }, },
// { {
// _name: 'CNavItem', _name: 'CNavItem',
// name: 'Typography', name: 'Typography',
// to: '/theme/typography', to: '/theme/typography',
// icon: 'cil-pencil' icon: 'cil-pencil'
// }, },
// { // {
// _name: 'CNavTitle', // _name: 'CNavTitle',
// name: 'Components' // name: 'Components'
src/router/index.js
+10
View File
@@ -22,6 +22,16 @@ const routes = [
component: () => component: () =>
import(/* webpackChunkName: "dashboard" */ "@/views/Dashboard.vue"), import(/* webpackChunkName: "dashboard" */ "@/views/Dashboard.vue"),
}, },
{
path: "/theme/colors",
name: "Colors",
component: () => import("@/views/theme/Colors.vue"),
},
{
path: "/theme/typography",
name: "Typography",
component: () => import("@/views/theme/Typography.vue"),
},
{ {
path: "/base", path: "/base",
name: "Base", name: "Base",
src/views/theme/ColorTheme.vue
+21
View File
@@ -0,0 +1,21 @@
<template>
<CCol xl="2" md="4" sm="6" xs="12" class="mb-4">
<div
:class="['theme-color w-75 rounded mb-3', color]"
style="padding-top:75%;"
></div>
<slot></slot>
<ColorView/>
</CCol>
</template>
<script>
//import ColorView from './ColorView'
export default {
name: 'ColorTheme',
// components: { ColorView },
props: {
color: String,
}
}
</script>
src/views/theme/Colors.vue
+33
View File
@@ -0,0 +1,33 @@
<template>
<CRow>
<CCol>
<CCard>
<CCardHeader>
<CIcon name="cil-drop"/> Theme colors
</CCardHeader>
<CCardBody>
<CRow>
<ColorTheme color="bg-primary">
<h6>Brand Primary Color</h6>
</ColorTheme>
<ColorTheme color="bg-secondary"><h6>Brand Secondary Color</h6></ColorTheme>
<ColorTheme color="bg-success"><h6>Brand Success Color</h6></ColorTheme>
<ColorTheme color="bg-danger"><h6>Brand Danger Color</h6></ColorTheme>
<ColorTheme color="bg-warning"><h6>Brand Warning Color</h6></ColorTheme>
<ColorTheme color="bg-info"><h6>Brand Info Color</h6></ColorTheme>
<ColorTheme color="bg-light"><h6>Brand Light Color</h6></ColorTheme>
<ColorTheme color="bg-dark"><h6>Brand Dark Color</h6></ColorTheme>
</CRow>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
import ColorTheme from './ColorTheme'
export default {
name: "Colors",
components: { ColorTheme }
};
</script>
src/views/theme/Typography.vue
+222
View File
@@ -0,0 +1,222 @@
<template>
<CRow>
<CCol>
<CCard>
<CCardHeader>
Headings
</CCardHeader>
<CCardBody>
<p>Documentation and examples for Bootstrap typography,
including global settings, headings, body text, lists, and more.</p>
<CTable>
<CTableHead>
<CTableRow>
<CTableHeaderCell>Heading</CTableHeaderCell>
<CTableHeaderCell>Example</CTableHeaderCell>
</CTableRow>
</CTableHead>
<CTableBody>
<CTableRow>
<CTableDataCell>
<p>
<code class="highlighter-rouge">
&lt;h1&gt;&lt;/h1&gt;
</code>
</p>
</CTableDataCell>
<CTableDataCell><span class="h1">h1. Bootstrap heading</span></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>
<p>
<code class="highlighter-rouge">
&lt;h2&gt;&lt;/h2&gt;
</code>
</p>
</CTableDataCell>
<CTableDataCell><span class="h2">h2. Bootstrap heading</span></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>
<p>
<code class="highlighter-rouge">
&lt;h3&gt;&lt;/h3&gt;
</code>
</p>
</CTableDataCell>
<CTableDataCell><span class="h3">h3. Bootstrap heading</span></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>
<p>
<code class="highlighter-rouge">
&lt;h4&gt;&lt;/h4&gt;
</code>
</p>
</CTableDataCell>
<CTableDataCell><span class="h4">h4. Bootstrap heading</span></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>
<p>
<code class="highlighter-rouge">
&lt;h5&gt;&lt;/h5&gt;
</code>
</p>
</CTableDataCell>
<CTableDataCell><span class="h5">h5. Bootstrap heading</span></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell>
<p>
<code class="highlighter-rouge">
&lt;h6&gt;&lt;/h6&gt;
</code>
</p>
</CTableDataCell>
<CTableDataCell><span class="h6">h6. Bootstrap heading</span></CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
Headings
</CCardHeader>
<CCardBody>
<p>
<code class="highlighter-rouge">.h1</code> through
<code class="highlighter-rouge">.h6</code>
classes are also available, for when you want to match the font
styling of a heading but cannot use the associated HTML element.
</p>
<div class="bd-example">
<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
Display headings
</CCardHeader>
<CCardBody>
<p>
Traditional heading elements are designed to work best in the meat
of your page content. When you need a heading to stand out,
consider using a <strong>display heading</strong>—a larger,
slightly more opinionated heading style.
</p>
<div class="bd-example bd-example-type">
<CTable>
<CTableBody>
<CTableRow>
<CTableDataCell><span class="display-1">Display 1</span></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell><span class="display-2">Display 2</span></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell><span class="display-3">Display 3</span></CTableDataCell>
</CTableRow>
<CTableRow>
<CTableDataCell><span class="display-4">Display 4</span></CTableDataCell>
</CTableRow>
</CTableBody>
</CTable>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
Inline text elements
</CCardHeader>
<CCardBody>
<p>
Traditional heading elements are designed to work best in the meat
of your page content. When you need a heading to stand out,
consider using a <strong>display heading</strong>—a larger,
slightly more opinionated heading style.
</p>
<div class="bd-example">
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>
This line of text is meant to be treated as deleted text.
</del></p>
<p><s>
This line of text is meant to be treated as no longer accurate.
</s></p>
<p><ins>
This line of text is meant to be treated as an addition to the document.
</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>
This line of text is meant to be treated as fine print.
</small></p>
<p><sCTableRowong>This line rendered as bold text.</sCTableRowong></p>
<p><em>This line rendered as italicized text.</em></p>
</div>
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
Description list alignment
</CCardHeader>
<CCardBody>
<p>
Align terms and descriptions horizontally by using our grid system’s
predefined classes (or semantic mixins). For longer terms, you can
optionally add a <code class="highlighter-rouge">.text-truncate</code>
class to truncate the text with an ellipsis.
</p>
<div class="bd-example">
<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">
A description list is perfect for defining terms.
</dd>
<dt class="col-sm-3">Euismod</dt>
<dd class="col-sm-9">
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
<p>Donec id elit non mi porta gravida at eget metus.</p>
</dd>
<dt class="col-sm-3">Malesuada porta</dt>
<dd class="col-sm-9">
Etiam porta sem malesuada magna mollis euismod.
</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">
Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet risus.
</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8">
Aenean posuere, tortor sed cursus feugiat, nunc augue nunc.
</dd>
</dl>
</dd>
</dl>
</div>
</CCardBody>
</CCard>
</CCol>
</CRow>
</template>
<script>
export default {
name: "Typography",
};
</script>