Tile Component
The Tile Component provides a component that can be used to create a tile with hover effect. Here are the steps to use the library in your Angular project:
Installation
To use the Tile Component, you need to install it as a dependency in your Angular project. Run the following command in your project's root directory:
npm install cp-angular-tile --save
This will install the library and save it as a dependency in your project's package.json
file.
Importing the module
After installing the library, you need to import the TileModule in your Angular module.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TileModule } from 'cp-angular-tile';
@NgModule({
imports: [BrowserModule, TileModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
Using the component
Once you have imported the module, you can use the angular-hover-tile component in your Angular templates.
<lht-tile href="/home">
<div content>
<!-- Content for the default state of the tile goes here -->
</div>
<div hover-content>
<!-- Content for the hover state of the tile goes here -->
</div>
</lht-tile>
The tile component takes two content slots: content and hover-content. The content in the content slot is displayed when the tile is in its default state, and the content in the hover-content slot is displayed when the tile is in its hover state.
The href
attribute is optional and can be used to specify the destination of the tile link. If the href attribute is not present, the tile will not be clickable.
Styling the component
The angular-hover-tile component has default styles, but you can override them by adding your own styles to your Angular component or global stylesheet.
Here are the CSS classes that you can use to style the component:
.default
: Styles for the default state of the tile
.hover
: Styles for the hover state of the tile
For example, to change the background color of the tile in its default state, you can add the following styles to your component or global stylesheet:
angular-hover-tile .default {
background-color: #f1f1f1;
}