mirror of https://github.com/abpframework/abp.git
2 changed files with 50 additions and 0 deletions
@ -0,0 +1,50 @@ |
|||
# Card Component |
|||
|
|||
ABP Card component is a wrapper component for bootstrap card class. |
|||
|
|||
## Usage |
|||
|
|||
ABP Card component is a built-in `ThemeSharedModule` component. If you imported shared module into your feature module, you don't need to do anything. |
|||
|
|||
```ts |
|||
// my-feature.module.ts |
|||
|
|||
import { ThemeSharedModule } from '@abp/ng.theme.shared'; |
|||
import { CardDemoComponent } from './chart-demo.component'; |
|||
|
|||
@NgModule({ |
|||
imports: [ |
|||
SharedModule, |
|||
// ... |
|||
], |
|||
declarations: [CardDemoComponent], |
|||
// ... |
|||
}) |
|||
export class MyFeatureModule {} |
|||
|
|||
``` |
|||
|
|||
Then, `abp-card` component can be used. See example below: |
|||
```ts |
|||
|
|||
// card-demo.component.ts |
|||
|
|||
import { Component } from '@angular/core'; |
|||
|
|||
@Component({ |
|||
selector: 'app-card-demo', |
|||
template: ` |
|||
<abp-card [cardStyle]="width: 18rem;"> |
|||
<abp-card-body> |
|||
<abp-card-title>Lorem Ipsum</abp-card-title> |
|||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla commodo condimentum ligula, sed varius nibh eleifend sit amet. Maecenas facilisis vel arcu nec maximus.</abp-card-body> |
|||
</abp-card> |
|||
`, |
|||
}) |
|||
export class CardDemoComponent { } |
|||
``` |
|||
|
|||
See the result below: |
|||
|
|||
 |
|||
|
|||
|
After Width: | Height: | Size: 26 KiB |
Loading…
Reference in new issue