tpk-ui
Ui components (input, textarea, radio, checkbox, select, modal, flash messages, tooltips, etc.), with tailwindcss 1.* for ember
Compatibility
- Ember.js v3.16 or above
- Ember CLI v2.13 or above
- Node.js v10 or above
Installation
ember install tpk-ui
Install will automaticaly install the validator package for the validation.
❓ This addon is using ember-base-form-validation for validation of inputs and most of components extends BaseValidationInputComponent class and so must be linked to a BaseValidationFormComponent by the @parent
attribute.
Available inputs components
- TpkTimepicker
- TpkInput
- TpkTextarea
- TpkRadioGroup
- TpkCheckboxGroup
- TpkSelect
Other components
- TpkFlash
- TpkBubble
- TpkModal
- TpkSlider
Full example
@value: valeur à traiter @mode 12 || 24 sytème horaire à 12 (AM/PM) ou 24h - 24 par défaut @isDate la valeur est une date (true/false) - false par défaut {{#if i.error}} {{i.error}} {{/if}} {{#if i.error}} {{i.error}} {{/if}} {{!-- Action on group change --}} {{!-- Action on particular radio input --}} {{#if R.error}} {{R.error}} {{/if}} {{@model.active}} {{!-- Action on group change --}} {{!-- Action on particular checkbox input --}} {{#if R.error}} {{R.error}} {{/if}} {{@model.colors}} Select with plain array ['admin','user'] {{@model.role}} Select with array of objects [{id: 1, name: 'admin'},{id: 2, name: 'user'}] {{opt.args.option.name}} { id: {{@model.roleobj.id}}, name: {{@model.roleobj.name}} } {{#if tpkform.validating}} Validating... {{else}} {{/if}}
Other Components example
TpkFlash
In application template
In controller
@service tpkFlash;
Create flash message
;
type: Default "success"
sticky: Auto hide the flash message, default false
stageTime: If sticky false, time in milliseconds before the flash message removes itself
htmlSafe: Allow html safe tags in message, default false
message: Content of the flash message
customClose: Custom function called on close
Delete specific Flash Message
;
Full example
@action{ ;} @action{ ;}
Delete all Flash Message
;
TpkBubble
Tooltip container Tooltip content
@bubblePosition: top || bottom, left || right
possible to combine one vertical and one horizontal axis. eg. "top left", "bottom right"
TpkModal
Open Modal Content
@action{ ;} @action{ ;}
License
This project is licensed under the MIT License.