Compare commits
2 Commits
75eed30d19
...
8fe132d7d1
Author | SHA1 | Date | |
---|---|---|---|
|
8fe132d7d1 | ||
|
6f4a7d23db |
39
README.md
39
README.md
@ -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
|
||||||
|
|
||||||
|
39
READMERU.md
39
READMERU.md
@ -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()` |
|
||||||
|
|
||||||
## История
|
## История
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user