Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/akki-jat/one-for-all-ui
Design Library for JavaScript
https://github.com/akki-jat/one-for-all-ui
angular design-library javascript one-for-all react stencil stenciljs ui ui-components vue vuejs
Last synced: 23 days ago
JSON representation
Design Library for JavaScript
- Host: GitHub
- URL: https://github.com/akki-jat/one-for-all-ui
- Owner: akki-jat
- License: mit
- Created: 2020-02-18T17:53:41.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-07-19T05:07:56.000Z (over 1 year ago)
- Last Synced: 2024-05-01T16:32:41.808Z (7 months ago)
- Topics: angular, design-library, javascript, one-for-all, react, stencil, stenciljs, ui, ui-components, vue, vuejs
- Language: TypeScript
- Homepage:
- Size: 3.66 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: readme.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# One For All UI
### 🎉 React Binding Is Here
## Note
- NPM project is moved from one-fro-all-ui to @one-for-all-ui/core.
- Bindings for angular and vue are coming soon for easy use.
## Installation
#### NPM
- React (For more info look at examples)
```bash
npm i @one-for-all-ui/react --save
```
- Other
```bash
npm i @one-for-all-ui/core --save
```
#### JavaScript
```javascript
```
#### Themeing
- Below css variables are provided for theming of all components
```css
--color-primary: your_color;
--color-secondary: your_color;
--color-font: your_color;
```
Note: Replace your_color with your choice of color.
## Example
#### Dark Shadow (Modal)
- JavaScript \- [Example Link](https://codesandbox.io/s/javascript-one-for-all-ui-darkshadow-modal-zkjmi)
- React \- [Example Link](https://codesandbox.io/s/react-one-for-all-ui-darkshadow-modal-r9lxx)
#### Special Card (Card)
- JavaScript \- [Example Link](https://codesandbox.io/s/javascript-one-for-all-ui-specialcard-card-insx1)
- React \- [Example Link](https://codesandbox.io/s/react-one-for-all-ui-specialcard-card-db04u)
#### Zero Gravity Button (Floating Action Button)
- JavaScript \- [Example Link](https://codesandbox.io/s/javascript-one-for-all-ui-zerogravitybutton-fab-8psx0)
- React \- [Example Link](https://codesandbox.io/s/react-one-for-all-ui-zerogravitybutton-fab-335lc)
- Note: If you want to show button respective to any element then set position to relative for that element.
#### Quirk Boomerang (Carousel)
- JavaScript \- [Example Link](https://codesandbox.io/s/javascript-one-for-all-ui-quirkboomerang-carousel-u8edv)
- React \- [Example Link](https://codesandbox.io/s/react-one-for-all-ui-quirkboomerang-carousel-7ypq3)
## For Development
To start locally, run:
```bash
npm install
npm start
```
To build the component for production, run:
```bash
npm run build
```
To run the unit tests for the components, run:
```bash
npm test
```