- 
- {{ post.text }}
-
- 
-
-
-
-
-
-
-
-
-
-
-
- ماه جاری
-{{ revenueComparisonLine.analyticsData.thisMonth.toLocaleString() - }}تومان
-ماه گذشته
-{{ revenueComparisonLine.analyticsData.lastMonth.toLocaleString() }}تومان
-کامل شده
-786,617
-در حال پردازش
-13,561
-- تا -
-عنوان: {{item.title}}
-تعداد:{{item.total}}
-{{item.time}}زمان:
-آیا مطمئن به حذف رکورد مورد نظر هستید ؟
- -آیا مطمئن به حذف رکورد مورد نظر هستید ؟
- -آیا مطمئن به حذف رکورد مورد نظر هستید ؟
- -{{ chatUser.about }}
- -| نام | -علی | -
| کد ملی | -اشکانی | -
| تلفن همراه | -09128081392 | -
| نوع مشتری | -کیفی | -
| وضعیت | -فعال | -
| سطح کاربری | -عمده فروش | -
| نام کیفی | -علی دوم | -
| نام تجاری | -درین | -
| درصد روی محصول | -0.7 درصد | -
| میزان فروش | -{{1550000 | priceUnit}} | -
| میزان بدهی | -{{250000 | priceUnit}} | -
| سقف اعتبار | -{{250000 | priceUnit}} | -
| میزان بدهی گرمی | -250 گرم | -
| مدت تسویه | -20 روز | -
{{ data.name }}
- - - -| {{ heading }} | -|
|---|---|
| {{ name }} | -
- |
-
By {{ item.brand }}
-In Stock
- -Quantity
-Delivery by, {{ item.delivery_date }}
-{{ item.discount_in_percentage }}% off {{ item.offers_count }} offers Available
- - - - - - -Options
-Price Details
-9447 Glen Eagles Drive
-Lewis Center, OH 43035
-UTC-5: Eastern Standard Time (EST)
-202-555-0140
-
- US Unlocked Debit Card 12XX XXXX XXXX 0000
- 
-
-
- - by - {{ item_data.brand }} -
-
- ${{ item_data.price }}
-
{{ item_data.description }}
- -- Available - - - In Stock -
-Chocolate bar candy canes ice cream toffee cookie halvah.
-Marshmallow biscuit donut dragée fruitcake wafer.
-Cotton candy gingerbread cake I love sugar sweet.
-{{ item.name }}
-- by - {{ item.brand }} -
-
-
- {{ item.description }}
-By {{ item.brand }}
-{{ item.description }}
-From: {{ props.mailContent.sender }}
-To: {{ props.mailContent.to | csv }}
-Date: {{ props.mailContent.time | time }} {{ props.mailContent.time | date(true) }}
-cc: {{ props.mailContent.cc | csv }}
-آیا مطمئن به حذف رکورد مورد نظر هستید ؟
- -آیا مطمئن به حذف رکورد مورد نظر هستید ؟
- -{{record.block}}
-آیا مطمئن به حذف رکورد مورد نظر هستید ؟
- -{{record.note}}
-- {{record.note}} -
-آیا مطمئن به حذف رکورد مورد نظر هستید ؟
- -آیا مطمئن به حذف رکورد مورد نظر هستید ؟
- -- تصویر شاخص محصول -
-- تصاویر باید پسوند png داشته باشند و حداکثر 1 مگابایت حجم داشته باشند. -
-- تصاویر این محصول را در این قسمت بارگذاری کنید. -
-- تصاویر باید پسوند png داشته باشند و حداکثر 1 مگابایت حجم داشته باشند. -
-آیا مطمئن به حذف رکورد مورد نظر هستید ؟
- -- تصویر شاخص تنوع -
-- تصاویر باید پسوند png داشته باشند و حداکثر 1 مگابایت حجم داشته باشند. -
-- تصاویر تنوع این محصول را در این قسمت بارگذاری کنید. -
-- تصاویر باید پسوند png داشته باشند و حداکثر 1 مگابایت حجم داشته باشند. -
-از : {{ props.mailContent.sender_name }}
-به : محسن الیادرانی
-تاریخ : 29 فروردین 1399 10:40
-cc: {{ props.mailContent.cc | csv }}
-{{ taskLocal.desc }}
-| Username | -{{ user_data.username }} | -
| Name | -{{ user_data.name }} | -
| {{ user_data.email }} | -
| Status | -{{ user_data.status }} | -
| Role | -{{ user_data.role }} | -
| Company | -{{ user_data.company }} | -
| Birth Date | -{{ user_data.dob }} | -
| Mobile | -{{ user_data.mobile }} | -
| Website | -{{ user_data.website }} | -
| Languages | -{{ user_data.languages_known.join(", ") }} | -
| Gender | -{{ user_data.gender }} | -
| Contact | -{{ user_data.contact_options.join(", ") }} | -
| {{ user_data.social_links.twitter }} | -|
| {{ user_data.social_links.facebook }} | -|
| {{ user_data.social_links.instagram }} | -|
| Github | -{{ user_data.social_links.github }} | -
| CodePen | -{{ user_data.social_links.codepen }} | -
| Slack | -{{ user_data.social_links.slack }} | -
| {{ heading }} | -|
|---|---|
| {{ name }} | -
- |
-
{{ data.name }}
- - - -| {{ heading }} | -|
|---|---|
| {{ name }} | -
- |
-
آیا مطمئن به حذف رکورد مورد نظر هستید ؟
- -- {{text.record.user.mobile}} -
-- {{text.record.customer.mobile}} -
- -A Vue.js component for ApexCharts. Read full documnetation here
- -You can easily create reuseable chart components. vue-chartjs is a wrapper for Chart.js. Read full documnetation here
- -ECharts component for Vue.js. Read full documnetation here
- -Creating basic google map
- -A basic example of using a single infowindow for 3 markers
- -Example of creating google map - street view
- -Point-of-view updates when you pan around
- -{{ $t("demoText") }}
-Your current role is {{ $acl.get[0] }}.
-You can add route protection using vue-acl. Only admin can visit eCommerce Dashboard.
-Chosen element: {{ chosen }}
- - -<template> - <vue-simple-suggest - v-model="chosen" - :list="simpleSuggestionList" - :filter-by-query="true"> - <!-- Filter by input text to only show the matching results --> - </vue-simple-suggest> - - <p class="mt-4">Chosen element: {{ chosen }}</p> -</template> - -<script> -export default { - data() { - return { - chosen: '', - } - }, - methods: { - simpleSuggestionList() { - return [ - 'Vue.js', - 'React.js', - 'Angular.js' - ] - }, - } -} -</script> - -<style lang="scss"> -@import "@/assets/scss/vuexy/extraComponents/autocomplete.scss"; -</style> - -Selected element ({{ typeof selected }}):
- - -<template> - <vue-simple-suggest - pattern="\w+" - v-model="model" - :list="getList" - :max-suggestions="10" - :min-length="3" - :debounce="200" - :filter-by-query="false" - :prevent-submit="true" - :controls="{ - selectionUp: [38, 33], - selectionDown: [40, 34], - select: [13, 36], - hideList: [27, 35] - }" - :mode="mode" - :nullable-select="true" - ref="suggestComponent" - placeholder="Search information..." - value-attribute="id" - display-attribute="text" - @select="onSuggestSelect"> - - <div class="g"> - <input type="text"> - </div> - - <template slot="misc-item-above" slot-scope="{ suggestions, query }"> - <div class="misc-item"> - <span>You're searching for '{{ "\{\{ query \}\}" }}'.</span> - </div> - - <template v-if="suggestions.length > 0"> - <div class="misc-item"> - <span>{{ "\{\{ suggestions.length \}\}" }} suggestions are shown...</span> - </div> - <hr> - </template> - - <div class="misc-item" v-else-if="!loading"> - <span>No results</span> - </div> - </template> - - <div slot="suggestion-item" slot-scope="scope" :title="scope.suggestion.description"> - <div class="text"> - <span v-html="boldenSuggestion(scope)"></span> - </div> - </div> - - <div class="misc-item" slot="misc-item-below" slot-scope="{ suggestions }" v-if="loading"> - <span>Loading...</span> - </div> - </vue-simple-suggest> - - <p class="mt-3">Selected element ({{ "\{\{ typeof selected \}\}" }}): <pre class="selected hljs"><span v-html="selected"></span></pre></p> -</template> - -<script> -export default { - data() { - return { - model: null, - } - }, - methods: { - getList (inputValue) { - return new Promise((resolve, reject) => { - let url = `https://en.wikipedia.org/w/api.php?origin=*&action=opensearch&namespace=*&search=${inputValue}&limit=10&namespace=0&format=json` - fetch(url).then(response => { - if (!response.ok) { - reject() - } - response.json().then(json => { - json.shift(); - let result = [] - const fields = ['text', 'description', 'link'] - json.forEach((part, i) => { - part.forEach((el, j) => { - if (!result[j]) { - result.push({ - id: j+1 - }) - } - result[j][fields[i]] = el - }) - }) - resolve(result) - // resolve([...(json.items || [])]) - }).catch(e => { - reject(e) - }) - }).catch(error => { - this.loading = false - reject(error) - }) - }) - }, - onSuggestSelect (suggest) { - this.selected = suggest - }, - boldenSuggestion(scope) { - if (!scope) return scope; - const { suggestion, query } = scope; - let result = this.$refs.suggestComponent.displayProperty(suggestion); - if (!query) return result; - const texts = query.split(/[\s-_/\\|.]/gm).filter(t => !!t) || ['']; - return result.replace(new RegExp('(.*?)(' + texts.join('|') + ')(.*?)','gi'), '$1<b>$2</b>$3'); - }, - } -} -</script> - -
Determines the event, that triggers v-model. Can be one of 'input' (default) or 'select'.
For example, if 'input' is chosen - then v-model will update the value each time an input event is fired, setting the input's string.
Same is for 'select' - v-model changes only when something is selected from the list, setting the selected value (string, object or whatever) to its argument.
A proper use-case for it being when one wants to use the component only for selection binding and custom input for text binding:
- -
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
-
-
- 
- 
- 
- 
- 
- 
- 
-
-
-
-
-
-
-
-
-
-
-
-
-
- 
-
-
- 
-
-
-
-
-
-
-
- 
-
-
-
-
- 
- 
- 
-
- 
- 
- 
- Jelly chocolate cupcake chocolate bar caramels chupa chups chupa chups ice cream tiramisu. Oat cake muffin pastry marzipan sweet jujubes powder cupcake carrot cake. Caramels candy pastry marzipan pudding. Sugar plum carrot cake topping cookie.
-Sweet oat cake marzipan jelly brownie ice cream bear claw marshmallow jelly beans. Halvah dessert caramels toffee sweet cake tiramisu. Chocolate bar marshmallow topping biscuit gummies chocolate cake candy liquorice.
-Powder jelly bonbon liquorice candy canes jujubes fruitcake cotton candy macaroon. Croissant jelly-o tootsie roll halvah. Topping lollipop pastry. Fruitcake powder cupcake apple pie chocolate bar wafer. brownie macaroon dragée chocolate bar candy.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- A simple Vue.js datepicker component. Supports disabling of dates, inline mode, translations. Read full documnetation here
- -Rendering default DatePicker with date and month view only
- -Rendering default DatePicker with Day view only
- -Rendering default DatePicker with v-model
Selected Date: {{ date }}
-Change datepicker format with format
Highlight dates in datepicker using function with highlighted prop
Create inline datepicker using inline prop
You can add min max date range to disable dates in number of ways: docs
- -Rendering default DatePicker with Month view only
- -Rendering default DatePicker with month and year view only
- -Open datepicker programatically using ref and click-event
- -Rendering RTL DatePicker using language prop
Date picker language: {{ languages[language].language }}
- -vue-flatpickr-component is Vue.js component for Flatpickr datetime picker. Read full documnetation here
- -Rendering basic Datetime Picker with v-model
Selected Date: {{ date }}
-Rendering datetime picker by updating config
- -Selected Datetime: {{ datetime }}
-Creating inline datetime picker by setting inline to true
Use allowInput to create Datepicker with input support
Import locale and set locale in config of picker to change locale.
Selected Date: {{ date }}
-Create start and end date - date picker
- -set noCalendar to true to hide calendar
Selected Time: {{ time }}
-Vue.Draggable - Vue component allowing drag-and-drop and synchronization with view model array. Based on and offering all features of Sortable.js
- -Add animation to changes using transition-group.
Clone list items from another existing list. Add pull and put to group prop
Drag and drop items of more than one list. Add same group to group prop
Simple Draggable list with in sync to original list. Remove list prop to break synchronization with original list.
Vue-Quill-Editor editor component for Vue, support SPA and SSR. Read full documnetation here
- -You have freedom to create your own custom toolbar
-Bubble is a simple tooltip based theme
-Snow is a clean, flat toolbar theme
-vue-select is a native Vue.js select component that provides similar functionality to Select2. Read full documnetation here
- -vue-select accepts arrays of strings or objects to use as options through the options prop
When provided an array of objects, vue-select will display a single value of the object. By default, vue-select will look for a key named label on the object to use as display text
When the options array contains objects, vue-select looks for the label key to display by default. You can set your own label to match your source data using the label prop
-The most common use case for vue-select is to have the chosen value synced with a parent component. vue-select takes advantage of the v-model syntax to sync values with a parent
- -If you don't require the value to be synced, you can also pass the prop directly:
- -This method allows you to pre-select a value(s), without syncing any changes to the parent component. This is also very useful when using a state management tool, like Vuex
- -By default, vue-select supports choosing a single value. If you need multiple values, use the multiple prop
- -To allow input that's not present within the options, set the taggable prop to true. If you want new tags to be pushed to the options list, set push-tags to true
You can show and hide the alert by means of active.sync and a Boolean bind as value
The property to determine if the alert can be closed is closable
You can also change the icon used for the close buton on the alerts
- - -You can change the color of the alert with the property color. You are able to use the Main Colors or RGB and HEX colors
To add a notification use the vs-alert component. For the main parameter, pass the active property that determines if the alert is visible or not
An example would be to have an input and when a condition is met show the vs-alert
- -You can add to the alert a descriptive icon with the property icon and as a value the icon name of the icon in the currently selected icon pack. (Default is Material Icons)
Add a title to the alert with the property title
You can change the Avatar's color by using the property color. If needed you could also change the text's color with the property text-color
Luis Daniel and only the letters LD will be shown if the word contains spaces the initial of each one is added.
- Often you need to add an user's avatar to your app. In order to make this we have the component vs-avatar
To add an internal text value such as Luis use the text property
Luis Daniel and only the letters LD will be shown if the word contains spaces the initial of each one is added.
- You can change the main icon of the Avatar with the property icon
Vuesax uses the Google Material Icons font library by default. For a list of all available icons, visit the official Material Icons page. Other icon libraries can be used by providing the class for the respective pack in the icon-pack property. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal.
- -This icon is only displayed when there is no property as text or src
You can change the size of the Avatar with the property size the allowed values are:
-70px the added value will be the avatar's height and width
- You can add a notification label to the avatar, either a reference point or a number with the property badge
You could also change the badge's color by using the property badge-color. You are able to use the
Use align to either align the breadcrumb to the left, center or right
Use the color directive like for any other component that supports it to customize the breadcrumbs links color
Use the items in order to programatically generate the breadcrumb links
You can change the separator dividing the links by either passing a string to the separator directive like so "•", "-", "|" etc..., or by passing in one of the material icons text "chevron_right"
A default Vue slot that can be used instead of passing in an array of object. This allows for greater control of the breadcrumbs
- -Add btn-group class to wrapper to make all contained button acts as grouped buttons.
You can use size prop of button component to change the size of button group.
Use flex container on button groups to create button toolbar.
- -You can create vertical variant of button group using btn-group-vertical class
To add a type of button with edges we change the value of border
There are cases in which we need something more personalized like a specific color, you can change the color of the button with the property color giving it as a value the color
gradient-color-secondary
- To define the type of button the directive is used type with the value of some type of button like it can be: filled
To add a type of button with edges just change the prop type to flat
To add a type of button with edges we change the value of type by: gradient
You can add an icon to the button with the property icon
icon-after
- You can have a button with only the icon you want with the property icon and not add any internal value to the button
To add a type of button with edges we change the value of type by: line
You can specify for window.location.href
target property to window.open()
- To add a type of button with edges we change the value of type by: relief
You can send a string or object to directive to. This directive wrap a $router.push() vue method, you can use all programmatic navigation on vue router.
- -To define the size of button the directive is used size. there are three type of size: large, default, small. It is not important to specify the size when the button is of type default
You can change the font color of buttons, need only set the prop text-color with your color
You can add and remove chips with the vs-chips component. For the main parameter, pass the items property, which is an array representing each chip
For making a chip closable
- -Change the background color of the chip
- -You can change the icons used for the close button and the clear button when using multiple chips with the vs-chips component.
For the main parameter, pass the close-icon property, which is the close icon that appears on each chip. You can change the Clear Chips button with the remove-icon property
Vuesax uses the Google Material Icons font library by default. For a list of all available icons, visit the official Material Icons page.
-FontAwesome and other fonts library are supported. Simply use the icon-pack with fa or fas. You still need to include the Font Awesome icons in your project.
-Helps you represent simple data with colorful options
- -Add a nice icon to the chip
- -You can create transparent chip using transparent prop.
You may need to show only one element at a time. For this add accordion prop to vs-collapse
You can customise the arrow on the component vs-collapse-item by passing the string name of an icon to the icon-arrow property
Vuesax uses the Google Material Icons font library by default. For a list of all available icons, visit the official Material Icons page.
-FontAwesome and other fonts library are supported. Simply use the icon-pack with fa or fas. You still need to include the Font Awesome icons in your project.
-To implement the collapse we have the component vs-collapse and as sub-component for each item the component vs-collapse-item
If you want the items to open when you hover in, add the open-hover property in the component
You can easily change the style of the accordion with the type property, the supported styles are:
To generate a dialog we have the global function $vs.dialog the parameters to generate the dialog are
-If you need a dialog of type confirm you can do it just by changing the type as a parameter inside the main function
- -To do some action when the user approves or confirms we have the property accept:myFunctionAccept
To add a dialog of type prompt we have a global function a completely independent component vs-prompt. This allows more flexibility with the input and ability to add any type of input and components
You can change the color of the divider line with the property color, you can use the main colors or RGB and HEX.
You can add a line to divide with the component vs-divider
To add an icon within the division we have the property icon
Vuesax uses the Google Material Icons font library by default. For a list of all available icons, visit the official Material Icons page.
-FontAwesome and other fonts library are supported. Simply use the icon-pack with fa or fas. You still need to include the Font Awesome icons in your project.
-You can change line's style with the property border-style. The allowed values are equivalent to the border-style property in CSS.
You can add a text between the line to delimit two elements and have a description for the user
- -You can guide the text in 5 ways with property position:
You can customize the component or element that initialize the dropdown in this case, it is a Button that is the most common
- -The component or element that initializes the dropdown is the one inside it with the possibility of total customization and flexibility in the required use
-Vuesax uses the Google Material Icons font library by default. For a list of all available icons, visit the official Material Icons page.
-FontAwesome and other fonts library are supported. Simply use the icon-pack with fa or fas. You still need to include the Font Awesome icons in your project.
-You can change the color of the component with the property color
Sometimes when we need something more personalized and not necessarily a menu for it you can add any content and have the dropdown functionality with the property vs-custom-content
For better functionality in the user's aspect when doing some interaction with the custom dropdown you can add that it is only activated and deactivated by a click event with the property vs-trigger-click
To add the Dropdown we have three types of components the main vs-dropdown that contains the element that makes the vs-dropdown-menu appear and to add each item within it we have the component vs-dropdown-item
To add an internal link using vue-router you can do them simply by adding the property to as if it were a vue-router link
-In case you need an external link or normal html, simply do it with the href property
-If you need to group the options you can use the subcomponent vs-dropdown-group which as a required parameter is vs-label to define the group title
The group can be hidden from the user and only open when it is sitting on the property with the vs-collapse property
You can modify the icon with a property vs-icon
You can implement an avatar in the list with the slot="avatar" by putting a [vs-avatar] component
Vuesax uses the Google Material Icons font library by default. For a list of all available icons, visit the official Material Icons page.
-FontAwesome and other fonts library are supported. Simply use the icon-pack with fa or fas. You still need to include the Font Awesome icons in your project.
-A basic list of items with title and subtitle
You can add custom content to the item. It will be pushed to the right side
- -A vs-list-header separator with custom color
The list items and the headers can have a icon as well
Vuesax uses the Google Material Icons font library by default. For a list of all available icons, visit the official Material Icons page.
-FontAwesome and other fonts library are supported. Simply use the icon-pack with fa or fas. You still need to include the Font Awesome icons in your project.
-If you need to change the background of the loading, you can use the property background
You can change the color of the loading with the property color
To add a loading within a container, call the $vs.loading() global function passing the container and the scale parameters. When you want to remove it we have $vs.loading.close(), passing the same container parameter
For the examples, the request or the delay is simulated with setTimeout
To add a loading in any part of your application we have the global function $vs.loading(), and then when you want to remove it we have $vs.loading.close()
For the examples, the request or the delay is simulated with setTimeout
You can change the type of animation with the type property and the animations so far are:
- -collapse property determines if the component starts hidden and with the option of clicking on the menu to open or show the options
You can change the color of the Topbar with the property color. You are able to use the Main Colors or RGB and HEX colors
To add a navbar we have the component vs-navbar, there is a series of sub components to determine internal elements vs-navbar-title, vs-spacer
You may need an entry in the menu to simply use the vs-input component, for example if you need a search engine
If you want you can change the style of the buttons and the navbar by changing the property type
Nice, simple, and interactive notifications
- -To add a notification we have the global function $vs.notify. The first parameter is a json with all the necessary attributes, or if we only want the standard notification we can only add a string with the text of the notification
Sometimes we need to execute a function when the user clicks on the notification. For this, pass a function to the click property. Example: click:()=>{ ... }
Notifications can include icons to improve the user experience and to construct a more pleasant and intuitive notification. To make this, use the icon property. A practical example would be: icon: 'chat'
Vuesax uses the Google Material Icons font library by default. For a list of all available icons, visit the official Material Icons page.
-FontAwesome and other fonts library are supported. Simply use the icon-pack with fa or fas. You still need to include the Font Awesome icons in your project.
-We can change the place where the notification appears with the property position. A practical example would be: position: 'top-right'. The supported values are
- -bottom-right, it is not necessary to add the position property if it is the desired position
- You can change the total time that the notification stays on the screen with the time property. Example: time: 4000
By default the notifications have a time of 2000 (2s)
-You can change the color of the component with the property color, you can use the Main colors or RGB and HEX colors
- -The pagination component consists of several elements, all of which are optional. So with no extra class, your pagination links will look as follow
- -The goto directive will allow users to directly jump to a desired page
If the value given is lower than 1 it will jump to page 1. However if the value is greater than total it will jump to the last page
-To customize the previous and next page icons change the value of the prev-icon and prev-icon directives. By default, their values are respectively arrow_back and arrow_forward
- -Vuesax uses the Google Material Icons font library by default. For a list of all available icons, visit the official Material Icons page.
-FontAwesome and other fonts library are supported. Simply use the icon-pack with fa or fas. You still need to include the Font Awesome icons in your project.
-By default Vuesax will show a maximum of 9 links. This default behavior can be changed by setting the max directive to a different integer value
The amount given to the max directive should take into account the first and last pages plus the ellipses "..."
max directive to a value lesser then 5 when the total is greater then that will result in the pagination only showing the previous/next buttons as well as the first and last links
- You can also update page number from outside of pagination component.
- -Current Page: {{ currentx }}
-You can change the background of the property with the property background-color or if you want to change the color of the popup you can use the property background-color-popup
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-To implement the popup we have the component vs-popup
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-the popup can be full screen you just have to add the property fullscreen
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-You can add one popup inside another
- -Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-Nice colors for your progress bar
- -You can change the height of the loading bar with the property height
- -By default the property height is 5(5px)
You can have a progress bar with indeterminate value with the property indeterminate
- -With custom sidebar you can create sidebar items and groups using list of object.
-You can also use feather icons in sidebar group and sidebar items using icon property. Check out all feather icons here
- -Main sidebar on left side is demo of Custom Sidebar. You can check full code by clicking on code-toggler icon of this card.
- - -<template> - <v-nav-menu - :sidebarItems="sidebarItems" - title="Custom" - :logo="navMenuLogo"> -</template> - -<script> -import VNavMenu from "@/layouts/components/vertical-nav-menu/VerticalNavMenu.vue"; - -export default { - data: () => ({ - showSidebar: false, - navMenuLogo: require('@/assets/images/logo/logo.png'), - sidebarItems: [ - { - url: "/", - name: "Dashboard", - slug: "dashboardAnalytics", - icon: "HomeIcon", - i18n: "Dashboard", - }, - { - url: "/ui-elements/colors", - name: "Colors", - slug: "colors", - icon: "DropletIcon", - i18n: "Colors", - }, - { - header: "Extensions", - i18n: "Extensions", - }, - { - url: '/extensions/select', - name: "Select", - icon: "PocketIcon", - slug: "extraComponentSelect", - i18n: "Select", - }, - { - url: '/extensions/quill-editor', - name: "Quill Editor", - icon: "EditIcon", - slug: "extraComponentQuillEditor", - i18n: "QuillEditor", - }, - { - url: '/extensions/drag-and-drop', - name: "Drag & Drop", - icon: "DropletIcon", - slug: "extraComponentDragAndDrop", - i18n: "DragAndDrop", - }, - { - url: '/extensions/datepicker', - name: "Datepicker", - icon: "CalendarIcon", - slug: "extraComponentDatepicker", - i18n: "Datepicker", - }, - ] - }), - components: { - VNavMenu - } -} -</script> - - -One of the most common features is to have the hidden sidebar to show it when the user presses a button or makes an action, to add a sidebar we have the component vs-sidebar
- -To add an internal link using vue-router you can do them simply by adding the property to as if it were a vue-router link.
-
- In case you need an external link or normal html, simply do it with the href property
To make the link is in an active state we have the property v-model
You can have groups of sub menus with the component vs-sidebar-group that as a required parameter we have the title, you can add as many groups as you need, including internally from the same component
By default the component is closed but if you need to initialize open you can use the property open
You can change the parent of the sidebar with the property parent that as a value requires an element of the DOM (#idx, .classx) or a reference of Vuejs as $refs.myrefContent
By default the parent of the sidebar is the body
-You can remove dark background(overlay) by setting hidden-background prop to true
You can have a reduced sidebar with the reduce property which by default makes the sidebar look reduced and when hover expands, if you do not want the functionality to expand when hovering you can remove it with the reduce-not-hover-expand property
You can remove the bounce animation by opening the sidebar with the prop reduce-not-rebound
You can also choose where you'd like the sidebar to appear, right or left? By default, a sidebar will be located on the left of the screen but sometimes, a right-screened sidebar is really useful!
- -static sidebar will not appear on the right.
- You can also use the sidebar in static mode with the property static
- -when putting the sidebar in static mode its position becomes relative for better manipulation
-You can add a function that will be triggered every time the value changes with @change="MyFunction"
You can change the minimum or maximum number admitted with the properties: min, max
You can change the slider's color with the property color. You can also add the main colors like: primary, success, danger, warning, dark
To implement a Slider we have the vs-slider component
You can add an icon with the icon property to better representation the sliders to the user
Vuesax uses the Google Material Icons font library by default. For a list of all available icons, visit the official Material Icons page.
-FontAwesome and other fonts library are supported. Simply use the icon-pack with fa or fas. You still need to include the Font Awesome icons in your project.
-With Range you can allow the user to select a range inside a range of allowed values. You can use the v-model property with Array and a minimum and maximum value represented as: [min, max]
Determine the text that will be fixed next to the value with the property text-fixed
With Ticks you can allow the user to select a value inside a range of allowed values. With the property step you can change the distance between each Tick
- -Change the alignment of the buttons with the property alignments. Allowed values are:
- -You can change the color of the component with the property color, the parameter allows the main colors and HEX or RGB
- -Muffin cupcake candy chocolate cake gummi bears fruitcake donut dessert pie. Wafer toffee bonbon dragée. Jujubes cotton candy gummies chupa chups. Sweet fruitcake cheesecake biscuit cotton candy. Cookie powder marshmallow donut. Candy cookie sweet roll bear claw sweet roll. Cake tiramisu cotton candy gingerbread cheesecake toffee cake. Cookie liquorice dessert candy canes jelly.
-Sweet chocolate muffin fruitcake gummies jujubes pie lollipop. Brownie marshmallow caramels gingerbread jelly beans chocolate bar oat cake wafer. Chocolate bar danish icing sweet apple pie jelly-o carrot cake cookie cake.
-Biscuit macaroon sugar plum sesame snaps oat cake halvah fruitcake pudding cotton candy. Cheesecake tart wafer soufflé. Chocolate marzipan donut pie soufflé dragée cheesecake. Gummi bears dessert croissant chocolate jujubes fruitcake. Pie cupcake halvah.
-Tiramisu carrot cake marzipan sugar plum powder marzipan sugar plum bonbon powder. Macaroon jujubes ice cream sugar plum lollipop wafer caramels. Cheesecake chocolate tart cake gingerbread fruitcake cake candy jelly-o. Candy cookie lollipop. Wafer lemon drops chocolate cake gummi bears.
-Brownie ice cream biscuit candy biscuit jujubes. Dessert cake gummies fruitcake chocolate cake sweet roll pastry croissant danish. Pudding chocolate bar sweet roll muffin cake tootsie roll biscuit pastry. Chupa chups dessert donut. Pastry gummi bears tart cookie apple pie sugar plum bear claw.
-Pudding jelly chocolate powder jelly beans icing candy soufflé sweet. Cotton candy sugar plum fruitcake dessert dragée. Toffee chocolate cake chocolate cake oat cake topping macaroon caramels cotton candy. Ice cream lemon drops lollipop.
-Chocolate powder candy canes cake gummies tart donut. Gummi bears sesame snaps bonbon apple pie carrot cake croissant marzipan candy canes jelly-o. Marshmallow sweet cake gummies ice cream toffee. Jelly gingerbread jelly beans tart tart. Jelly-o bonbon jelly-o lemon drops sweet roll jujubes cake. Chocolate cake dessert sugar plum.
-Jelly beans brownie chocolate bar. Jujubes lemon drops apple pie chocolate cake bear claw cupcake chocolate sweet pastry. Pastry carrot cake liquorice. Sesame snaps sugar plum chupa chups tiramisu. Halvah cake chocolate bar jelly beans dragée chocolate halvah pudding pudding.
-Gingerbread tart marzipan sweet lemon drops wafer soufflé apple pie lemon drops. Cake pie apple pie icing fruitcake liquorice dessert sugar plum liquorice. Cake liquorice sugar plum cake croissant sweet. Jelly beans donut dessert. Cake jelly-o marzipan candy canes biscuit jelly toffee. Gummi bears jelly-o pastry macaroon gummies gingerbread liquorice bonbon chocolate cake.
-Dragée muffin lemon drops. Cake sweet tootsie roll cupcake cake sugar plum lemon drops. Pudding gingerbread sesame snaps sweet. Gummi bears gingerbread pastry cotton candy sesame snaps toffee. Cake chocolate bonbon marzipan jelly-o powder. Cupcake jujubes fruitcake oat cake powder caramels.
-To implement a tabs, use the vs-tabs component. It must include vs-tab child components that represent each tab
For the title of each tab the label property is implemented in the vs-tab component
Muffin cupcake candy chocolate cake gummi bears fruitcake donut dessert pie. Wafer toffee bonbon dragée. Jujubes cotton candy gummies chupa chups. Sweet fruitcake cheesecake biscuit cotton candy. Cookie powder marshmallow donut. Candy cookie sweet roll bear claw sweet roll. Cake tiramisu cotton candy gingerbread cheesecake toffee cake. Cookie liquorice dessert candy canes jelly.
-Sweet chocolate muffin fruitcake gummies jujubes pie lollipop. Brownie marshmallow caramels gingerbread jelly beans chocolate bar oat cake wafer. Chocolate bar danish icing sweet apple pie jelly-o carrot cake cookie cake.
-Biscuit macaroon sugar plum sesame snaps oat cake halvah fruitcake pudding cotton candy. Cheesecake tart wafer soufflé. Chocolate marzipan donut pie soufflé dragée cheesecake. Gummi bears dessert croissant chocolate jujubes fruitcake. Pie cupcake halvah.
-Tiramisu carrot cake marzipan sugar plum powder marzipan sugar plum bonbon powder. Macaroon jujubes ice cream sugar plum lollipop wafer caramels. Cheesecake chocolate tart cake gingerbread fruitcake cake candy jelly-o. Candy cookie lollipop. Wafer lemon drops chocolate cake gummi bears.
-Brownie ice cream biscuit candy biscuit jujubes. Dessert cake gummies fruitcake chocolate cake sweet roll pastry croissant danish. Pudding chocolate bar sweet roll muffin cake tootsie roll biscuit pastry. Chupa chups dessert donut. Pastry gummi bears tart cookie apple pie sugar plum bear claw.
-Pudding jelly chocolate powder jelly beans icing candy soufflé sweet. Cotton candy sugar plum fruitcake dessert dragée. Toffee chocolate cake chocolate cake oat cake topping macaroon caramels cotton candy. Ice cream lemon drops lollipop.
-Chocolate powder candy canes cake gummies tart donut. Gummi bears sesame snaps bonbon apple pie carrot cake croissant marzipan candy canes jelly-o. Marshmallow sweet cake gummies ice cream toffee. Jelly gingerbread jelly beans tart tart. Jelly-o bonbon jelly-o lemon drops sweet roll jujubes cake. Chocolate cake dessert sugar plum.
-Jelly beans brownie chocolate bar. Jujubes lemon drops apple pie chocolate cake bear claw cupcake chocolate sweet pastry. Pastry carrot cake liquorice. Sesame snaps sugar plum chupa chups tiramisu. Halvah cake chocolate bar jelly beans dragée chocolate halvah pudding pudding.
-Gingerbread tart marzipan sweet lemon drops wafer soufflé apple pie lemon drops. Cake pie apple pie icing fruitcake liquorice dessert sugar plum liquorice. Cake liquorice sugar plum cake croissant sweet. Jelly beans donut dessert. Cake jelly-o marzipan candy canes biscuit jelly toffee. Gummi bears jelly-o pastry macaroon gummies gingerbread liquorice bonbon chocolate cake.
-Dragée muffin lemon drops. Cake sweet tootsie roll cupcake cake sugar plum lemon drops. Pudding gingerbread sesame snaps sweet. Gummi bears gingerbread pastry cotton candy sesame snaps toffee. Cake chocolate bonbon marzipan jelly-o powder. Cupcake jujubes fruitcake oat cake powder caramels.
-You can change the position of the menu with the property position that as a value you can have: top, right, bottom, left
For the title of each tab the label property is implemented in the vs-tab component
To change the color of the tooltip, use the property color. You are able to use the Main Colors or RGB and HEX colors
- -To add a tooltip we have the component vx-tooltip
You can change the delay in appearing the tooltip with the property delay
You can change the position at which the tooltip appears with the property position
If necessary, you can add a title to the tooltip with the property title
You can enable automatic submission with the Automatic property that executes the shipment by changing the value of the input
You can upload files to the server with the vs-upload component, the requested parameter is action which is the URL of the server
For the title of each tab the vs-label property is implemented in the vs-tab component
You can upload multiple files by adding the multiple property within the component
| {{ heading }} - | -|
|---|---|
| {{ name }} | -
- |
-
آیا مطمئن به حذف رکورد مورد نظر هستید ؟
- -v-model with a value of array.
-
- v-model
-
- icon
-
- color. You are able to use the Main Colors or RGB and HEX colors.
-
- vs-checkbox component which expects a principal parameter v-model that would be our value.
-
- vs-value
-
- color. You are able to use the vs-input component.
-
- vs-icon. You can also also manipulate the icon's position with the property vs-icon-after
-
- vs-icon-pack with fa or fas. You still need to include the Font Awesome icons in your project.
- label
-
- label-placeholder for making this.
-
- size. The allowed values are: large and small
-
- You can add a state for example of in affirmative response to a validation with vs-success and if it is necessary to add a description or help to the user you can do it with the property vs-description
You can add icon using val-icon-{} and value will be icon name
vs-danger-text for the state of danger.
- color. You are able to use the Main Colors or RGB and HEX colors.
-
- If you need to add a component that handles a single number, use the component vs-input-number
You can also change the increment and decrement button icons using the properties icon-inc and icon-dec respectively
Number Input supports adding labels for number inputs.
- -min, max
-
- size. The allowed values are: medium, small, and mini
-
- step
-
- You can change the color with the property color. You are able to use the
To implement a radio button you just add the vs-radio component and add a v-model
You can add the autocomplete functionality in the desired selected with the property autocomplete
You can change the color of the select with the property color
You can group elements with the sub component vs-select-group
You can validate if an option is selected with the property is-selected.sync and do with it multiple variants with changing the text of the selected options
Add a label to the input with the property label
You can have a selection with multiple selections with the property multiple. If you need the user to select only a certain number of options you can use the property max-selected
To add a select to the application we have the component vs-select.
You can add a state for example of in affirmative response to a validation with success and if it is necessary to add a description or help to the user you can do it with the property description
vs-danger-text for the state of danger.
- vs-value property inside the switch component. That is the value that will be added to the array.
- {{ switchArray }}
- - -<template> - <ul class="con-s"> - <li class="modelx"> - {{ "\{\{ switchArray \}\}" }} - </li> - <li> - <vs-switch vs-icon-on="check" color="success" v-model="switchArray" vs-value="luis"> - <span slot="off">Luis</span> - </vs-switch> - </li> - <li> - <vs-switch vs-icon-on="check" color="success" v-model="switchArray" vs-value="carols"> - <span slot="off">Carols</span> - </vs-switch> - </li> - <li> - <vs-switch vs-icon-on="check" color="success" v-model="switchArray" vs-value="summer"> - <span slot="off">Summer</span> - </vs-switch> - </li> - <li> - <vs-switch vs-icon-on="check" color="success" v-model="switchArray" vs-value="lyon"> - <span slot="off">Lyon</span> - </vs-switch> - </li> - </ul> -</template> - -<script> -export default { - data(){ - return { - switchArray:['luis'], - } - } -} -</script> - -We can add a representative icon inside our switch with the property vs-icon.
If you only need to add the icon in one of the states you can do it with the property vs-icon-on or vs-icon-off
To implement a switch element in the application, we add the component vs-switch
on or off. You can also join the text with the icons.
- counter, the value is a number and determines the maximum
-
- counter-danger.sync
- vs-textarea
-
- height prop.
-
- width prop.
-
- vx-input-group component provides various options to create desired form input group.
You can also add form elements to prepend/append slot. Using tailwind css, you can tune appearance as you like.
-vx-input-group component provides various options to create desired form input group.
size prop of vs-input component to change size of input group.
- vee-validate is a Template Based Validation Framework for Vue.js. Read full documentation here
- -With vee-validate you can display your own custom error messages
-You can change default event when validation triggers using data-vv-validate-on
You can validate multiple rules using |. You can find more validation rules here
Simple form validation before submitting form. Add v-validate directive to input.
VeeValidate comes with a bunch of validation rules out of the box and cover most validation needs
-vue-form-wizard is a vue based component with no external depenendcies which simplifies tab wizard management and allows you to focus on the functional part of your app rather than wasting time on details.
- -Add feather icon class to icon prop in tab-content component to get desired icon in tab.
Create neat and clean form wizard using form-wizard and tab-content components
Implement Form validation with form wizard using popular
آیا مطمئن به حذف رکورد هستید.؟
- -- تصویر شاخص دسته بندی -
-- تصاویر باید پسوند png داشته باشند و حداکثر 1 مگابایت حجم داشته باشند. -
-آیا مطمئن به حذف رکورد مورد نظر هستید ؟
- -
-
- Bonbon sesame snaps lemon drops marshmallow ice cream carrot cake croissant wafer.
-{{ supporter.name }}
- {{ supporter.profession }} -{{ que.ans }}
-Please enter your email address and we'll send you instructions on how to reset your password.
-
- {{ invoiceDetails.invoiceNo }}
- -{{ invoiceDetails.invoiceDate | date(true) }}
-{{ recipientDetails.fullName }}
-{{ recipientDetails.addressLine1 }}
-{{ recipientDetails.addressLine2 }}
-{{ recipientDetails.zipcode }}
-
-
-
{{ companyDetails.addressLine1 }}
-{{ companyDetails.addressLine2 }}
-{{ companyDetails.zipcode }}
-
-
-
Bonbon sesame snaps lemon drops marshmallow ice cream carrot cake croissant wafer.
-{{ categorySubtitle }}
- -Last updated on {{ article.lastUpdated | date(true) }}
-Pastry jelly chocolate bar caramels fruitcake gummies marshmallow lemon drops. Powder cupcake topping muffin carrot cake croissant soufflé sugar plum sweet roll. Cotton candy ice cream gummies biscuit bonbon biscuit. Icing pastry bonbon. Sweet roll chocolate cake liquorice jelly beans caramels jelly cookie caramels. Pastry candy canes cake powder lollipop tootsie roll sugar plum. Cake cotton candy dragée danish. Muffin croissant sweet roll candy wafer marzipan cheesecake. Carrot cake toffee gummi bears gingerbread donut biscuit. Donut chupa chups oat cake cheesecake apple pie gummies marzipan icing cake. Macaroon jelly beans gummi bears carrot cake tiramisu liquorice. Sweet tootsie roll cookie marzipan brownie icing cookie jelly tart. Lollipop cookie tootsie roll candy canes.
- -Candy canes oat cake biscuit halvah ice cream. Marshmallow icing topping toffee caramels dessert carrot cake. Liquorice soufflé brownie sugar plum dessert cotton candy. Cupcake halvah topping oat cake soufflé pastry dragée pudding cotton candy.
- - -Chocolate cake powder I love jelly beans lemon drops candy fruitcake. Sesame snaps sugar plum chocolate candy canes muffin. Wafer pastry topping croissant pudding dessert I love. Bonbon apple pie fruitcake candy canes I love. Lollipop sweet gingerbread I love I love dessert. I love halvah marshmallow pie jelly beans macaroon candy. Bonbon ice cream lollipop pie fruitcake oat cake. Topping marshmallow I love sesame snaps dragée. I love sesame snaps jelly. Chocolate sesame snaps jelly I love I love powder jelly-o.
- - - -
- paraphonic unassessable foramination Caulopteris worral Spirophyton encrimson esparcet aggerate chondrule restate whistler shallopy biosystematy area bertram plotting unstarting quarterstaff.
-Tart I love sugar plum I love oat cake. Sweet roll caramels I love jujubes. Topping cake wafer.
-November 15, 2015
-New York, USA
-bucketful@fiendhead.org
-www.pixinvent.com
-{{ page.title | capitalize }}
- {{ page.type | capitalize }} -{{ feed.content }}
- - {{ feed.time | date(true) }} -{{ post.text }}
-{{ friend.name }}
- {{ friend.mutualFriends }} Mutual Friends -Please enter your new password.
-
- 
- {{ knowledgePanel.description }}
-{{ info.title }}
- {{ info.subtitle }} -People also search for
-Welcome back, please login to your account.
-Fill the below form to create a new account.
-Account is connected with Google.
-john@gmail.com
-Account is connected with facebook.
-@pixinvents
-Allowed JPG, GIF or PNG. Max size of 800kB
-+ فایل را درگ کنید یا اینکه کاوش کنید. +
++ فایلی که بارگذاری می کنید باید زیر ۵ مگابایت باشد. +
++ فایل را درگ کنید یا اینکه کاوش کنید. +
++ فایلی که بارگذاری می کنید باید زیر ۵ مگابایت باشد. +
++ فایل را درگ کنید یا اینکه کاوش کنید. +
++ فایل را درگ کنید یا اینکه کاوش کنید. +
++ فایل را درگ کنید یا اینکه کاوش کنید. +
++ فایلی که بارگذاری می کنید باید زیر ۵ مگابایت باشد. +
++ فایل را درگ کنید یا اینکه کاوش کنید. +
++ تصویر که بارگذاری می کنید باید زیر ۵ مگابایت باشد. +
+___
-{{ text.record.adv.sts_str }}
- - -{{ text.record.store.sts_str }}
- - -{{ text.record.ipc.sts_str }}
- - -حذف شده
- - -+ فایل را درگ کنید یا اینکه کاوش کنید. +
++ فایلی که بارگذاری می کنید باید زیر ۵ مگابایت باشد. +
+- فایل را درگ کنید یا اینکه کاوش کنید. -
-- فایلی که بارگذاری می کنید باید زیر ۵ مگابایت باشد. -
-| Action | -Icon | -Detail | -
|---|---|---|
| Collapse | -Collapse card content using collapse action. | -|
| Refresh Content | -Refresh your card content using refresh action. | -|
| Remove Card | -Remove card from page using remove card action | -
You can create collapsible content card by setting collapse-action prop to true. By default it is set to false.
You can also get this action if you set action-buttons prop to true.
Click on
You can add remove card action by setting remove-card-action prop to true. By default it is set to false.
You can also get this action if you set action-buttons prop to true.
Click on
You can add refresh content action by setting refresh-content-action prop to true. By default it is set to false.
You can also get this action if you set action-buttons prop to true.
Click on
You can add all three action by setting action-buttons prop to true. By default it is set to false.
Click on
Click on
Click on
- {{ key }} - {{ val }} -
-This Month
-${{ revenueComparisonLine.analyticsData.thisMonth.toLocaleString() }}
-Last Month
-${{ revenueComparisonLine.analyticsData.lastMonth.toLocaleString() }}
-Completed
-{{ goalOverview.analyticsData.completed.toLocaleString() }}
-In Progress
-{{ goalOverview.analyticsData.inProgress.toLocaleString() }}
-- - + - {{ salesBarSession.analyticsData.comparison.result }} - - vs - {{ salesBarSession.analyticsData.comparison.str }} -
- -{{ todoToday.numComletedTasks }} task completed out of {{ todoToday.totalTasks }}
-{{ todo.task }}
- {{ todo.date }} -- + - {{ funding.comparison.resultPerc }}% - (${{ funding.comparison.pastData }}) -
-{{ card_1.subtitle }}
-{{ card_1.subtitle_2 }}
-{{ card_2.subtitle }}
-{{ card_2.footer_text_left_value }}
-{{ card_2.footer_text_left_label }}
- - -{{ card_2.footer_text_right_value }}
-{{ card_2.footer_text_right_label }}
- -{{ card_4.profession }}
-{{ card_5.profession }}
-{{ card_5.user_meta_1_title }}
- {{ card_5.user_meta_1_label }} - - -{{ card_5.user_meta_2_title }}
- {{ card_5.user_meta_2_label }} - - -{{ card_5.user_meta_3_title }}
- {{ card_5.user_meta_3_label }} - -{{ card_6.profession }}
-Lollipop chocolate cake muffin pudding biscuit cheesecake. Pudding biscuit caramels jelly beans caramels. Pie macaroon wafer danish sweet caramels. Icing jelly-o cotton candy sweet roll brownie marshmallow marzipan icing. Candy canes apple pie icing. Tart macaroon pastry caramels chocolate bar. Gummies cupcake sesame snaps chocolate cookie sugar plum bear claw. Cheesecake chocolate cake dessert bear claw candy tiramisu soufflé.
-Wafer sesame snaps toffee brownie liquorice danish icing fruitcake croissant. Gingerbread chocolate cake danish pie gingerbread. Muffin donut fruitcake powder jelly lemon drops cheesecake. Croissant oat cake carrot cake tiramisu halvah. Cupcake cupcake wafer muffin topping danish cheesecake croissant. Liquorice donut liquorice lollipop sesame snaps lollipop ice cream macaroon danish. Cupcake chocolate cake chupa chups gummi bears macaroon.
-Cookie cheesecake fruitcake sweet roll gummi bears marzipan marshmallow marshmallow. Cheesecake muffin jujubes chocolate cake carrot cake jujubes croissant. Cake toffee carrot cake topping oat cake lemon drops toffee toffee marzipan. Gingerbread toffee marshmallow marshmallow caramels brownie donut cake. Cheesecake candy topping tart cotton candy chocolate bar jujubes powder chupa chups. Cupcake candy soufflé jelly beans. Icing lollipop tiramisu oat cake dessert.
-Powder halvah dragée. Powder cupcake bear claw cookie sugar plum. Danish sesame snaps sugar plum brownie. Carrot cake fruitcake chocolate cake jelly beans toffee. Icing chocolate brownie. Biscuit candy canes jelly-o bonbon wafer jujubes. Chocolate cake sweet roll jelly-o chocolate bar. Liquorice tootsie roll ice cream sweet. Candy pie donut caramels bonbon macaroon dragée chupa chups gingerbread. Dragée fruitcake jujubes. Brownie caramels muffin caramels jelly apple pie.
-Cotton candy dessert dragée bonbon jelly beans icing sweet roll. Sesame snaps cake dessert chupa chups sweet powder biscuit. Jelly beans caramels croissant cheesecake. Liquorice chocolate cake macaroon cake. Fruitcake croissant carrot cake cookie halvah sesame snaps toffee. Cake tootsie roll cake jelly beans croissant sugar plum jujubes. Bear claw sesame snaps lollipop. Pudding biscuit donut sweet roll pie apple pie wafer jelly beans brownie. Lemon drops ice cream candy canes soufflé muffin.
-Bear claw sesame snaps lollipop. Pudding biscuit donut sweet roll pie apple pie wafer jelly beans brownie. Lemon drops ice cream candy canes soufflé muffin. Caramels cookie macaroon sweet roll muffin liquorice brownie pie. Cupcake tootsie roll cupcake candy brownie icing bear claw jujubes cupcake. Marzipan pastry sesame snaps cotton candy chocolate cake tiramisu. Wafer apple pie cotton candy cotton candy icing.
-Gingerbread dessert apple pie. Bear claw cake ice cream cookie. Toffee jujubes jelly beans cookie muffin. Wafer sugar plum bonbon sweet roll chocolate cake pie tootsie roll jelly chocolate. Apple pie oat cake chocolate cake toffee lollipop sesame snaps chocolate bar. Chocolate liquorice pudding fruitcake toffee topping liquorice. Wafer topping cotton candy dessert carrot cake cotton candy. Pudding chocolate cake dragée cupcake. Pastry marzipan donut. Ice cream chocolate tart chupa chups liquorice marshmallow sweet roll jelly soufflé.
-Liquorice croissant chocolate chocolate cake. Bonbon dessert carrot cake fruitcake pudding sugar plum sweet gummies bear claw. Gummies marshmallow chocolate cake. Jelly icing cake carrot cake. Gummies marshmallow chocolate carrot cake lemon drops. Soufflé gingerbread cupcake chupa chups dragée halvah toffee liquorice. Jelly-o pie ice cream ice cream pudding sweet.
-Jelly-o soufflé danish jelly-o jujubes oat cake caramels chocolate. Danish jelly chocolate bar jelly jujubes gummies halvah. Candy jujubes jujubes cheesecake bear claw sesame snaps cheesecake gingerbread. Toffee bonbon candy canes macaroon candy lollipop dragée. Brownie lemon drops chocolate cake pastry jelly biscuit.
-Chocolate cake brownie candy canes marzipan. Chocolate cake powder jujubes bonbon tart cake bonbon sweet roll. Carrot cake sweet dragée ice cream pie candy canes sesame snaps tart halvah. Lemon drops pastry tart candy. Caramels jelly beans dessert dessert cupcake lollipop cake cotton candy. Pudding chupa chups ice cream tiramisu liquorice. Lollipop jelly pie tiramisu pudding marshmallow.
-Bear claw liquorice candy liquorice chocolate cake wafer. Gummi bears muffin cake icing pastry marshmallow lemon drops sweet chocolate. Marzipan apple pie jelly beans marshmallow jelly-o. Brownie danish bear claw. Dragée oat cake marzipan fruitcake caramels croissant tootsie roll cupcake sesame snaps. Cheesecake jujubes gingerbread apple pie bonbon caramels chocolate bar.
-Cheesecake pie lollipop dragée candy icing jujubes fruitcake. Apple pie caramels apple pie gingerbread danish candy canes brownie liquorice topping. Icing dragée donut jelly caramels cake. Toffee gummi bears ice cream apple pie. Jujubes candy marzipan lollipop tiramisu biscuit apple pie liquorice. Lemon drops icing gummies cake marshmallow.
-Brownie marshmallow halvah wafer tart jelly. Chocolate cake apple pie halvah brownie pastry icing pudding marshmallow. Jelly beans candy canes sesame snaps chocolate cake sesame snaps chocolate cake candy tiramisu. Caramels sesame snaps candy canes cheesecake. Chocolate bar pie pastry liquorice tart. Cupcake biscuit cupcake halvah tiramisu muffin.
-You can use title-color prop to change color of title of card. This prop supports hex, rgba, rgb and theme colors.
Oat cake powder sesame snaps. Chocolate bar dessert bonbon chocolate bar pudding apple pie muffin chocolate ice cream. I love bear claw I love.
- - -<vx-card - title="Title Color" - title-color="primary" - subtitle="Brownie pastry chocolate pastry chocolate pudding."> - <p class="mb-3">You can use <code>title-color</code> prop to change color of title of card. This prop supports hex, rgba, rgb and theme colors.</p> - <p class="mb-3">Oat cake powder sesame snaps. Chocolate bar dessert bonbon chocolate bar pudding apple pie muffin chocolate ice cream. I love bear claw I love.</p> -</vx-card> - -You can use title-color prop to change color of title of card. This prop supports hex, rgba, rgb and theme colors.
Oat cake powder sesame snaps. Chocolate bar dessert bonbon chocolate bar pudding apple pie muffin chocolate ice cream. I love bear claw I love.
- - -<vx-card - title="Title Color" - title-color="success" - subtitle="Brownie pastry chocolate pastry chocolate pudding."> - <p class="mb-3">You can use <code>title-color</code> prop to change color of title of card. This prop supports hex, rgba, rgb and theme colors.</p> - <p class="mb-3">Oat cake powder sesame snaps. Chocolate bar dessert bonbon chocolate bar pudding apple pie muffin chocolate ice cream. I love bear claw I love.</p> -</vx-card> - -You can use subtitle-color prop to change color of subtitle of card. This prop supports hex, rgba, rgb and theme colors.
You can use content-color prop to change color of title of card. This prop supports hex, rgba, rgb and theme colors.
You can use card-background prop to change background color of card. This prop supports hex, rgba, rgb and theme colors.
-Oat cake powder sesame snaps. Chocolate bar dessert bonbon chocolate bar pudding apple pie muffin chocolate ice cream. I love bear claw I love.
- - -<vx-card - title="Background Color" - title-color="#fff" - card-background="primary" - content-color="#fff"> - <p class="mb-3">You can use <strong>card-background</strong> prop to change background color of card. This prop supports hex, rgba, rgb and theme colors.</p> - <p class="mb-3">Oat cake powder sesame snaps. Chocolate bar dessert bonbon chocolate bar pudding apple pie muffin chocolate ice cream. I love bear claw I love.</p> -</vx-card> - -You can use card-background prop to change background color of card. This prop supports hex, rgba, rgb and theme colors.
-Oat cake powder sesame snaps. Chocolate bar dessert bonbon chocolate bar pudding apple pie muffin chocolate ice cream. I love bear claw I love.
- - -<vx-card - title="Background Color" - title-color="#fff" - card-background="success" - content-color="#fff"> - <p class="mb-3">You can use <strong>card-background</strong> prop to change background color of card. This prop supports hex, rgba, rgb and theme colors.</p> - <p class="mb-3">Oat cake powder sesame snaps. Chocolate bar dessert bonbon chocolate bar pudding apple pie muffin chocolate ice cream. I love bear claw I love.</p> -</vx-card> - -You can use card-background prop to change background color of card. This prop supports hex, rgba, rgb and theme colors.
-Oat cake powder sesame snaps. Chocolate bar dessert bonbon chocolate bar pudding apple pie muffin chocolate ice cream. I love bear claw I love.
- - -<vx-card - title="Gradient Background Color" - title-color="#fff" - content-color="#fff" - card-background="linear-gradient(120deg, #7f7fd5, #86a8e7, #91eae4)"> - <p class="mb-3">You can use <strong>card-background</strong> prop to change background color of card. This prop supports hex, rgba, rgb and theme colors.</p> - <p class="mb-3">Oat cake powder sesame snaps. Chocolate bar dessert bonbon chocolate bar pudding apple pie muffin chocolate ice cream. I love bear claw I love.</p> -</vx-card> - -You can use card-background prop to change background color of card. This prop supports hex, rgba, rgb and theme colors.
-Oat cake powder sesame snaps. Chocolate bar dessert bonbon chocolate bar pudding apple pie muffin chocolate ice cream. I love bear claw I love.
- - -<vx-card - title="Gradient Background Color" - title-color="#fff" - content-color="#fff" - card-background="linear-gradient(to right, #56ab2f, #a8e063)"> - <p class="mb-3">You can use <strong>card-background</strong> prop to change background color of card. This prop supports hex, rgba, rgb and theme colors.</p> - <p class="mb-3">Oat cake powder sesame snaps. Chocolate bar dessert bonbon chocolate bar pudding apple pie muffin chocolate ice cream. I love bear claw I love.</p> -</vx-card> - -You can use card-background prop to change background of card. This prop supports hex, rgba, rgb and theme colors.
-Oat cake powder sesame snaps. Chocolate bar dessert bonbon chocolate bar pudding apple pie muffin chocolate ice cream. I love bear claw I love.
- - -<template> - <vx-card - title="Gradient Background Image" - title-color="#fff" - content-color="#fff" - :card-background="'linear-gradient(120deg ,rgba(109,213,237,.8), rgba(33,147,176,0.5)), url(' + card_bg_img_1 + ')'" - code-toggler> - <p class="mb-3">You can use <strong>card-background</strong> prop to change background of card. This prop supports hex, rgba, rgb and theme colors.</p> - <p class="mb-3">Oat cake powder sesame snaps. Chocolate bar dessert bonbon chocolate bar pudding apple pie muffin chocolate ice cream. I love bear claw I love.</p> - </vx-card> -</template> - -<script> -export default{ - data() { - return { - card_bg_img_1: require('@/assets/images/pages/card-bg-image-demo-1.jpg') - } - } -} -</script> - -You can use card-background prop to change background of card. This prop supports hex, rgba, rgb and theme colors.
-Oat cake powder sesame snaps. Chocolate bar dessert bonbon chocolate bar pudding apple pie muffin chocolate ice cream. I love bear claw I love.
- - -<template> - <vx-card - title="Gradient Background Image" - title-color="#fff" - content-color="#fff" - :card-background="'linear-gradient(120deg ,rgba(247,97,161,0.5), rgba(140,27,171,.8)), url(' + card_bg_img_2 + ')'" - code-toggler> - <p class="mb-3">You can use <strong>card-background</strong> prop to change background of card. This prop supports hex, rgba, rgb and theme colors.</p> - <p class="mb-3">Oat cake powder sesame snaps. Chocolate bar dessert bonbon chocolate bar pudding apple pie muffin chocolate ice cream. I love bear claw I love.</p> - </vx-card> -</template> - -<script> -export default{ - data() { - return { - card_bg_img_2: require('@/assets/images/pages/card-bg-image-demo-2.jpg') - } - } -} -</script> - -You can change the color of the application in process of execution with the function $vs.theme which as a parameter requires a json with the colors to change
- -Imagine that in the middle of the application we want the primary color change would be something like this:
- -By doing this, all Vuesax components and other components which uses primary color in the application will change. Select one of the colors to change it and that all the components of this application will have that color.
- -To change the main colors in SSR (Server-Side Rendering) for example if you are using nuxt.js the main variables of stylus and those of css
- -To change the variables we must first import them into a .styl file and change the values of the variables by the colors required
- -In order to change the variables and use them you have to have implemented the stylus loaders, to implement them by npm would be something like this
-
- 
- 
- npm i stylus stylus-loader --save-dev
-
-
- The value of the colors can only be RGB and nothing else is added to the number without the letters rgb or the parentheses
For example if the color is rgb(50,100,200) the value to be implemented is only: 50,100,A
The stylus variables of the main colors are:
- -And the css variables are:
-We almost always need a personalized application with own colors. In Vuesax, you can change the main colors to those that you need and the branding that your application has.
- -You can change default colors using themeColors.js file. You can find this file in src folder.
We have a series of colors that are used by default. They include:
- -For each color, we think has its functionality in the application as alerts of errors (danger), warnings to the user (warning), communications of approval (success), or main color of the application (primary).
- -We have make gradient color based on our default color:
- -For each color, we think has its functionality in the application as alerts of errors (danger), warnings to the user (warning), communications of approval (success), or main color of the application (primary).
- -text-{color} and bg-{color} for text color and background color.
-
- You can add more colors in tailwind.js file. You can find this file in root folder.
text-secondary and bg-secondary in theme
- bg-{color} for applying default colors to background. bg-white, bg-black, bg-transparent
-
- text-{color} for applying default colors to text. text-white, text-black, text-transparent
-
- {{ tr.name }}
-{{ tr.category | title }}
-${{ tr.price }}
-{{ tr.name }}
-{{ tr.category }}
-${{ tr.price }}
-Use flex-1 instead of an explicit width on your columns to have them size automatically to fill the row
Use the existing Flexbox and percentage width utilities to construct basic grids
- -Use flex-row-reverse to reverse column order. Useful for two-column responsive layouts where the column on right should appear first on smaller screens
Add a negative horizontal margin like -mx-2 to your column container and an equal horizontal padding like px-2 to each column to add gutters
To prevent horizontal scrolling in full width layouts, add overflow-hidden to another parent container, or compensate for the negative margin with matching horizontal padding
Mix different percentage width utilities to build mixed size grids
- -Use the responsive variants of the width utilities to build responsive grid layouts
- -Use auto margin utilities like ml-auto and mr-auto to offset columns in a row
Add flex-wrap to your column container to allow columns to wrap when they run out of room
To give a distance with respect to the left we have the directive vs-offset that with the same measures 1-12 we add the space specified a serious example 12 = 100%, 6 = 50%, 4 = 25%
With the directive vs-w define the width of the column (vs-col) its value is 1-12 an example of sizes would be: 12 = 100%, 6 = 50%, 4 = 25%
To align the elements vertically we have the directive vs-align that as parameters the same known values of css: center, flex-end, flex-start.
If we need to align the elements horizontally, use the vs-justify directive that uses CSS attributes as parameters: flex-start, center, flex-end, space-around, space-between
In some cases, we want to order the elements to our liking. To do this, use the directive vs-order that has a parameter you just have to pass the number in which we want to order the vs-col with respect to his brothers vs-col
Following is a brief look at how it works:
-There are some measures that can only be added in a specific size of the device, the directives are:
- -To implement a data table we have the component vs-table, also sub components and slots for a better management of the structure and operation
- -In order to manipulate the data within the table, it is necessary to add the property: data="myDataTable" and thus be able to use the slot-scope="{data}"
You can edit the data with slot edit, so you have better flexibility and mastery of what you need
You can add the functionality of expanding a tr to visualize more data to make a structure of data or more complex functionalities
You can add the Filter functionality by adding the search property.
if you need a property to be sorted you just have to add the sort-key property and the value you need to be sorted.
You can add a filtered, sorted, paginated and multi selected table with combination of the search, multiple and pagination properties for example
To select multiples tr we have the property multiple and each of the selected items will be added to the v-model
if you need to execute a certain function to select the user, we have the property @selected, as the first parameter the data is returned
You can add a paginated table with the pagination property
- -by default the maximum number of elements per page is 5 to change it using the max-items property
-To create table with SSR support just add sst prop and then handle appropriate events like searching, sorting & pagination.
You can add the functionality of select a specific tr to do this add the property data with the value to be selected, it is usually the triterated
if you need to execute a certain function to select the user, we have the property @selected, as the first parameter the data is returned
There are times when we need to add a state to our tr in the table so we have the property state inside the component vs-tr
You can have a sebra effect by adding the property stripe
صفحه در حال به روزرسانی می باشد.
- - - - - \ No newline at end of file diff --git a/src/views/users/create.vue b/src/views/users/create.vue index 2ab5ff7..594ef13 100644 --- a/src/views/users/create.vue +++ b/src/views/users/create.vue @@ -19,7 +19,7 @@آیا مطمئن به حذف رکورد مورد نظر هستید ؟
- -
--
-
-
-
-
-
-
-
-
- - View All{{ commentedUser.author }}
- {{ commentedUser.comment }} -