Tangent-Ui is a CSS Libaray that provides customizable and accessible components. So now you can spend more time building a great experience for your customer with lesser code
You can check the Website on https://tangent-ui.netlify.app/
Documentation Page - https://tangent-ui.netlify.app/documentation/documentation
For Using the TangentUi component Library. you have to give the reference of the below link html tag in the head of your html page to rander the the stylesheet.
<link
rel="stylesheet"
href="https://tangent-ui.netlify.app/Components/component.css"
referrerpolicy="no-referrer"/>For accessing the functionality of certain components like Rating, Navigation and Drawer you will require to add the below script tags in you html file. Simply ou can add these script reference based on your usage.
// use this script tag if you intended to use the feature of Rating
<script
src="https://tangent-ui.netlify.app/Components/Rating/Rating.js" defer></script>
// use this script tag if you intended to use the feature of Navigation
<script
src="https://tangent-ui.netlify.app/Components/Navigation/Navigation.js" defer></script>
// use this script tag if you intended to use the feature of Drawer
<script
src="https://tangent-ui.netlify.app/Components/Drawer/Drawer.js" defer></script>If you still didn't get the installation steps refer the Installation Guide
- Utilities
- Typography
- Grid Layout
- Avatar
- Alert
- Badges
- Button
- Card
- Image
- Input
- Drawer
- Navigation
- List
- Toast
- Rating
- Modal
- Slider
Tangent-Ui provides multiple range of utiliy classes for margin, padding and gaps.
Margin and Padding are provided with abbravation of sm - small, md - medium, lg - large and can use the following classname based on requirements
- padding-sm
- padding-md
- padding-lg
- padding-xlg
- margin-sm
- margin-md
- margin-lg
- margin-xlg
Now margin and padding based on direction, the abbrevation used are p - padding, m - margin, t - top , b - bottom, l - left, r- right
- p-t - p-b - p-l - p-r - m-t - m-b - m-l - m-r
You can also check the live example and code on, [Utility Guide](https://tangent-ui.netlify.app/documentation/documentation#utility-container)
You can use the Typography to design and decorate you text content.
Tangent UI provides variation of Typography* in Header like h1, h2, h3, h4 ,h5 , h6 and provide text variation of underline, overline, line through , hightlights and also
text align of left, right and center
You can also check the live example and code on Typography Guide
Grid are used for Stacking Elements in Grid view format. You can you gird layout by using className grid and wrapper to divide them into section by className grid-2-items and grid-3-items
You can also check the live example and code on [Grid Guide](https://tangent-ui.netlify.app/documentation/documentation#grid-container)
Alerts are for displaying message based on user action and mostly used for communicating the state of system. It also contains variation in outline and based on usecase like Sucess :
- alert-outline-sucess
- alert-sucess
Warning :
- alert-outline-warning
- alert-warning
Danger :
- alert-outline-danger
- alert-danger
Primary :
- alert-outline-primary
- alert-primary
You can also check the live example and code on [Alert Guide](https://tangent-ui.netlify.app/documentation/documentation#alert-container)
The Avatar is used for representing a person in a profile picture like a display icon.
Different variation of Avatar provided:
- avatar-md
- avatar-lg
- avatar-xlg
- avatar-xxlg
You can also check the live example and code on [Avatar Guide](https://tangent-ui.netlify.app/documentation/documentation#avatar-container)
Depending on specific requirement, badges may seem to a number indicatore or count of navigation. You can use the className of badge and it will set the default size; you can use variation of badge sizes based on your requirement like
- badge-md
- badge-sucess
It also contains variation in position, for top left to the container use topleft-badge and for top right use topright-badge and default it is bottom right. You can also set background color by using classname :
- badge-warning
- badge-lg
- badge-primary
You can also check the live example and code on [Badge Guide](https://tangent-ui.netlify.app/documentation/documentation#badge-container)
Buttons are used for performing action or events. You can use the className of btn and it will set the default size. It also contains variation in outline and based on usecase like Sucess :
- btn-sucess
- btn-outlint-sucess
Warning :
- btn-warning
- btn-outline-warning
Use btn-icon for adding icons to button and for round float buttons use btn-round. For link button use className btn for button to act like a link clicker. You can also resize buttons using
- btn-lg
- btn-sm
You can also check the live example and code on [Button Guide](https://tangent-ui.netlify.app/documentation/documentation#button-container)
Card is a container to display information to user most of the time a product details showcase TangentUi provide variation of cards:
- Cards with basic information and images
- Cards with action button
- Cards with text overlay on image
- Horizontal Layout cards.
- Horizontal Layout card without Image
- Cards for Ecommerce Product
- Cards for wishlist
You can also check the live example and code on [Card Guide](https://tangent-ui.netlify.app/documentation/documentation#card-container)
Image component can be used to make image responsive and round shaped.
- image-round for a round shaped image
- image-responsive for image to fit the width of container
You can also check the live example and code on [Image Guide](https://tangent-ui.netlify.app/documentation/documentation#image-container)
Drawer Navigation to provide access to functionalities or for navigating pages. It is mostly recomended for applcation which consist of Mulitple levels of hierarchy chain, so via Drawer you can get quick navigation. You can have Drawer of 3 type:
- Permanent Drawer on the Screen which has fixed width based on content.
- Dismissible Drawer which is rendered by menu bar and shifts the content of the page.
- Modal Drawer which also renders by menu bar but is modaled over the existing layout.
You can also check the live example and code on [Drawer Guide](https://tangent-ui.netlify.app/documentation/documentation#drawer-container)
Navigation are app bars which are used for displaying action or navigation through out the project. We provide 4 variation of Navigation bars:
- Standard Navigation bar which is usually and scroll out of screnn
- Fixed which remains rigid and doesnot scroll and remains on the page.
- Short Navbar which also works like Fixed but is not full stretched but composed of content.
- Short Scrollar which collapse when sroll down.
You can also check the live example and code on [Navigation Guide](https://tangent-ui.netlify.app/documentation/documentation#navigation-container)
List are generally used for stacking information in list format. Now we provide List Variation like List with an Icon + text or just text.Other Variation include having bullets of design according to your need and last one is to simply stack some toast or snackbar
You can also check the live example and code on [List Guide](https://tangent-ui.netlify.app/documentation/documentation#list-container)
Toast are notifiction which are just to notify about some action or update and they usually are for just few seconds and disappear. We have currently 3 Variation of Toast or Snackbar:
- Fixed which remains rigid and doesnot scroll and remains on the page.
- other Variation is for action of warning.
- Last one is for information with the toast but try to keep the content short.
You can also check the live example and code on [Toast Guide](https://tangent-ui.netlify.app/documentation/documentation#toast-container)
Rating are generally used of rating a application or can act as a filter for an application search use case like where in based on rating of products you can search
You can also check the live example and code on [Rating Guide](https://tangent-ui.netlify.app/documentation/documentation#rating-container)
Modal are use like a dialog to communicate with user and this can in form of sharing information or collecting information. We provide Dialog of 3 variation.
- Mininmal content and Action for user to perform.
- Only for Sharing Information or Mulitple choices.
- Combination of both content and Action.
You can also check the live example and code on [Modal Guide](https://tangent-ui.netlify.app/documentation/documentation#dialog-container)
Sliders are generally used of select a quantity out of a range mostly used in price range or percentile. We provide Slider of 2 variation.
- Normal Slider which display the quantity
- Disabled Slider
You can also check the live example and code on [Slider Guide](https://tangent-ui.netlify.app/documentation/documentation#slider-container)
