sean/manja_ui_dev
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-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/buttons/Buttons.vue
+30 -30
View File
@@ -16,7 +16,7 @@
to initialize operations, both in the background or foreground of an
experience.
</p>
<Example href="components/buttons">
<DocsExample href="components/buttons">
<template
v-for="state in ['normal', 'active', 'disabled']"
:key="state"
@@ -50,7 +50,7 @@
</CCol>
</CRow>
</template>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -64,7 +64,7 @@
You can combine button with our
<a href="https://icons.coreui.io/">CoreUI Icons</a>.
</p>
<Example href="components/buttons">
<DocsExample href="components/buttons">
<template
v-for="state in ['normal', 'active', 'disabled']"
:key="state"
@@ -100,7 +100,7 @@
</CCol>
</CRow>
</template>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -124,7 +124,7 @@
<code>role=&#34;button&#34;</code> to adequately communicate their
meaning to assistive technologies such as screen readers.
</p>
<Example href="components/buttons#button-components">
<DocsExample href="components/buttons#button-components">
<CButton component="a" color="primary" href="#" role="button">
Link
</CButton>
@@ -147,7 +147,7 @@
color="primary"
value="Reset"
/>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -162,7 +162,7 @@
<code>variant=&#34;outline&#34;</code> prop to remove all background
colors.
</p>
<Example href="components/buttons#outline-buttons">
<DocsExample href="components/buttons#outline-buttons">
<template
v-for="state in ['normal', 'active', 'disabled']"
:key="state"
@@ -198,7 +198,7 @@
</CCol>
</CRow>
</template>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -213,7 +213,7 @@
<code>variant=&#34;ghost&#34;</code> prop to remove all background
colors.
</p>
<Example href="components/buttons#ghost-buttons">
<DocsExample href="components/buttons#ghost-buttons">
<template
v-for="state in ['normal', 'active', 'disabled']"
:key="state"
@@ -249,7 +249,7 @@
</CCol>
</CRow>
</template>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -263,14 +263,14 @@
Larger or smaller buttons? Add <code>size=&#34;lg&#34;</code> or
<code>size=&#34;sm&#34;</code> for additional sizes.
</p>
<Example href="components/buttons#sizes">
<DocsExample href="components/buttons#sizes">
<CButton color="primary" size="lg"> Large button </CButton>
<CButton color="secondary" size="lg"> Large button </CButton>
</Example>
<Example href="components/buttons#sizes">
</DocsExample>
<DocsExample href="components/buttons#sizes">
<CButton color="primary" size="sm"> Small button </CButton>
<CButton color="secondary" size="sm"> Small button </CButton>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -280,7 +280,7 @@
<strong>Vue Button</strong> <small>Pill</small>
</CCardHeader>
<CCardBody>
<Example href="components/buttons#pill-buttons">
<DocsExample href="components/buttons#pill-buttons">
<template
v-for="color in [
'primary',
@@ -303,7 +303,7 @@
{{ color.charAt(0).toUpperCase() + color.slice(1) }}
</CButton>
</template>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -313,7 +313,7 @@
<strong>Vue Button</strong> <small>Square</small>
</CCardHeader>
<CCardBody>
<Example href="components/buttons#square">
<DocsExample href="components/buttons#square">
<template
v-for="color in [
'primary',
@@ -336,7 +336,7 @@
{{ color.charAt(0).toUpperCase() + color.slice(1) }}
</CButton>
</template>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -353,12 +353,12 @@
<code>pointer-events: none</code> applied to, disabling hover and
active states from triggering.
</p>
<Example href="components/buttons#disabled-state">
<DocsExample href="components/buttons#disabled-state">
<CButton color="primary" size="lg" disabled>
Primary button
</CButton>
<CButton color="secondary" size="lg" disabled> Button </CButton>
</Example>
</DocsExample>
<p class="text-medium-emphasis small">
Disabled buttons using the <code>&lt;a&gt;</code> component act a
little different:
@@ -371,7 +371,7 @@
<code>aria-disabled=&#34;true&#34;</code> attribute to show the
state of the component to assistive technologies.
</p>
<Example href="components/buttons#disabled-state">
<DocsExample href="components/buttons#disabled-state">
<CButton component="a" href="#" color="primary" size="lg" disabled>
Primary link
</CButton>
@@ -384,7 +384,7 @@
>
Link
</CButton>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>
@@ -398,12 +398,12 @@
Create buttons that span the full width of a parent—by using
utilities.
</p>
<Example href="components/buttons#block-buttons">
<DocsExample href="components/buttons#block-buttons">
<div class="d-grid gap-2">
<CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton>
</div>
</Example>
</DocsExample>
<p class="text-medium-emphasis small">
Here we create a responsive variation, starting with vertically
stacked buttons until the <code>md</code> breakpoint, where
@@ -411,24 +411,24 @@
thus nullifying the <code>gap-2</code> utility. Resize your browser
to see them change.
</p>
<Example href="components/buttons#block-buttons">
<DocsExample href="components/buttons#block-buttons">
<div class="d-grid gap-2 d-md-block">
<CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton>
</div>
</Example>
</DocsExample>
<p class="text-medium-emphasis small">
You can adjust the width of your block buttons with grid column
width classes. For example, for a half-width &#34;block button&#34;,
use <code>.col-6</code>. Center it horizontally with
<code>.mx-auto</code>, too.
</p>
<Example href="components/buttons#block-buttons">
<DocsExample href="components/buttons#block-buttons">
<div class="d-grid gap-2 col-6 mx-auto">
<CButton color="primary">Button</CButton>
<CButton color="primary">Button</CButton>
</div>
</Example>
</DocsExample>
<p class="text-medium-emphasis small">
Additional utilities can be used to adjust the alignment of buttons
when horizontal. Here we&#39;ve taken our previous responsive
@@ -436,12 +436,12 @@
button to right align the buttons when they&#39;re no longer
stacked.
</p>
<Example href="components/buttons#block-buttons">
<DocsExample href="components/buttons#block-buttons">
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<CButton color="primary" class="me-md-2"> Button </CButton>
<CButton color="primary">Button</CButton>
</div>
</Example>
</DocsExample>
</CCardBody>
</CCard>
</CCol>