chayns components
v4.20.24
Набор красивых компонентов React для разработки приложений Chayns®.
Сначала вы должны установить пакет chayns-components в свой проект:
# Yarn
yarn add chayns-components
# NPM
npm install chayns-components Стили для наших компонентов предоставляются через библиотеку chayns-css , и некоторые из компонентов также полагаются на API chayns-js , поэтому вы должны включить их в свой HTML:
<!-- CSS styles -->
< script
src =" https://api.chayns-static.space/css/v4/compatibility/compatibility.min.js "
version =" 4.2 "
> </ script >
<!-- JS api -->
< script src =" https://api.chayns-static.space/js/v4.0/chayns.min.js " > </ script > Следующие компоненты являются частью этого пакета:
| Компонент | Описание |
|---|---|
| Аккордеон › | Аккордеоны - это складные разделы, которые переключаются путем взаимодействия с постоянно видимым заголовком. |
| SummControl › | Количество Concontrol-это трехсегментный контроль, используемый для увеличения или уменьшения инкрементного значения. |
| AnimationWrapper › | AnimationWrapper обеспечивает привлекательную начальную анимацию для своих детей. |
| Значок > | Значки - это небольшие круглые контейнеры, используемые для украшения других компонентов с обезжиренной информацией. |
| Пузырь › | Плавающий пузырь, который в основном используется для питания ContextMenu и компонентов Tooltip . |
| Кнопка > | Кнопки инициируют действия, могут включать заголовок или значок и поставляться с набором предопределенных стилей. |
| Календарь › | Интерактивный календарь сетки, который может выделять указанные даты. |
| Флажок › | Флакторы позволяют пользователям выполнять задачи, которые включают в себя выбор, такие как выбор параметров. Может быть стилизован как переключатель, визуальный переключатель между двумя взаимоисключающими состояниями - включенным и выключенным. |
| Colorpicker › | Позволяет пользователю выбрать цвет для текста, форм, инструментов маркировки и других элементов. |
| Colorscheme › | Регулирует цветовую схему для всех дочерних компонентов. |
| Combobox › | Кнопка с выпаданием, которая содержит прокручиваемый список различных значений, из которых люди могут выбрать. |
| Контекстгену › | Дает людям доступ к дополнительной функциональности, связанной с элементами на экране, не загромождая интерфейс. |
| DateInfo › | Форматирует диапазон даты или даты, чтобы быть легко читаемым, и показывает абсолютную дату на Hover. |
| Emojiinput › | Текстовый вход, который позволяет вкладывать эмодзи. |
| ExpandableContent › | Складной раздел, который раскрывает его детей с переходом высоты. |
| FileInput › | Принимает указанные типы файлов через диалоговое окно или перетаскивание. |
| Filterbutton › | Чип-подобный компонент, который используется для фильтрации списков. Обычно используется в группе из 2 или более. |
| FormattedInput › | Текстовый вход, который автоматически форматирует свой вход с помощью форматера. Поскольку этот компонент основан на Input -компоненте, он принимает любую из реквизитов Input -компонентов, которые здесь не указаны. Этот компонент работает только как неконтролируемый компонент, а это означает, что он не занимает value . |
| Галерея › | Галерея изображений, которая по умолчанию отображает до четырех изображений. Также поддерживает переупорядочение и удаление изображений и размытые предварительные просмотра изображений для изображений, загруженных с tsimg.cloud . |
| Икона > | Отображает значок Fontawesome. |
| Imageaccordion › | Аккордеон, который имеет большой образ и появляется в сетке. Следует использовать внутри ImageAccordionGroup . |
| ImageaCcordionGroup › | Группируется несколько компонентов ImageAccordion вместе, поэтому только один из них может быть открыт за раз. |
| Вход > | Текстовый ввод, который может быть подтвержден и украшен различными дизайнами. |
| Список > | Обертка для ListItem -component для создания списков. |
| Список › | Элементы в списке для отображения связанных данных в структурированном формате. Следует использовать внутри компонента List . |
| Открытие времени › | Ввод для времени открытия. |
| Personfinder › | Поиск автозаполнения для лиц, которые могут быть настроены для работы с произвольными данными. |
| PositionInput › | Ввод местоположения с картой и вводом текста. Это требует API Google Maps JavaScript с включенной библиотекой мест. Вы можете найти больше информации об API карт здесь. |
| ProgressBar › | Анимированная панель прогресса, которая может показать прогресс действий или неопределенное состояние, как нагрузочный прядильщик. |
| Radiobutton › | Радиопроизводительная кнопка, которая позволяет выбрать один из нескольких параметров. |
| Rfidinput › | Компонент для получения сигнала RFID. |
| Scrollview › | Прокручиваемый контейнер с индивидуальной прокруткой, который отлично смотрится на каждом устройстве. |
| Searchbox › | Автозаполненный ввод для поиска через список записей. |
| SELECTBUTTON › | Кнопка выберите, которая открывает диалоговое окно выбора при нажатии. |
| SelectItem › | Радиобатовая, которая расширяет его контент при выборе. Следует использовать внутри SelectList . |
| SelectList › | Вертикальный список радиопроизводительных кнопок, которые показывают контент при выборе. |
| SetupWizard › | Набор шагов, которые пользователь должен пройти последовательно. |
| Setupwizarditem › | Предмет, который представляет один шаг в SetupWizard . |
| Sharingbar › | Контекстное меню для обмена ссылкой и некоторым текстом на различных платформах. |
| Подпись > | Компонент, позволяющий пользователю подписаться |
| Слайдер › | Горизонтальная дорожка с большим пальцем, которая может быть перемещена между минимумом и максимальным значением. |
| Sliderbutton › | Линейный набор кнопок, которые являются взаимоисключающими. |
| SmallWaitCursor › | Небольшой индикатор круговой нагрузки. |
| Тагинпут › | Текстовый вход, который позволяет сгруппировать значения как теги. |
| Textarea › | Многослонный текстовый вход, который может автоматически расти с его содержанием. |
| Текстовые текстовые терапии › | Загружает текстовые строки из нашей базы данных и отображает их. Обрабатывает замены и изменение строки через CTRL + Click (только внутренний). |
| Подсказка › | Окутает дочерний компонент и отображает сообщение, когда ребенка падают или нажимают. Позволяет показать императивно, вызывая .show() или .hide() на его ссылке. |
| VerificationIcon › |
Мы также предоставляем набор общих функций утилиты:
| Функция | Описание |
|---|---|
| ImageUpload | Функция для загрузки изображений на tsimg.cloud |
| istobitemployee | Получите информацию, если пользователь является сотрудником TOBIT |
| CreateLinks | Создает строку со ссылками из строки с URL -адресами |
| Удалить | Удаляет теги HTML из строки |
| Colorutils | Функции утилиты для преобразования значений цвета (HEX, RGB, HSV) |
| эквалайзер | Полезные функции для выравнивания ширины HTML -элементов |
Если вы хотите внести свой вклад в chayns-components , ознакомьтесь с файлом anpoing.md.
