Crowdin UIKit created for help create new web interface of integrations.

Just copy web-component code and use it on your page

Some crowdin-h1 title Some crowdin-h2 title Some crowdin-h3 title Some crowdin-h4 title Some crowdin-h5 text Some crowdin-p base text Some link
Some external link

Crowdin also provide simple api to get nice custom material icons.
To use it just copy text representation from https://material.io/resources/icons/?search=c&icon=supervisor_account&style=round
And place that text representation beetwin crowdin-font-icon open/close tag. As always font-icons support easy way to change it size and color or icon at all, by changing text representation search autorenew backup done code contactless done_all If you need some dynamic icon that represent some working progress just copy next part of code

Also we have nice styled buttons.
Few type of buttons 'primary', 'secondary', 'outlined' and 'icon'
You can disable each button, add icon to button or make button in-progress You can grab text icon representations from
https://material.io/resources/icons/?search=c&icon=supervisor_account&style=round To use crowdin-button just copy and paste button code representation, change text on it, change is-loading, disable flags...
If you need some icon, add icon-before or icon-after key, with icon text representation.
As always you can use onclick, or document event listeners on button click.
Button primary Button primary Button primary Button primary Button primary account_circle
Button Secondary Button Secondary Button loading Button Secondary Button Secondary account_circle
Button Outlined Button Outlined Button Outlined Button Outlined Button Outlined account_circle
search autorenew backup done code contactless done_all
https://material.io/resources/icons/?search=c&icon=supervisor_account&style=round Buttons with interactions:
Document class listener On Click use function On click action Menu button more_vert Save Save (full button clickable) Save Save

On this tab you can find form useful components. You need just copy it and adjust a bit for your usecase.

Dog Cat Hamster Parrot Spider Goldfish Dog2 Cat2 Hamster2 Parrot2 Spider2 Goldfish2
Toggle is multi Toggle is searchable Toggle close on select Toggle select all option Toggle opens up Get select value Set default value

Get select value 2 Set default value 2 Push new options Crowdin select support to use HTML as option body Markdown HTML URLs

If you need some simple tooltip you can wrap some content with crowdin-tooltip component.
By default it use onHover toggle, you can change it to click
Also you can change delay in miliseconds, position one of [top|bottom|left|right] And if you want show tooltip when page loaded use is-instantly-show flag help_outline help_outline help_outline help_outline get checkbox values get checkbox value set checkbox values
Get radio value
Get input values Get input value Set input values
Get textarea value Set textarea value




Get range value Set range value

Drag and drop file upload crowdin-dnd-upload Simple crowdin card component, use it when you need mark some block of information

Simple light-filled shadowed Increase padding Remove padding Remove padding top Remove padding bottom Also you can combain few types in same time
If you need display some progress use next simple component.
If you need display some information in popUp modal copy code of next simple component. some nice important information comes here

Done Change close button title

Toggle modal open If you need show nice message thats say nothing to display, use code below: If you want add user possibility to easy copy some part of code just copy and paste next component and adjust it a bit
Change code property to what you wan't get into clipboard If you need display some information in nice styled tabs just copy next part of code and adjust it a bit.

content of first tab

content of second tab

content of third tab

If you need show some message to user, after done some action you can use simple component crowdin-toasts
And use it method pushToasts Push toast If you need to show progress on completing actions you can use simple component crowdin-async-progress
And use it method pushJobs Push jobs Update jobs Push new random job Remove job by id 3 Clear jobs If you need to show some nice message you can use simple component crowdin-alert


Some message
Some message text
Some message text
Some message text
Some message text
Some message text

Corowdin File component is the easy way to get simple file tree viewer.
To use it just copy and paste code representation. By default crowdin-files-component is on selectable mode, but you can easy change it mode to clickable. Toggle clickable Toggle is-loading Toggle one level fetching

Filter change listener If you want to listen filter change event use next code: Toggle filter change listener setFilesData method To set files data just use crowdin-files-component method setFilesData, like on sample below: Set different files data

Each action on File component trigger custom event. With listening on this custom event you can do some actions for user.
Example. Load content for just opened folder, open selected file etc. Just copy and past code below to have event listeners getSelected method If you need get selected files and folders Get selected setSelected method If you need programaticaly set selected files or folders Set selected getFilesData method If you need programaticaly get files and folders Get data Files with labels Add Labeled

Simple integration component
Toggle Integration description Toggle Integration name Toggle Integration level fetching Toggle is Crowdin loading Toggle is Integration loading Toggle To Crowdin process Toggle To Integration process Toggle schedule Toggle integration schedule saving Toggle async progress Toggle Integration menu button Toggle Integration title slotted Toggle Integration slotted Set crowdin data and open folder Set integration data Set languages data Set file progress data Toggle filter listeners
All content pasted between opening and closed tag crowdin-simple-integration used as integration title or will be placed as integration side content
This component is a complex solution to simplify integration development.
This component generate few custom events:
refreshFilesList when refresh button is pressed
uploadFilesToCrowdin when sunc to Crowdin button is pressed
uploadFilesToIntegration when sunc to integration button is pressed
also each crowdin-files-component has two custom events that we can listen and interact:
crowdinFilesSelectedChanged when some file selected on integration or Crowdin side
crowdinFilesFolderToggled when some folder toggled on integration or Crowdin side
crowdinFilterChange and integrationFilterChange when allow-filter-change-listener attribute is set and respective filter value changed. You can add listeners to interact on this events. Also this component has few methods to set data. setCrowdinFilesData Used to set data as crowdin files data, and display it on left side of integration component Set crowdin data and open folder setIntegrationFilesData Used to set data as integration files data, and display it on right side of integration component Set integration data setCrowdinLanguagesData Used to add languages data to crowdin files, and display it on each Crowdin file Set Languages data addCrowdinFileProgress Used to add translation/proofreading progress to crowdin files, and display it on each Crowdin file Set file progress data getIntegrationFilesData Used to get data from right side of integration component Get integration data getCrowdinFilesData Used to get data from left side of integration component Get integration data



Filtering

Set total recrods count to 1001 Toggle is Loading Toggle selectable Toggle searchable Console log table data delete Table Reccord By Id push Table Records Update Table Records Console log selected records Add selected event listener set Selected