Compare commits

...

2 Commits

Author SHA1 Message Date
MaxOvs19
8fe132d7d1 Fix readme 2023-04-25 12:40:13 +03:00
MaxOvs19
6f4a7d23db Fixed Readme 2023-04-25 12:33:26 +03:00
2 changed files with 74 additions and 4 deletions

View File

@ -108,6 +108,41 @@ const App = () => {
}; };
``` ```
### An example of initialization a CGSelect in Vue.
```javascript
<template>
<div>
<button class="cg-dropdown cg-dropdown_selector"></button>
</div>
</template>
<script>
import CGSelect from "cg-select";
export default {
mounted() {
const drop = new CGSelect({
selector: ".cg-dropdown_selector",
placeholder: "Выберите авто",
items: [
"BMW",
{
id: "213sade",
title: "Opel",
value: 1,
},
"Mersedes",
"MAN",
"Ferari",
],
});
console.log(drop);
},
};
</script>
```
## Example of different selects ## Example of different selects
<a href="https://cg-select.itguild.info/">View live example</a> <a href="https://cg-select.itguild.info/">View live example</a>
@ -132,8 +167,8 @@ All documentation on CG-SELECT is located in the folder of the same name. The do
| Application Compatibility | JS | React | Angular | Vue | | Application Compatibility | JS | React | Angular | Vue |
| ------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: | | ------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: |
| CG-SELECT | <img src="src/images/yes.png"></img> | <img src="src/images/yes.png"></img> | </img> <img src="src/images/no.png"></img> | </img> <img src="src/images/no.png"></img> | | CG-SELECT | <img src="src/images/yes.png"></img> | <img src="src/images/yes.png"></img> | </img> <img src="src/images/no.png"></img> | </img> <img src="src/images/yes.png"></img> |
| Comment | Tested in Js applications and it works. | The select is initiated inside the `useEffect() `hook | not yet available | not yet available | | Comment | Tested in Js applications and it works. | The select is initiated inside the `useEffect() `hook | not yet available | The select is initiated inside the `mounted() `hook |
## History ## History

View File

@ -109,6 +109,41 @@ const App = () => {
}; };
``` ```
### Пример инициализации CGSelect в Vue.
```javascript
<template>
<div>
<button class="cg-dropdown cg-dropdown_selector"></button>
</div>
</template>
<script>
import CGSelect from "cg-select";
export default {
mounted() {
const drop = new CGSelect({
selector: ".cg-dropdown_selector",
placeholder: "Выберите авто",
items: [
"BMW",
{
id: "213sade",
title: "Opel",
value: 1,
},
"Mersedes",
"MAN",
"Ferari",
],
});
console.log(drop);
},
};
</script>
```
## Примеры различных вариантов выбора. ## Примеры различных вариантов выбора.
<a href="https://cg-select.itguild.info/">Рабочий пример</a> <a href="https://cg-select.itguild.info/">Рабочий пример</a>
@ -129,8 +164,8 @@ const App = () => {
| Совместимость в приложениях | JS | React | Angular | Vue | | Совместимость в приложениях | JS | React | Angular | Vue |
| --------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: | | --------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: |
| CG-SELECT | <img src="src/images/yes.png"></img> | <img src="src/images/yes.png"></img> | <img src="src/images/no.png"></img> | <img src="src/images/no.png"></img> | | CG-SELECT | <img src="src/images/yes.png"></img> | <img src="src/images/yes.png"></img> | <img src="src/images/no.png"></img> | <img src="src/images/yes.png"></img> |
| Комментарий | Протестировано в Js приложениях | Инициация селекта происходит внутри хука `useEffect()` | пока недоступно | пока недоступно | | Комментарий | Протестировано в Js приложениях | Инициация селекта происходит внутри хука `useEffect()` | пока недоступно | Инициация селекта происходит внутри хука `mounted()` |
## История ## История