e-lib-components v0.8.7
Components library install
npm i e-library-components
Usage
В main.js импортируем библиотеку
import ecomponents from 'e-library-components';
Далее пишем
Vue.use(ecomponents);
Button
Customization Props
- Size
- s
- m
- l
- xl
- Variant
- primary
- outline-primary
- link
- default
- Plus svg (Boolean) - added plus in button
Use this code, for embedding
<e-button variant="primary" size="m" @click="yourMethod"> yourtext</e-button>
Input
Customization Props
- placeholder - String value - enter the text you need for the input
<e-input placeholder="Search" />
- type - String value - input type text, number, password, etc.
<e-input type="password" />
searchIcon - Boolean value(default - true) responsible for displaying the search icon
<e-input :searchIcon="false" />
error_text - text your error
<e-input error_text="Its my error text" />
error - Boolean value(default - false) highlights the input in red color
<e-input :error="true" />
- label - String value - showing the label over the input
<e-input label="Label" />
Dropdown
Customization Props
position - String(top, bottom - default)
Slots
- button -Replaces the button component with your
- text-button - Replaces text in button
items - use `
js <e-dropdown-item @click="clickMethod">Text
<template>
<e-dropdown position="top">
<template #button>
// Replaces the button component with your
<e-button>Dropdown</e-button>
</template>
<template #text-button> // Replaces text in button Dropdown2</template>
<template #items>
// Add your elements dropdown
<e-dropdown-item @click="clickMethod">Text</e-dropdown-item>
</template>
</e-dropdown>
</template>
<script>
import EDropdownItem from './EDropdownItem';
export default {
components: {EDropdownItem},
};
</script>
Resizable Table
Props
- show_table_header_slot: type: Boolean, default: false
- foot: type: Boolean, default: false
- default_fields: default: () => [], type: []
- items: default: () => [], type: Array
- empty_text: type: String, default: 'Ничего не найдено'
- busy: type: Boolean, default: true
- show_product_search: Boolean
- table_name: type: String, required: true
Directive
v-table-resize - be sure to use it so that the table can change size
How to use this component
<div style='width: 100%; height: 100vh; display: flex;'>
<div style='overflow: hidden; display: flex; flex-direction: column; flex: 1'>
<resizable-table
style='display: flex;'
table_name="table_name" v-table-resize
@resize="(e) => yourMethod"
v-bind="$props">
<template #body_code>2222</template>
</resizable-table>
</div>
</div>
Use this code, for embedding
<e-input :props="props"/>
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
11 months ago
12 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
11 months ago
12 months ago
12 months ago
11 months ago
12 months ago
12 months ago
11 months ago
12 months ago
12 months ago
12 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
11 months ago
11 months ago
12 months ago
11 months ago
12 months ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
11 months ago
11 months ago
12 months ago
11 months ago
12 months ago
11 months ago
12 months ago
12 months ago
12 months ago
11 months ago
12 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago