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

feat: Initial commit of v3-alpha

Browse Source
This commit is contained in:
woothu
2019-02-06 10:57:52 +01:00
parent 74b325afc5
commit da02129f01
22 changed files with 1020 additions and 685 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/base/ListGroups.vue
+93 -82
View File
@@ -1,6 +1,18 @@
<template>
<div class="wrapper">
<div class="animated fadeIn">
<!-- <b-row>
<b-col>
<b-card>
<CMedia asideClasses="m-5 align-self-end" asideRight>
<img slot="aside" src="img/avatars/6.jpg">
<div class="text-center">
ehhehefgofdjdjfd<br><br><br><br><br><br><br><br><br><br><br><br>dfs
</div>
</CMedia>
</b-card>
</b-col>
</b-row> -->
<b-row>
<b-col md="6">
<b-card
@@ -14,13 +26,13 @@
</a>
</div>
</div>
<b-list-group>
<b-list-group-item>Cras justo odio</b-list-group-item>
<b-list-group-item>Dapibus ac facilisis in</b-list-group-item>
<b-list-group-item>Morbi leo risus</b-list-group-item>
<b-list-group-item>Porta ac consectetur ac</b-list-group-item>
<b-list-group-item>Vestibulum at eros</b-list-group-item>
</b-list-group>
<CListGroup>
<CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem>Morbi leo risus</CListGroupItem>
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</b-card>
</b-col>
<b-col md="6">
@@ -30,13 +42,13 @@
<div slot="header">
<i class="fa fa-align-justify"></i><strong> List group </strong><small>active items</small>
</div>
<b-list-group>
<b-list-group-item>Cras justo odio</b-list-group-item>
<b-list-group-item active>Dapibus ac facilisis in</b-list-group-item>
<b-list-group-item>Morbi leo risus</b-list-group-item>
<b-list-group-item>Porta ac consectetur ac</b-list-group-item>
<b-list-group-item>Vestibulum at eros</b-list-group-item>
</b-list-group>
<CListGroup>
<CListGroupItem>Cras justo odio</CListGroupItem>
<CListGroupItem active>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem>Morbi leo risus</CListGroupItem>
<CListGroupItem>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</b-card>
</b-col>
</b-row>
@@ -48,13 +60,13 @@
<div slot="header">
<i class="fa fa-align-justify"></i><strong> List group </strong><small>disabled items</small>
</div>
<b-list-group>
<b-list-group-item disabled>Cras justo odio</b-list-group-item>
<b-list-group-item>Dapibus ac facilisis in</b-list-group-item>
<b-list-group-item>Morbi leo risus</b-list-group-item>
<b-list-group-item disabled>Porta ac consectetur ac</b-list-group-item>
<b-list-group-item>Vestibulum at eros</b-list-group-item>
</b-list-group>
<CListGroup>
<CListGroupItem disabled>Cras justo odio</CListGroupItem>
<CListGroupItem>Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem>Morbi leo risus</CListGroupItem>
<CListGroupItem disabled>Porta ac consectetur ac</CListGroupItem>
<CListGroupItem>Vestibulum at eros</CListGroupItem>
</CListGroup>
</b-card>
</b-col>
<b-col md="6">
@@ -64,12 +76,12 @@
<div slot="header">
<i class="fa fa-align-justify"></i><strong> List group </strong><small>actionable items</small>
</div>
<b-list-group>
<b-list-group-item href="#some-link">Awesome link</b-list-group-item>
<b-list-group-item href="#" active>Link with active state</b-list-group-item>
<b-list-group-item href="#">Action links are easy</b-list-group-item>
<b-list-group-item href="#foobar" disabled>Disabled link</b-list-group-item>
</b-list-group>
<CListGroup>
<CListGroupItem href="#some-link">Awesome link</CListGroupItem>
<CListGroupItem href="#" active>Link with active state</CListGroupItem>
<CListGroupItem href="#">Action links are easy</CListGroupItem>
<CListGroupItem href="#foobar" disabled>Disabled link</CListGroupItem>
</CListGroup>
</b-card>
</b-col>
</b-row>
@@ -81,12 +93,12 @@
<div slot="header">
<i class="fa fa-align-justify"></i><strong> List group </strong><small>buttons</small>
</div>
<b-list-group>
<b-list-group-item button>Button item</b-list-group-item>
<b-list-group-item button>I am a button</b-list-group-item>
<b-list-group-item button disabled>Disabled button</b-list-group-item>
<b-list-group-item button>This is a button too</b-list-group-item>
</b-list-group>
<CListGroup>
<CListGroupItem tag="button">Button item</CListGroupItem>
<CListGroupItem tag="button">I am a button</CListGroupItem>
<CListGroupItem tag="button" disabled>Disabled button</CListGroupItem>
<CListGroupItem tag="button">This is a button too</CListGroupItem>
</CListGroup>
</b-card>
</b-col>
<b-col md="6">
@@ -96,20 +108,20 @@
<div slot="header">
<i class="fa fa-align-justify"></i><strong> List group </strong><small>with badges</small>
</div>
<b-list-group>
<b-list-group-item class="d-flex justify-content-between align-items-center">
<CListGroup>
<CListGroupItem class="d-flex justify-content-between align-items-center">
Cras justo odio
<b-badge variant="primary" pill>14</b-badge>
</b-list-group-item>
<b-list-group-item class="d-flex justify-content-between align-items-center">
</CListGroupItem>
<CListGroupItem class="d-flex justify-content-between align-items-center">
Dapibus ac facilisis in
<b-badge variant="primary" pill>2</b-badge>
</b-list-group-item>
<b-list-group-item class="d-flex justify-content-between align-items-center">
</CListGroupItem>
<CListGroupItem class="d-flex justify-content-between align-items-center">
Morbi leo risus
<b-badge variant="primary" pill>1</b-badge>
</b-list-group-item>
</b-list-group>
</CListGroupItem>
</CListGroup>
</b-card>
</b-col>
</b-row>
@@ -121,17 +133,17 @@
<div slot="header">
<i class="fa fa-align-justify"></i><strong> List group </strong><small>variants</small>
</div>
<b-list-group>
<b-list-group-item>This is a default list group item</b-list-group-item>
<b-list-group-item variant="primary">This is a primary list group item</b-list-group-item>
<b-list-group-item variant="secondary">This is a secondary list group item</b-list-group-item>
<b-list-group-item variant="success">This is a success list group item</b-list-group-item>
<b-list-group-item variant="danger">This is a danger list group item</b-list-group-item>
<b-list-group-item variant="warning">This is a warning list group item</b-list-group-item>
<b-list-group-item variant="info">This is a info list group item</b-list-group-item>
<b-list-group-item variant="light">This is a light list group item</b-list-group-item>
<b-list-group-item variant="dark">This is a dark list group item</b-list-group-item>
</b-list-group>
<CListGroup>
<CListGroupItem>This is a default list group item</CListGroupItem>
<CListGroupItem variant="primary">This is a primary list group item</CListGroupItem>
<CListGroupItem variant="secondary">This is a secondary list group item</CListGroupItem>
<CListGroupItem variant="success">This is a success list group item</CListGroupItem>
<CListGroupItem variant="danger">This is a danger list group item</CListGroupItem>
<CListGroupItem variant="warning">This is a warning list group item</CListGroupItem>
<CListGroupItem variant="info">This is a info list group item</CListGroupItem>
<CListGroupItem variant="light">This is a light list group item</CListGroupItem>
<CListGroupItem variant="dark">This is a dark list group item</CListGroupItem>
</CListGroup>
</b-card>
</b-col>
<b-col md="6">
@@ -141,17 +153,17 @@
<div slot="header">
<i class="fa fa-align-justify"></i><strong> List group </strong><small>variants active</small>
</div>
<b-list-group>
<b-list-group-item href="#">This is a default list group item</b-list-group-item>
<b-list-group-item href="#" variant="primary">This is a primary list group item</b-list-group-item>
<b-list-group-item href="#" variant="secondary">This is a secondary list group item</b-list-group-item>
<b-list-group-item href="#" variant="success">This is a success list group item</b-list-group-item>
<b-list-group-item href="#" variant="danger">This is a danger list group item</b-list-group-item>
<b-list-group-item href="#" variant="warning">This is a warning list group item</b-list-group-item>
<b-list-group-item href="#" variant="info">This is a info list group item</b-list-group-item>
<b-list-group-item href="#" variant="light">This is a light list group item</b-list-group-item>
<b-list-group-item href="#" variant="dark">This is a dark list group item</b-list-group-item>
</b-list-group>
<CListGroup>
<CListGroupItem href="#">This is a default list group item</CListGroupItem>
<CListGroupItem href="#" variant="primary">This is a primary list group item</CListGroupItem>
<CListGroupItem href="#" variant="secondary">This is a secondary list group item</CListGroupItem>
<CListGroupItem href="#" variant="success">This is a success list group item</CListGroupItem>
<CListGroupItem href="#" variant="danger">This is a danger list group item</CListGroupItem>
<CListGroupItem href="#" variant="warning">This is a warning list group item</CListGroupItem>
<CListGroupItem href="#" variant="info">This is a info list group item</CListGroupItem>
<CListGroupItem href="#" variant="light">This is a light list group item</CListGroupItem>
<CListGroupItem href="#" variant="dark">This is a dark list group item</CListGroupItem>
</CListGroup>
</b-card>
</b-col>
</b-row>
@@ -165,11 +177,11 @@
</div>
<b-card-group deck>
<b-card header="<b>Card with list group</b>">
<b-list-group>
<b-list-group-item href="#">Cras justo odio</b-list-group-item>
<b-list-group-item href="#">Dapibus ac facilisis in</b-list-group-item>
<b-list-group-item href="#">Vestibulum at eros</b-list-group-item>
</b-list-group>
<CListGroup>
<CListGroupItem href="#">Cras justo odio</CListGroupItem>
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
</CListGroup>
<p class="card-text mt-2">
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
@@ -178,11 +190,11 @@
</p>
</b-card>
<b-card no-body header="<b>Card with flush list group</b>">
<b-list-group flush>
<b-list-group-item href="#">Cras justo odio</b-list-group-item>
<b-list-group-item href="#">Dapibus ac facilisis in</b-list-group-item>
<b-list-group-item href="#">Vestibulum at eros</b-list-group-item>
</b-list-group>
<CListGroup flush>
<CListGroupItem href="#">Cras justo odio</CListGroupItem>
<CListGroupItem href="#">Dapibus ac facilisis in</CListGroupItem>
<CListGroupItem href="#">Vestibulum at eros</CListGroupItem>
</CListGroup>
<b-card-body>
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex
nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua
@@ -202,8 +214,8 @@
<div slot="header">
<i class="fa fa-align-justify"></i><strong> List group </strong><small>custom content</small>
</div>
<b-list-group>
<b-list-group-item href="#" active class="flex-column align-items-start">
<CListGroup>
<CListGroupItem href="#" active class="flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
@@ -213,8 +225,8 @@
sed diam eget risus varius blandit.
</p>
<small>Donec id elit non mi porta.</small>
</b-list-group-item>
<b-list-group-item href="#" class="flex-column align-items-start">
</CListGroupItem>
<CListGroupItem href="#" class="flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
@@ -224,8 +236,8 @@
sed diam eget risus varius blandit.
</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</b-list-group-item>
<b-list-group-item href="#" disabled class="flex-column align-items-start">
</CListGroupItem>
<CListGroupItem href="#" disabled class="flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Disabled List group item</h5>
<small class="text-muted">3 days ago</small>
@@ -235,8 +247,8 @@
sed diam eget risus varius blandit.
</p>
<small class="text-muted">Donec id elit non mi porta.</small>
</b-list-group-item>
</b-list-group>
</CListGroupItem>
</CListGroup>
</b-card>
</b-col>
</b-row>
@@ -249,4 +261,3 @@ export default {
name: 'list-groups'
}
</script>