HR_asco/asco_admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Init project

Browse Source
This commit is contained in:
alirezakarari
2021-01-09 20:53:13 +03:30
commit 8d06c89a89
1005 changed files with 105625 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/components/vuesax/button-group/ButtonGroup.vue
+35
View File
@@ -0,0 +1,35 @@
<!-- =========================================================================================
File Name: Button.vue
Description: Buttons - Imports all page portions
----------------------------------------------------------------------------------------
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
Author: Pixinvent
Author URL: http://www.themeforest.net/user/pixinvent
========================================================================================== -->
<template>
<div id="button-demo">
<button-group-basic></button-group-basic>
<button-group-toolbar></button-group-toolbar>
<button-group-size></button-group-size>
<button-group-vertical></button-group-vertical>
</div>
</template>
<script>
import ButtonGroupBasic from './ButtonGroupBasic.vue'
import ButtonGroupToolbar from './ButtonGroupToolbar.vue'
import ButtonGroupSize from './ButtonGroupSize.vue'
import ButtonGroupVertical from './ButtonGroupVertical.vue'
export default {
components: {
ButtonGroupBasic,
ButtonGroupToolbar,
ButtonGroupSize,
ButtonGroupVertical
}
}
</script>
src/views/components/vuesax/button-group/ButtonGroupBasic.vue
+31
View File
@@ -0,0 +1,31 @@
<!-- =========================================================================================
File Name: ButtonGroupBasic.vue.vue
Description: Buttons Group Basic
----------------------------------------------------------------------------------------
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
Author: Pixinvent
Author URL: http://www.themeforest.net/user/pixinvent
========================================================================================== -->
<template>
<vx-card title="Basic" code-toggler>
<p class="mb-4">Add <code>btn-group</code> class to wrapper to make all contained button acts as grouped buttons.</p>
<div class="btn-group">
<vs-button>First</vs-button>
<vs-button>Second</vs-button>
<vs-button>Third</vs-button>
</div>
<template slot="codeContainer">
&lt;div class=&quot;btn-group&quot;&gt;
&lt;vs-button&gt;First&lt;/vs-button&gt;
&lt;vs-button&gt;Second&lt;/vs-button&gt;
&lt;vs-button&gt;Third&lt;/vs-button&gt;
&lt;/div&gt;
</template>
</vx-card>
</template>
src/views/components/vuesax/button-group/ButtonGroupSize.vue
+55
View File
@@ -0,0 +1,55 @@
<!-- =========================================================================================
File Name: ButtonGroupSize.vue.vue
Description: Buttons Group Size
----------------------------------------------------------------------------------------
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
Author: Pixinvent
Author URL: http://www.themeforest.net/user/pixinvent
========================================================================================== -->
<template>
<vx-card title="Sizing" code-toggler>
<p class="mb-4">You can use <code>size</code> prop of button component to change the size of button group.</p>
<div class="btn-group">
<vs-button size="large">First</vs-button>
<vs-button size="large">Second</vs-button>
<vs-button size="large">Third</vs-button>
</div>
<div class="btn-group my-4">
<vs-button>First</vs-button>
<vs-button>Second</vs-button>
<vs-button>Third</vs-button>
</div>
<div class="btn-group">
<vs-button size="small">First</vs-button>
<vs-button size="small">Second</vs-button>
<vs-button size="small">Third</vs-button>
</div>
<template slot="codeContainer">
&lt;div class=&quot;btn-group&quot;&gt;
&lt;vs-button size=&quot;large&quot;&gt;First&lt;/vs-button&gt;
&lt;vs-button size=&quot;large&quot;&gt;Second&lt;/vs-button&gt;
&lt;vs-button size=&quot;large&quot;&gt;Third&lt;/vs-button&gt;
&lt;/div&gt;
&lt;div class=&quot;btn-group my-4&quot;&gt;
&lt;vs-button&gt;First&lt;/vs-button&gt;
&lt;vs-button&gt;Second&lt;/vs-button&gt;
&lt;vs-button&gt;Third&lt;/vs-button&gt;
&lt;/div&gt;
&lt;div class=&quot;btn-group&quot;&gt;
&lt;vs-button size=&quot;small&quot;&gt;First&lt;/vs-button&gt;
&lt;vs-button size=&quot;small&quot;&gt;Second&lt;/vs-button&gt;
&lt;vs-button size=&quot;small&quot;&gt;Third&lt;/vs-button&gt;
&lt;/div&gt;
</template>
</vx-card>
</template>
src/views/components/vuesax/button-group/ButtonGroupToolbar.vue
+57
View File
@@ -0,0 +1,57 @@
<!-- =========================================================================================
File Name: ButtonGroupToolbar.vue.vue
Description: Buttons Group Toolbar
----------------------------------------------------------------------------------------
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
Author: Pixinvent
Author URL: http://www.themeforest.net/user/pixinvent
========================================================================================== -->
<template>
<vx-card title="Toolbar" code-toggler>
<p class="mb-4">Use flex container on button groups to create button toolbar.</p>
<div class="flex flex-wrap">
<div class="btn-group mr-4 mt-4">
<vs-button>1</vs-button>
<vs-button>2</vs-button>
<vs-button>3</vs-button>
<vs-button>4</vs-button>
</div>
<div class="btn-group mt-4 mr-4">
<vs-button>5</vs-button>
<vs-button>6</vs-button>
<vs-button>7</vs-button>
</div>
<div class="btn-group mt-4">
<vs-button>8</vs-button>
</div>
</div>
<template slot="codeContainer">
&lt;div class=&quot;flex flex-wrap&quot;&gt;
&lt;div class=&quot;btn-group&quot;&gt;
&lt;vs-button&gt;1&lt;/vs-button&gt;
&lt;vs-button&gt;2&lt;/vs-button&gt;
&lt;vs-button&gt;3&lt;/vs-button&gt;
&lt;vs-button&gt;4&lt;/vs-button&gt;
&lt;/div&gt;
&lt;div class=&quot;btn-group ml-4&quot;&gt;
&lt;vs-button&gt;5&lt;/vs-button&gt;
&lt;vs-button&gt;6&lt;/vs-button&gt;
&lt;vs-button&gt;7&lt;/vs-button&gt;
&lt;/div&gt;
&lt;div class=&quot;btn-group ml-4&quot;&gt;
&lt;vs-button&gt;8&lt;/vs-button&gt;
&lt;/div&gt;
&lt;/div&gt;
</template>
</vx-card>
</template>
src/views/components/vuesax/button-group/ButtonGroupVertical.vue
+31
View File
@@ -0,0 +1,31 @@
<!-- =========================================================================================
File Name: ButtonGroupVertical.vue.vue
Description: Buttons Group in vertical variant
----------------------------------------------------------------------------------------
Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
Author: Pixinvent
Author URL: http://www.themeforest.net/user/pixinvent
========================================================================================== -->
<template>
<vx-card title="Vertical Variant" code-toggler>
<p class="mb-4">You can create vertical variant of button group using <code>btn-group-vertical</code> class</p>
<div class="btn-group-vertical">
<vs-button>Top</vs-button>
<vs-button>Middle</vs-button>
<vs-button>Bottom</vs-button>
</div>
<template slot="codeContainer">
&lt;div class=&quot;btn-group-vertical&quot;&gt;
&lt;vs-button&gt;Top&lt;/vs-button&gt;
&lt;vs-button&gt;Middle&lt;/vs-button&gt;
&lt;vs-button&gt;Bottom&lt;/vs-button&gt;
&lt;/div&gt;
</template>
</vx-card>
</template>