mpcd-ui v0.2.0
Welcome to MPCD-UI!
MPCD-UI is a Tailwind CSS/React Component Library made for the Zoroastrian Middle Persian Digital Corpus and Dictionary (MPCD) project, developed at the Cologne Center for eHumanities. You will find all available components listed below. But first visit the naming convention section of this Readme to fully understand its structure.
This library is still in development and may not be as polished as if it were finished. You're using an experimental build.
Naming convention
MPCD-UI uses its own PascalCase-based naming convention. A component name is structured as follows:
| Abbreviation of HTML-Element type | Specific Type if given |
|---|---|
| Btn | |
| Ipt | Search |
| Ipt | Text |
| The examples above can be dissolved to |
|---|
| Btn: A generic button |
| IptSearch: An input element with a search type |
| IptText: An input element with a text type |
Abbreviations & Extensions
Abbreviations
Here you'll find a listing of all included elements and their abbreviation.
| Element | Abbreviation |
|---|---|
| Button | Btn |
| Input | Ipt |
| General layout elements | Ly |
Extension entries
Here you'll find a listing of all currently available extension entries.
| Definition | Abbreviation |
|---|---|
| Glassmorphism | Glm |
Components
A listing of all currently available components including their abbreviation, prop possibilities and a short description.
Every component accepts the addClasses prop which exists so that the user can also add individual classes. However, it is recommended not to write properties already used by other attributes in addClasses in order to avoid misinterpretations.
| Abbreviation | Description | React-Props |
|---|---|---|
| Btn | A button | fontFam, fontSize, label, bgColor, color, rounded, border, borderColor, padding, cursor, hover, dark, onClick, addClasses, id |
| BtnGlm | A button, glassmorphism style | fontFam, fontSize, label, bgFrom, bgTo, color, rounded, border, borderColor, padding, cursor, hover, dark, onClick, addClasses, id |
| IptCheckbox | A checkbox with label | fontFam, fontSize, label, name, value, bgColor, color, rounded, border, borderColor, padding, cursor, height, width, margin, hover, dark, focus, checked, onClick, addClasses, id, required, isChecked |
| IptRadio | A radio button with label | fontFam, fontSize, label, name, value, bgColor, color, rounded, border, borderColor, padding, cursor, height, width, margin, hover, dark, focus, checked, onClick, addClasses, id, required, isChecked |
| IptSearch | A search input field | fontFam, fontSize, bgColor, color, rounded, border, borderColor, padding, cursor, hover, dark, focus, onClick, extOnClick, addClasses, id, placeholder, value, required, animated, extended |
| IptText | A text input field | fontFam, fontSize, bgColor, color, rounded, border, borderColor, padding, cursor, hover, dark, focus, onClick, addClasses, id, placeholder, value, required, animated |
| LyLeftheader | A title rotated left | fontFam, fontSize, label, bgColor, color, rounded, border, borderColor, padding, cursor, height, width, margin, hover, dark, focus, onClick, addClasses, id |