Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/themesberg/tailwind-angular-starter
Free and open-source starter project to help you get started with Angular, Tailwind CSS and the Flowbite UI components
https://github.com/themesberg/tailwind-angular-starter
angular angular-cli angular2 angular4 angularjs flowbite tailwind tailwindcss ui ui-components uikit
Last synced: 4 months ago
JSON representation
Free and open-source starter project to help you get started with Angular, Tailwind CSS and the Flowbite UI components
- Host: GitHub
- URL: https://github.com/themesberg/tailwind-angular-starter
- Owner: themesberg
- License: mit
- Created: 2023-07-05T10:07:14.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-06-27T09:48:13.000Z (7 months ago)
- Last Synced: 2024-09-28T17:03:53.569Z (4 months ago)
- Topics: angular, angular-cli, angular2, angular4, angularjs, flowbite, tailwind, tailwindcss, ui, ui-components, uikit
- Language: HTML
- Homepage: https://flowbite.com/docs/getting-started/angular/
- Size: 673 KB
- Stars: 20
- Watchers: 3
- Forks: 10
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Tailwind CSS + Angular (CLI) + Flowbite Starter
Get started with this starter project based on a Tailwind CSS, Angular and Flowbite configuration to help you get started building enterprise-level web applications based on the utility classes from Tailwind CSS and components from Flowbite.
This repository is based on the [Tailwind CSS + Angular](https://flowbite.com/docs/getting-started/angular/) guide on the Flowbite website.
## Getting started
Make sure that you have Node.js installed on your project. Run the following command to install all dependencies:
```
npm install
```
## Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
## Code scaffolding
Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
## Build
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
Update the `app.component.ts` file to use the `initFlowbite` function to enable the interactive components via data attributes:
```javascript
import { Component } from '@angular/core';
import { OnInit } from '@angular/core';
import { initFlowbite } from 'flowbite';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'web-app';
ngOnInit(): void {
initFlowbite();
}
}
```
This will allow you to enable components such as the modals, navigation bars, dropdowns to dynamically set up the functionality via our data attributes interface.
## UI components
Now that you have installed all of the frameworks and libraries you can start using the whole collection of UI components and templates from the [Flowbite UI Library](https://flowbite.com/docs/getting-started/introduction/) and [Blocks](https://flowbite.com/blocks/marketing/feature/).
Let's first start by copy-pasting one of the default [modal component](https://flowbite.com/docs/components/modal/) examples from the documentation and add it inside the `app.component.html` file:
```html
Toggle modal
```
Adding this code should create a toggle button which on the click event should show a modal component. The interactivity is enabled via the data attributes interface from Flowbite.
### Data attributes
The Flowbite Library is by default powered by the data attributes interface that you can use to easily set up interactive components by targeting elements directly from your template components.
Let's add a [dropdown component](https://flowbite.com/docs/components/dropdowns/) from the UI library:
```html
Dropdown button
```
This example should also show a button that on the click event will show a dropdown menu that you can easily update via Tailwind CSS and the data attributes API.
### JavaScript API
Alternatively to the data attributes strategy you can also choose to programatically set up the interactivity by directly importing the components from Flowbite and use the methods and options described in the documentation of Flowbite at the end of each page.
For example, here's how you can set up a carousel component directly with JavaScript:
```javascript
import { Carousel } from "flowbite";
import type { CarouselItem, CarouselOptions, CarouselInterface } from "flowbite";
const $prevButton = document.getElementById('data-carousel-prev');
const $nextButton = document.getElementById('data-carousel-next');
$prevButton.addEventListener('click', () => {
carousel.prev();
});
$nextButton.addEventListener('click', () => {
carousel.next();
});
const items: CarouselItem[] = [
{
position: 0,
el: document.getElementById('carousel-item-1')
},
{
position: 1,
el: document.getElementById('carousel-item-2')
},
{
position: 2,
el: document.getElementById('carousel-item-3')
},
{
position: 3,
el: document.getElementById('carousel-item-4')
},
];
const options: CarouselOptions = {
defaultPosition: 1,
interval: 3000,
indicators: {
activeClasses: 'bg-white dark:bg-gray-800',
inactiveClasses: 'bg-white/50 dark:bg-gray-800/50 hover:bg-white dark:hover:bg-gray-800',
items: [
{
position: 0,
el: document.getElementById('carousel-indicator-1')
},
{
position: 1,
el: document.getElementById('carousel-indicator-2')
},
{
position: 2,
el: document.getElementById('carousel-indicator-3')
},
{
position: 3,
el: document.getElementById('carousel-indicator-4')
},
]
},
// callback functions
onNext: () => {
console.log('next slider item is shown');
},
onPrev: ( ) => {
console.log('previous slider item is shown');
},
onChange: ( ) => {
console.log('new slider item has been shown');
}
};
const carousel: CarouselInterface = new Carousel(items, options);
carousel.cycle()
// set event listeners for prev and next buttons
const $prevButton = document.getElementById('data-carousel-prev');
const $nextButton = document.getElementById('data-carousel-next');
$prevButton.addEventListener('click', () => {
carousel.prev();
});
$nextButton.addEventListener('click', () => {
carousel.next();
});
```
You also need to have the following HTML markup available inside your codebase and Angular template files:
```html
Previous
Next
```
In this case the advantage is that you can control the behaviour of the components as you wish being able to override the default settings.
### Using TypeScript
The Flowbite UI components also supports TypeScript and you can import the types and apply them when using the JavaScript API programatically.
For example, here's how you can import the types for the Carousel component:
```javascript
import type { CarouselItem, CarouselOptions, CarouselInterface } from "flowbite";
// ... other code
const carousel: CarouselInterface = new Carousel(items, options);
```
You can read more about using [Flowbite and TypeScript](https://flowbite.com/docs/getting-started/typescript/) by following our documentation guide.
## Flowbite Angular Library
The awesome open-source community from Flowbite also started working on a standalone [Flowbite Angular](https://github.com/themesberg/flowbite-angular) library with native components where you can also contribute to the development of the project until a stable release is achieved.