fmihel-windeco-components v1.39.0
windeco-components
react components for windeco\
v2.0
1. Btn - кнопка 2. Edit - поле ввода 3. Label - метка 4. CheckBox - флажок 5. ComboBox - раскрываемый список 6. *TableFixed - расширенная таблица ( с фиксируемым заголовком) 7. *ModalDialog - Модальный диалог 8. *Modal - обертка для модальных диалогов 9. *Waiter - блокиратор экрана на ввод 10. *BtnIcon - кнопка c иконкой 11. *Text - многострочный текст 12. *Icon - иконка
* - неотредактированные главы
Btn
<Btn>name</Btn>
<Btn value="name"/>
property
prop | type | default | notes |
---|---|---|---|
id | any | undefined | идентификатор |
value | string | undefined | надпись на кнопке, можно задать через children |
onClick | function | undefined | onclick событие |
className | string | Btn.global.className | класс css |
addClass | string | Btn.global.addClass | добавочный класс, результирующий будет к "${className} ${addClass} " |
title | string | подсказка title |
global
Btn.global = {
className: 'wd-btn',
addClass: '',
};
Глобальные параметры можно переопределить, для изменения значений, используемых по умолчанию.
\
Example:
Btn.global = {
...Btn.global,
className:'my-btn'
}
Edit
<Edit>name</Edit>
<Edit value="name" />
property
prop | type | default | notes |
---|---|---|---|
id | any | undefined | идентификатор |
type | string | text | тип поля text,password |
value | string | undefined | значение отображаемое в поле |
min | number | undefined | миниамальное значение для type=number or range |
max | number | undefined | максимальное значение для type=number or range |
step | number | undefined | шаг для type=number or range |
onChange | function({id,value}) | undefined | событие на изменение |
onKeyPress | function({key,id,value,args}) | undefined | событие после нажатия клавиши,args - оригинальные аргументы |
onKeyUp | function({key,id,value,args}) | undefined | событие после прижатия клавиши,args - оригинальные аргументы |
onKeyDown | function({key,id,value,args}) | undefined | событие после отжатия клавиши,args - оригинальные аргументы |
className | string | Edit.global.className | класс css |
addClass | string | Edit.global.addClass | добавочный класс, результирующий будет к "${className} ${addClass} " |
style | {} | Edit.global.style | стиль css |
disabled | bool | false | отключить возможность редактировния и фокуса |
readonly | bool | false | только для чтения |
required | bool | false | включает подсветку для незаполненных полей |
placeholder | string | текст в незаполненном поле | |
visible | bool | true | признак display |
title | string | подсказка title | |
minLength | number | 0 | максимальное кол-во вводимых символов, если 0 то без ограничений |
global
Edit.global = {
className: 'wd-edit',
addClass: '',
style: {},
};
Label
<Label style={{color:'red'}}>
<Edit>name</Edit>
</Label>
property
prop | type | default | notes |
---|---|---|---|
id | any | undefined | идентификатор |
labelName | string | undefined | идентификатор управляемого Edit |
caption | string | отображаемый текст | |
className | string | Label.global.className | класс css фрейма |
addClass | string | Label.global.addClass | класс добавляемый в фрейм label |
style | object | Label.global.style | стиль css добавляемый в label |
global
Label.global = {
className: 'wd-label',
classAdd: '',
style: {},
};
CheckBox
<Checkbox checked={true} onChange={this.onChange}/>
property
prop | type | default | notes |
---|---|---|---|
id | any | undefined | идентификатор |
checked | boolean | false | нажата или нет |
onChange | function({id,checked,value}) | undefined | событие на изменение |
className | string | CheckBox.global.className | класс css |
addClass | string | CheckBox.global.addClass | добавочный класс, результирующий будет к "${className} ${addClass} " |
style | {} | CheckBox.global.style | стиль css |
disabled | num | 0 | блокировка на ввод |
visible | bool | true | признак display |
hint | string | подсказка title |
global
CheckBox.global = {
className: 'wd-checkbox',
addClass: '',
style: {},
};
ComboBox
Ex:1
<ComboBox
onChange={()={
}}
list = {[
{ id: 1, caption: 'text1' },
{ id: 2, caption: 'text2' },
{ id: 3, caption: 'text3',_disabled_:true },
{ id: 4, caption: 'text4' },
]}
required={true}
/>
property
prop | type | default | notes |
---|---|---|---|
id | any | undefined | идентификатор |
aliasId | string | ComboBoxEx.global.aliasId | имя ключевого поля |
aliasCaption | string | ComboBoxEx.global.aliasCaption | имя поля к отображению |
aliasDisabled | string | ComboBoxEx.global.aliasDisabled | имя поля для указания, что строка неактивна |
onChange | function({id,data}) | undefined | событие на изменение |
className | string | ComboBox.global.className | класс css |
addClass | string | ComboBox.global.addClass | добавочный класс, результирующий будет к "${className} ${addClass} " |
style | {} | ComboBox.global.style | стиль css |
styleOuter | {} | undefined | стиль css добавляемый к постоянно отображаемому компоненту ItemComponent |
styleItem | {} | undefined | стиль css добавляемый компоненту ItemComponent используемомум в раскрываемом списке |
list | array | [] | массив отображаемых данных |
disabled | bool | false | блокирует объект на ввод |
required | bool | false | добавляет атрибут required |
select | string | undefined | мдентификатор выбранной строки |
hideBtnOnSelect | bool | false | скрывает кнопку разворота при деактивации |
onGetItemClass | func | undefined | метод вызываемый при отрисовке элемента ItemComponent |
placeholder | string | ComboBox.global.placeholder | текст в пустом поле |
ItemComponent | React | ComboBox.global.ItemComponent | компонент используемый для отображение строк и поля выбора |
global
ComboBox.global = {
className: 'wd-combo',
addClass: '',
style: {},
classNameList: 'wd-combo-list',
addClassList: 'wd-scrollbar',
placeholder: '- выбрать -',
ItemComponent: ComboItem,
onGetItemClass: undefined,
aliasId: 'id',
aliasCaption: 'caption',
aliasDisabled: '_disabled_',
};
28 days ago
29 days ago
3 months ago
7 months ago
6 months ago
6 months ago
7 months ago
9 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
11 months ago
11 months ago
11 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 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
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
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago