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

refactor: update examples

Browse Source
This commit is contained in:
Łukasz Holeczek
2021-08-27 00:06:00 +02:00
parent c7f687982d
commit e086d28946
19 changed files with 3459 additions and 1800 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/notifications/Alerts.vue
+145 -68
View File
@@ -1,69 +1,146 @@
<template>
<CRow>
<CCol>
<CCard>
<CCol :xs="12">
<DocsCallout name="Alert" href="components/alert" />
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Alerts</strong>
<strong>Vue Alert</strong>
</CCardHeader>
<CCardBody>
<h4 class="mt-4">Alerts examples</h4>
<Example href="components/alert.html#examples">
<CAlert color="primary">A simple primary alert—check it out!</CAlert>
<CAlert color="secondary">A simple secondary alert—check it out!</CAlert>
<CAlert color="success">A simple success alert—check it out!</CAlert>
<CAlert color="danger">A simple danger alert—check it out!</CAlert>
<CAlert color="warning">A simple warning alert—check it out!</CAlert>
<CAlert color="info">A simple info alert—check it out!</CAlert>
<CAlert color="light">A simple light alert—check it out!</CAlert>
<CAlert color="dark">A simple dark alert—check it out!</CAlert>
</Example>
<h4 class="mt-4">Link color</h4>
<Example href="components/alert.html#link-color">
<CAlert color="primary">
A simple primary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
</CAlert>
<CAlert color="secondary">
A simple secondary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
</CAlert>
<CAlert color="success">
A simple success alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
</CAlert>
<CAlert color="danger">
A simple danger alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
</CAlert>
<CAlert color="warning">
A simple warning alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
</CAlert>
<CAlert color="info">
A simple info alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
</CAlert>
<CAlert color="light">
A simple light alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
</CAlert>
<CAlert color="dark">
A simple dark alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
</CAlert>
</Example>
<h4 class="mt-4">Additional content</h4>
<Example href="components/alert.html#additional-content">
<CAlert color="success" v-bind:visible="true">
<CAlertHeading>Well done!</CAlertHeading>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
<hr />
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</CAlert>
</Example>
<h4 class="mt-4">Dismissing</h4>
<Example href="components/alert.html#dismissing">
<CAlert color="warning" dismissible @dismiss="alert">
<strong>Go right ahead</strong> and click that dimiss over there on the right.
</CAlert>
</Example>
<p class="text-medium-emphasis small">
Vue Alert is prepared for any length of text, as well as an
optional close button. For a styling, use one of the
<strong>required</strong> contextual <code>color</code> props
(e.g., <code>primary</code>). For inline dismissal, use the
<a
href="https://coreui.io/react/docs/4.0/components/alert#dismissing"
>
dismissing prop
</a>
.
</p>
<Example href="components/alert">
<CAlert color="primary"
>A simple primary alert—check it out!</CAlert
>
<CAlert color="secondary"
>A simple secondary alert—check it out!</CAlert
>
<CAlert color="success"
>A simple success alert—check it out!</CAlert
>
<CAlert color="danger">A simple danger alert—check it out!</CAlert>
<CAlert color="warning"
>A simple warning alert—check it out!</CAlert
>
<CAlert color="info">A simple info alert—check it out!</CAlert>
<CAlert color="light">A simple light alert—check it out!</CAlert>
<CAlert color="dark">A simple dark alert—check it out!</CAlert>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Alert</strong> <small>Link color</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Use the <code>&lt;CAlertLink&gt;</code> component to immediately
give matching colored links inside any alert.
</p>
<Example href="components/alert#link-color">
<CAlert color="primary">
A simple primary alert with
<CAlertLink href="#">an example link</CAlertLink>. Give it a click
if you like.
</CAlert>
<CAlert color="secondary">
A simple secondary alert with
<CAlertLink href="#">an example link</CAlertLink>. Give it a click
if you like.
</CAlert>
<CAlert color="success">
A simple success alert with
<CAlertLink href="#">an example link</CAlertLink>. Give it a click
if you like.
</CAlert>
<CAlert color="danger">
A simple danger alert with
<CAlertLink href="#">an example link</CAlertLink>. Give it a click
if you like.
</CAlert>
<CAlert color="warning">
A simple warning alert with
<CAlertLink href="#">an example link</CAlertLink>. Give it a click
if you like.
</CAlert>
<CAlert color="info">
A simple info alert with
<CAlertLink href="#">an example link</CAlertLink>. Give it a click
if you like.
</CAlert>
<CAlert color="light">
A simple light alert with
<CAlertLink href="#">an example link</CAlertLink>. Give it a click
if you like.
</CAlert>
<CAlert color="dark">
A simple dark alert with
<CAlertLink href="#">an example link</CAlertLink>. Give it a click
if you like.
</CAlert>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Alert</strong> <small>Additional content</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Alert can also incorporate supplementary components &amp; elements
like heading, paragraph, and divider.
</p>
<Example href="components/alert#additional-content">
<CAlert color="success">
<CAlertHeading tag="h4">Well done!</CAlertHeading>
<p>
Aww yeah, you successfully read this important alert message.
This example text is going to run a bit longer so that you can
see how spacing within an alert works with this kind of content.
</p>
<hr />
<p class="mb-0">
Whenever you need to, be sure to use margin utilities to keep
things nice and tidy.
</p>
</CAlert>
</Example>
</CCardBody>
</CCard>
</CCol>
<CCol :xs="12">
<CCard class="mb-4">
<CCardHeader>
<strong>Vue Alert</strong> <small>Dismissing</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
Alerts can also be easily dismissed. Just add the
<code>dismissible</code> prop.
</p>
<Example href="components/alert#dismissing">
<CAlert color="warning" dismissible @dismiss="alert">
<strong>Go right ahead</strong> and click that dimiss over there
on the right.
</CAlert>
</Example>
</CCardBody>
</CCard>
</CCol>
@@ -72,11 +149,11 @@
<script>
export default {
name: "Alerts",
methods: {
alert: function(){
alert("👋 Well, hi there! Thanks for dismissing me.")
},
}
name: "Alerts",
methods: {
alert: function () {
alert("👋 Well, hi there! Thanks for dismissing me.");
},
},
};
</script>
</script>