Skip to content

Commit 3300202

Browse files
santoshyadavdevAnkitSharma-007
santoshyadavdev
authored and
AnkitSharma-007
committed
feat: add card component with image
1 parent c676568 commit 3300202

File tree

11 files changed

+149
-15
lines changed

11 files changed

+149
-15
lines changed

‎projects/bulma-app/src/app/card/card.component.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,3 +29,34 @@
2929
<markdown [src]="'assets/docs/card/card-code.md'" lineNumbers></markdown>
3030
</div>
3131
</div>
32+
<div class="parent-container">
33+
<div class="component-container">
34+
<bu-card>
35+
<bu-card-image>
36+
<figure class="image is-4by3">
37+
<img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image" />
38+
</figure>
39+
</bu-card-image>
40+
<bu-card-content>
41+
<div class="media">
42+
<div class="media-left">
43+
<figure class="image is-48x48">
44+
<img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image" />
45+
</figure>
46+
</div>
47+
<div class="media-content">
48+
<p class="title is-4">John Smith</p>
49+
<p class="subtitle is-6">@johnsmith</p>
50+
</div>
51+
</div>
52+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
53+
<a>@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
54+
<br />
55+
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
56+
</bu-card-content>
57+
</bu-card>
58+
</div>
59+
<div class="code-snippet-container">
60+
<markdown [src]="'assets/docs/card/card-image.md'" lineNumbers></markdown>
61+
</div>
62+
</div>

‎projects/bulma-app/src/assets/docs/card/card-image.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
```javascript
2+
<bu-card>
3+
<bu-card-image>
4+
<figure class="image is-4by3">
5+
<img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image" />
6+
</figure>
7+
</bu-card-image>
8+
<bu-card-content>
9+
<div class="media">
10+
<div class="media-left">
11+
<figure class="image is-48x48">
12+
<img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image" />
13+
</figure>
14+
</div>
15+
<div class="media-content">
16+
<p class="title is-4">John Smith</p>
17+
<p class="subtitle is-6">@johnsmith</p>
18+
</div>
19+
</div>
20+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
21+
<a>@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
22+
<br />
23+
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
24+
</bu-card-content>
25+
</bu-card>
26+
```

‎projects/ngx-bulma/src/lib/card/card-image/card-image.component.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.card-image {
2+
display: block;
3+
}
4+
5+
.content figure {
6+
margin-left: 0em;
7+
margin-right: 0em;
8+
text-align: center;
9+
}

‎projects/ngx-bulma/src/lib/card/card-image/card-image.component.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<ng-content></ng-content>

‎projects/ngx-bulma/src/lib/card/card-image/card-image.component.spec.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { BulmaCardCardImageComponent } from './card-image.component';
4+
5+
describe('BulmaCardCardImageComponent', () => {
6+
let component: BulmaCardCardImageComponent;
7+
let fixture: ComponentFixture<BulmaCardCardImageComponent>;
8+
9+
beforeEach(async(() => {
10+
TestBed.configureTestingModule({
11+
declarations: [BulmaCardCardImageComponent],
12+
}).compileComponents();
13+
}));
14+
15+
beforeEach(() => {
16+
fixture = TestBed.createComponent(BulmaCardCardImageComponent);
17+
component = fixture.componentInstance;
18+
fixture.detectChanges();
19+
});
20+
21+
it('should create', () => {
22+
expect(component).toBeTruthy();
23+
});
24+
});

‎projects/ngx-bulma/src/lib/card/card-image/card-image.component.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import {
2+
ChangeDetectionStrategy,
3+
Component,
4+
HostBinding,
5+
OnInit,
6+
ViewEncapsulation,
7+
} from '@angular/core';
8+
9+
@Component({
10+
selector: 'bu-card-image',
11+
templateUrl: './card-image.component.html',
12+
styleUrls: ['./card-image.component.css'],
13+
encapsulation: ViewEncapsulation.None,
14+
changeDetection: ChangeDetectionStrategy.OnPush,
15+
})
16+
export class BulmaCardCardImageComponent implements OnInit {
17+
@HostBinding('class') class = 'card-image';
18+
19+
constructor() {}
20+
21+
ngOnInit(): void {}
22+
}

‎projects/ngx-bulma/src/lib/card/card.component.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.card {
2+
display: block;
3+
}

‎projects/ngx-bulma/src/lib/card/card.component.html‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
<div class="card">
2-
<ng-content select="bu-card-header"></ng-content>
3-
<ng-content select="bu-card-title"></ng-content>
4-
<ng-content select="bu-card-content"></ng-content>
5-
<ng-content select="bu-card-footer"></ng-content>
6-
7-
</div>
1+
<ng-content select="bu-card-image"></ng-content>
2+
<ng-content select="bu-card-header"></ng-content>
3+
<ng-content select="bu-card-title"></ng-content>
4+
<ng-content select="bu-card-content"></ng-content>
5+
<ng-content select="bu-card-footer"></ng-content>

‎projects/ngx-bulma/src/lib/card/card.component.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,20 @@
1-
import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
1+
import {
2+
ChangeDetectionStrategy,
3+
Component,
4+
HostBinding,
5+
OnInit,
6+
ViewEncapsulation,
7+
} from '@angular/core';
28

39
@Component({
410
selector: 'bu-card',
511
templateUrl: './card.component.html',
612
styleUrls: ['./card.component.css'],
713
changeDetection: ChangeDetectionStrategy.OnPush,
14+
encapsulation: ViewEncapsulation.None,
815
})
916
export class BulmaCardComponent implements OnInit {
17+
@HostBinding('class') class = 'card';
1018
constructor() {}
1119

1220
ngOnInit() {}

‎projects/ngx-bulma/src/lib/card/card.module.ts‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,27 @@ import { NgModule } from '@angular/core';
33
import { BulmaCardContentComponent } from './card-content/card-content.component';
44
import { BulmaCardFooterComponent } from './card-footer/card-footer.component';
55
import { BulmaCardHeaderComponent } from './card-header/card-header.component';
6+
import { BulmaCardCardImageComponent } from './card-image/card-image.component';
67
import { BulmaCardTitleComponent } from './card-title/card-title.component';
78
import { BulmaCardComponent } from './card.component';
89

910
@NgModule({
10-
declarations: [BulmaCardComponent, BulmaCardHeaderComponent,
11-
BulmaCardContentComponent, BulmaCardFooterComponent, BulmaCardTitleComponent],
12-
imports: [
13-
CommonModule
11+
declarations: [
12+
BulmaCardComponent,
13+
BulmaCardHeaderComponent,
14+
BulmaCardContentComponent,
15+
BulmaCardFooterComponent,
16+
BulmaCardTitleComponent,
17+
BulmaCardCardImageComponent,
18+
],
19+
imports: [CommonModule],
20+
exports: [
21+
BulmaCardComponent,
22+
BulmaCardHeaderComponent,
23+
BulmaCardContentComponent,
24+
BulmaCardFooterComponent,
25+
BulmaCardTitleComponent,
26+
BulmaCardCardImageComponent,
1427
],
15-
exports: [BulmaCardComponent, BulmaCardHeaderComponent,
16-
BulmaCardContentComponent, BulmaCardFooterComponent, BulmaCardTitleComponent]
1728
})
18-
export class BulmaCardModule { }
29+
export class BulmaCardModule {}

0 commit comments

Comments
 (0)