Skip to content

Commit d642520

Browse files
Lambert LeeArgoZhang
Lambert Lee
authored and
ArgoZhang
committed
!3755 doc(#I6AIMF): update imageview demos
* update imageview demos
1 parent b6bddb3 commit d642520

14 files changed

Lines changed: 432 additions & 130 deletions

‎src/BootstrapBlazor.Shared/Demos/ImageViewer/ImageViewerErrorTemplate.razor‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
@inject IStringLocalizer<ImageViewerErrorTemplate> Localizer
2+
3+
<div>
4+
<div class="images img-ph mt-3">
5+
<div class="images-item">
6+
<div>@Localizer["ImageViewerErrorTemplateUrlError"]</div>
7+
<ImageViewer Url="_content/BootstrapBlazor.Shared/images/error-image.jpeg" HandleError="true" />
8+
</div>
9+
<div class="images-item">
10+
<div>@Localizer["ImageViewerErrorTemplateCustom"]</div>
11+
<ImageViewer Url="_content/BootstrapBlazor.Shared/images/error-image.jpeg">
12+
<ErrorTemplate>
13+
<div class="bb-img-holder">
14+
<div class="bb-img-loading">@Localizer["ImageViewerErrorTemplateLoadFailed"]</div>
15+
</div>
16+
</ErrorTemplate>
17+
</ImageViewer>
18+
</div>
19+
</div>
20+
</div>

src/BootstrapBlazor.Shared/Samples/ImageViewers.razor.css renamed to src/BootstrapBlazor.Shared/Demos/ImageViewer/ImageViewerErrorTemplate.razor.css

File renamed without changes.

‎src/BootstrapBlazor.Shared/Demos/ImageViewer/ImageViewerNormal.razor‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
@inject IStringLocalizer<ImageViewerNormal> Localizer
2+
3+
<div>
4+
<ul class="ul-demo">
5+
<li>@((MarkupString)Localizer["ImageViewerNormalTips1"].Value)</li>
6+
<li>@((MarkupString)Localizer["ImageViewerNormalTips2"].Value)</li>
7+
<li>@((MarkupString)Localizer["ImageViewerNormalTips3"].Value)</li>
8+
<li>@((MarkupString)Localizer["ImageViewerNormalTips4"].Value)</li>
9+
<li>@((MarkupString)Localizer["ImageViewerNormalTips5"].Value)</li>
10+
</ul>
11+
<div class="images mt-3">
12+
<div class="images-item">
13+
<div>Fill</div>
14+
<ImageViewer Url="_content/BootstrapBlazor.Shared/images/bird.jpeg"
15+
FitMode="ObjectFitMode.Fill" />
16+
</div>
17+
<div class="images-item">
18+
<div>Contain</div>
19+
<ImageViewer Url="_content/BootstrapBlazor.Shared/images/bird.jpeg"
20+
FitMode="ObjectFitMode.Contain" />
21+
</div>
22+
<div class="images-item">
23+
<div>Cover</div>
24+
<ImageViewer Url="_content/BootstrapBlazor.Shared/images/bird.jpeg"
25+
FitMode="ObjectFitMode.Cover" />
26+
</div>
27+
<div class="images-item">
28+
<div>None</div>
29+
<ImageViewer Url="_content/BootstrapBlazor.Shared/images/bird.jpeg"
30+
FitMode="ObjectFitMode.None" />
31+
</div>
32+
<div class="images-item">
33+
<div>ScaleDown</div>
34+
<ImageViewer Url="_content/BootstrapBlazor.Shared/images/bird.jpeg"
35+
FitMode="ObjectFitMode.ScaleDown" />
36+
</div>
37+
</div>
38+
</div>

‎src/BootstrapBlazor.Shared/Demos/ImageViewer/ImageViewerNormal.razor.css‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
.images ::deep .bb-img {
2+
width: 100px;
3+
height: 100px;
4+
border-radius: var(--bs-border-radius);
5+
border: 1px solid var(--bs-secondary);
6+
margin: 0 auto;
7+
}
8+
9+
.images.img-ph ::deep .bb-img {
10+
width: 300px;
11+
height: 200px;
12+
}
13+
14+
.images-item:not(:first-child) {
15+
margin-top: 1rem;
16+
}
17+
18+
.images-item > div {
19+
text-align: center;
20+
margin-bottom: .5rem;
21+
}
22+
23+
@media (min-width: 720px) {
24+
.images {
25+
display: flex;
26+
flex-wrap: wrap;
27+
}
28+
29+
.images-item {
30+
display: flex;
31+
flex-direction: column;
32+
width: 20%;
33+
}
34+
35+
.images-item:not(:first-child) {
36+
margin-top: 0;
37+
}
38+
39+
.img-ph .images-item {
40+
width: 50%;
41+
}
42+
}

‎src/BootstrapBlazor.Shared/Demos/ImageViewer/ImageViewerPlaceHolder.razor‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
@inject IStringLocalizer<ImageViewerPlaceHolder> Localizer
2+
3+
<div>
4+
<div>@((MarkupString)Localizer["ImageViewerPlaceHolderTips1"].Value)</div>
5+
<div class="images img-ph mt-3">
6+
<div class="images-item">
7+
<div>@Localizer["ImageViewerPlaceHolderDefault"]</div>
8+
<ImageViewer Url="_content/BootstrapBlazor.Shared/images/image-ph.jpeg" ShowPlaceHolder="true" />
9+
</div>
10+
<div class="images-item">
11+
<div>@Localizer["ImageViewerPlaceHolderCustom"]</div>
12+
<ImageViewer Url="_content/BootstrapBlazor.Shared/images/image-ph.jpeg" ShowPlaceHolder="true">
13+
<PlaceHolderTemplate>
14+
<div class="bb-img-holder">
15+
<div class="bb-img-loading">@Localizer["ImageViewerPlaceHolderLoading"]</div>
16+
</div>
17+
</PlaceHolderTemplate>
18+
</ImageViewer>
19+
</div>
20+
</div>
21+
</div>

‎src/BootstrapBlazor.Shared/Demos/ImageViewer/ImageViewerPlaceHolder.razor.css‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
.images ::deep .bb-img {
2+
width: 100px;
3+
height: 100px;
4+
border-radius: var(--bs-border-radius);
5+
border: 1px solid var(--bs-secondary);
6+
margin: 0 auto;
7+
}
8+
9+
.images.img-ph ::deep .bb-img {
10+
width: 300px;
11+
height: 200px;
12+
}
13+
14+
.images-item:not(:first-child) {
15+
margin-top: 1rem;
16+
}
17+
18+
.images-item > div {
19+
text-align: center;
20+
margin-bottom: .5rem;
21+
}
22+
23+
@media (min-width: 720px) {
24+
.images {
25+
display: flex;
26+
flex-wrap: wrap;
27+
}
28+
29+
.images-item {
30+
display: flex;
31+
flex-direction: column;
32+
width: 20%;
33+
}
34+
35+
.images-item:not(:first-child) {
36+
margin-top: 0;
37+
}
38+
39+
.img-ph .images-item {
40+
width: 50%;
41+
}
42+
}

‎src/BootstrapBlazor.Shared/Demos/ImageViewer/ImageViewerPlaceHolderTemplate.razor‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
@inject IStringLocalizer<ImageViewerPlaceHolderTemplate> Localizer
2+
3+
<div>
4+
<div>@((MarkupString)Localizer["ImageViewerPlaceHolderTemplateTips1"].Value)</div>
5+
<div class="images img-ph mt-3">
6+
<div class="images-item">
7+
<div>@Localizer["ImageViewerPlaceHolderTemplateUrl"]</div>
8+
<ImageViewer Url="">
9+
<PlaceHolderTemplate>
10+
<div class="bb-img-holder">
11+
<div class="bb-img-loading">@Localizer["ImageViewerPlaceHolderTemplateplaceholder"]</div>
12+
</div>
13+
</PlaceHolderTemplate>
14+
</ImageViewer>
15+
</div>
16+
<div class="images-item">
17+
<div>@Localizer["ImageViewerPlaceHolderTemplateLoadingShow"]</div>
18+
<ImageViewer Url="_content/BootstrapBlazor.Shared/images/image-ph.jpeg" ShowPlaceHolder="true">
19+
<PlaceHolderTemplate>
20+
<div class="bb-img-holder">
21+
<div class="bb-img-loading">@Localizer["ImageViewerPlaceHolderTemplateplaceholder"]</div>
22+
</div>
23+
</PlaceHolderTemplate>
24+
</ImageViewer>
25+
</div>
26+
</div>
27+
</div>

‎src/BootstrapBlazor.Shared/Demos/ImageViewer/ImageViewerPlaceHolderTemplate.razor.css‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
.images ::deep .bb-img {
2+
width: 100px;
3+
height: 100px;
4+
border-radius: var(--bs-border-radius);
5+
border: 1px solid var(--bs-secondary);
6+
margin: 0 auto;
7+
}
8+
9+
.images.img-ph ::deep .bb-img {
10+
width: 300px;
11+
height: 200px;
12+
}
13+
14+
.images-item:not(:first-child) {
15+
margin-top: 1rem;
16+
}
17+
18+
.images-item > div {
19+
text-align: center;
20+
margin-bottom: .5rem;
21+
}
22+
23+
@media (min-width: 720px) {
24+
.images {
25+
display: flex;
26+
flex-wrap: wrap;
27+
}
28+
29+
.images-item {
30+
display: flex;
31+
flex-direction: column;
32+
width: 20%;
33+
}
34+
35+
.images-item:not(:first-child) {
36+
margin-top: 0;
37+
}
38+
39+
.img-ph .images-item {
40+
width: 50%;
41+
}
42+
}

‎src/BootstrapBlazor.Shared/Demos/ImageViewer/ImageViewerPreviewList.razor‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
@inject IStringLocalizer<ImageViewerPreviewList> Localizer
2+
3+
<div class="images img-ph mt-3">
4+
<div class="images-item">
5+
<ImageViewer Url="_content/BootstrapBlazor.Shared/images/bird.jpeg" PreviewList="PreviewList" />
6+
</div>
7+
</div>
8+
9+
@code {
10+
private List<string> PreviewList { get; } = new();
11+
12+
/// <summary>
13+
/// OnInitialized
14+
/// </summary>
15+
protected override void OnInitialized()
16+
{
17+
base.OnInitialized();
18+
19+
PreviewList.AddRange(new string[]
20+
{
21+
"_content/BootstrapBlazor.Shared/images/ImageList1.jpeg",
22+
"_content/BootstrapBlazor.Shared/images/ImageList2.jpeg"
23+
});
24+
}
25+
}

‎src/BootstrapBlazor.Shared/Demos/ImageViewer/ImageViewerPreviewList.razor.css‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
.images ::deep .bb-img {
2+
width: 100px;
3+
height: 100px;
4+
border-radius: var(--bs-border-radius);
5+
border: 1px solid var(--bs-secondary);
6+
margin: 0 auto;
7+
}
8+
9+
.images.img-ph ::deep .bb-img {
10+
width: 300px;
11+
height: 200px;
12+
}
13+
14+
.images-item:not(:first-child) {
15+
margin-top: 1rem;
16+
}
17+
18+
.images-item > div {
19+
text-align: center;
20+
margin-bottom: .5rem;
21+
}
22+
23+
@media (min-width: 720px) {
24+
.images {
25+
display: flex;
26+
flex-wrap: wrap;
27+
}
28+
29+
.images-item {
30+
display: flex;
31+
flex-direction: column;
32+
width: 20%;
33+
}
34+
35+
.images-item:not(:first-child) {
36+
margin-top: 0;
37+
}
38+
39+
.img-ph .images-item {
40+
width: 50%;
41+
}
42+
}

0 commit comments

Comments
 (0)