Skip to content

Commit 5dfcd4a

Browse files
MarvinKlein1508MarvinKlein1508
authored
Merge pull request #98 from Community-Toolkit-for-Fluent-UI-Blazor/feat/fluentcx-slideshow-enhanced
Enhance the slideshow to have floating caption or fixed caption.
2 parents 2c978c8 + 803bb83 commit 5dfcd4a

11 files changed

Lines changed: 249 additions & 19 deletions

File tree

‎FluentUI.Blazor.Community.sln‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11

22
Microsoft Visual Studio Solution File, Format Version 12.00
3-
# Visual Studio Version 17
4-
VisualStudioVersion = 17.0.31903.59
3+
# Visual Studio Version 18
4+
VisualStudioVersion = 18.0.11018.127
55
MinimumVisualStudioVersion = 10.0.40219.1
66
Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "src", "src", "{827E0CD3-B72D-47B6-A68D-7590B98EB39B}"
77
EndProject

‎examples/demo/FluentUI.Demo.Shared/FluentUI.Blazor.Community.Components.xml‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13884,11 +13884,91 @@
1388413884
Gets or sets the child content of the component.
1388513885
</summary>
1388613886
</member>
13887+
<member name="P:FluentUI.Blazor.Community.Components.SlideshowCaption.Fixed">
13888+
<summary>
13889+
Gets or sets a value indicating whether the caption is fixed to the bottom of the slideshow item.
13890+
</summary>
13891+
</member>
13892+
<member name="P:FluentUI.Blazor.Community.Components.SlideshowCaption.MaxWidth">
13893+
<summary>
13894+
Gets or sets the maximum width, in pixels, that the component can occupy.
13895+
</summary>
13896+
</member>
1388713897
<member name="P:FluentUI.Blazor.Community.Components.SlideshowCaption.Css">
1388813898
<summary>
1388913899
Gets the css classes to use.
1389013900
</summary>
1389113901
</member>
13902+
<member name="P:FluentUI.Blazor.Community.Components.SlideshowCaption.InternalStyle">
13903+
<summary>
13904+
Gets the computed CSS style string for the component, including any maximum width constraints.
13905+
</summary>
13906+
<remarks>This property is intended for internal use to generate the final style attribute value based
13907+
on the component's configuration. It should not be accessed directly from outside the class.</remarks>
13908+
</member>
13909+
<member name="T:FluentUI.Blazor.Community.Components.SlideshowCaptionText">
13910+
<summary>
13911+
Represents a configurable text component for displaying descriptive content within a slideshow, allowing
13912+
customization of text, color, font, and layout styles.
13913+
</summary>
13914+
<remarks>Use this component to present descriptive or explanatory text in a slideshow interface. The
13915+
appearance of the text can be customized using standard CSS style values for color, font family, font size, font
13916+
weight, letter spacing, line height, and margin. All style-related properties accept valid CSS values as strings. If
13917+
a property is not set, a default value is applied as specified in each property's documentation.</remarks>
13918+
</member>
13919+
<member name="P:FluentUI.Blazor.Community.Components.SlideshowCaptionText.Text">
13920+
<summary>
13921+
Gets or sets the text to display in the description area of the slideshow.
13922+
</summary>
13923+
</member>
13924+
<member name="P:FluentUI.Blazor.Community.Components.SlideshowCaptionText.Color">
13925+
<summary>
13926+
Gets or sets the CSS color value to apply to the component's content.
13927+
</summary>
13928+
<remarks>If not set, the default color is "white". Accepts any valid CSS color string, such as a named
13929+
color (e.g., "red"), a hex code (e.g., "#FF0000"), or an RGB/RGBA value.</remarks>
13930+
</member>
13931+
<member name="P:FluentUI.Blazor.Community.Components.SlideshowCaptionText.FontFamily">
13932+
<summary>
13933+
Gets or sets the CSS font family to apply to the component's text.
13934+
</summary>
13935+
</member>
13936+
<member name="P:FluentUI.Blazor.Community.Components.SlideshowCaptionText.FontSize">
13937+
<summary>
13938+
Gets or sets the CSS font size to apply to the component's content.
13939+
</summary>
13940+
<remarks>The value should be a valid CSS font-size string, such as "16px", "1.5em", or "large". If not
13941+
set, the default value is "24px".</remarks>
13942+
</member>
13943+
<member name="P:FluentUI.Blazor.Community.Components.SlideshowCaptionText.FontWeight">
13944+
<summary>
13945+
Gets or sets the font weight to apply to the text content.
13946+
</summary>
13947+
<remarks>Accepts standard CSS font-weight values, such as numeric values (e.g., "400", "700") or
13948+
keywords (e.g., "normal", "bold"). The default value is "400".</remarks>
13949+
</member>
13950+
<member name="P:FluentUI.Blazor.Community.Components.SlideshowCaptionText.LetterSpacing">
13951+
<summary>
13952+
Gets or sets the CSS letter-spacing value to apply to the element's text content.
13953+
</summary>
13954+
</member>
13955+
<member name="P:FluentUI.Blazor.Community.Components.SlideshowCaptionText.LineHeight">
13956+
<summary>
13957+
Gets or sets the line height value for the element.
13958+
</summary>
13959+
</member>
13960+
<member name="P:FluentUI.Blazor.Community.Components.SlideshowCaptionText.Margin">
13961+
<summary>
13962+
Gets or sets the margin value to apply, typically used to define spacing around an element.
13963+
</summary>
13964+
</member>
13965+
<member name="P:FluentUI.Blazor.Community.Components.SlideshowCaptionText.InternalStyle">
13966+
<summary>
13967+
Gets the computed CSS style string based on the current style-related property values.
13968+
</summary>
13969+
<remarks>This property combines individual style settings, such as color, font, and spacing, into a
13970+
single CSS style string. It is intended for internal use when rendering elements with dynamic styles.</remarks>
13971+
</member>
1389213972
<member name="T:FluentUI.Blazor.Community.Components.SlideshowImage`1">
1389313973
<summary>
1389413974
Represents the image inside a <see cref="T:FluentUI.Blazor.Community.Components.FluentCxSlideshow`1"/>.

examples/demo/FluentUI.Demo.Shared/Pages/Slideshow/Examples/SlideshowCaptions.razor renamed to examples/demo/FluentUI.Demo.Shared/Pages/Slideshow/Examples/SlideshowDescriptions.razor

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,37 @@
33
ShowControls>
44
<SlideshowItem>
55
<SlideshowImage Source="./_content/FluentUI.Demo.Shared/slideshowimages/1.jpg" />
6-
<SlideshowCaption Style="background-color: rgba(0, 0, 0, 0.5)">
6+
<SlideshowDescription Fixed Style="background-color: rgba(0, 0, 0, 0.5)">
77
<h2 style="color: white">Caption for the First Item</h2>
88
<p style="color: white">Test to create caption for your item.</p>
9-
</SlideshowCaption>
9+
</SlideshowDescription>
1010
</SlideshowItem>
1111

1212
<SlideshowItem>
1313
<SlideshowImage Source="./_content/FluentUI.Demo.Shared/slideshowimages/2.jpg" />
14-
<SlideshowCaption Style="background-color: rgba(0, 0, 0, 0.5);">
14+
<SlideshowDescription Fixed Style="background-color: rgba(0, 0, 0, 0.5);">
1515
<h2 style="color: white">Caption for the Second Item</h2>
1616
<p style="color: white">Test to create caption for your item.</p>
17-
</SlideshowCaption>
17+
</SlideshowDescription>
1818
</SlideshowItem>
1919

2020
<SlideshowItem>
2121
<SlideshowImage Source="./_content/FluentUI.Demo.Shared/slideshowimages/3.jpg" />
22-
<SlideshowCaption Style="background-color: rgba(0, 0, 0, 0.5)">
22+
<SlideshowDescription Fixed Style="background-color: rgba(0, 0, 0, 0.5)">
2323
<h2 style="color: white">Caption for the Third Item</h2>
2424
<p style="color: white">Test to create caption for your item.</p>
25-
</SlideshowCaption>
25+
</SlideshowDescription>
26+
27+
<SlideshowDescription MaxWidth=520 Style="top: 10%; left: 10%">
28+
<FluentStack Orientation="Orientation.Vertical" HorizontalAlignment="HorizontalAlignment.Center">
29+
<h2 style="color: white">Caption for the Third Item</h2>
30+
<SlideshowDescriptionText FontSize="48px" FontWeight="800" Text="Test to create caption for your item."/>
31+
32+
<FluentButton Appearance="Appearance.Accent" Style="width: 200px; height: 50px; font-size: 20px; font-weight: 600; margin-top: 20px;">
33+
More Info
34+
</FluentButton>
35+
</FluentStack>
36+
</SlideshowDescription>
2637
</SlideshowItem>
2738
</FluentCxSlideshow>
2839
</div>

‎examples/demo/FluentUI.Demo.Shared/Pages/Slideshow/SlideshowPage.razor‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
Each item in the slideshow is represented by a <code>SlideshowItem</code> component, which can contain any content.
3131
To display an image in the slideshow, use the <code>SlideshowImage</code> component inside a <code>SlideshowItem</code>.
3232
The <code>SlideshowImage</code> component has a <code>Source</code> parameter to set the image source.
33-
Optionally, a <code>SlideshowCaption</code> component can be used to display a caption for the image.
33+
Optionally, a <code>SlideshowDescription</code> component can be used to display a caption for the image.
3434
</p>
3535

3636
<p>
@@ -69,10 +69,13 @@
6969
</Description>
7070
</DemoSection>
7171

72-
<DemoSection Component="typeof(SlideshowCaptions)" Title="Captions">
72+
<DemoSection Component="typeof(SlideshowDescriptions)" Title="Captions">
7373
<Description>
74-
The <code>SlideshowCaption</code> component is used to display a caption for the image.
75-
The caption is displayed at the bottom of the image.
74+
The <code>SlideshowCaption</code> component is used to display a description for the image.
75+
The description can be fixed or not. If the description is fixed, it will be displayed at the bottom of the image.
76+
If the description is not fixed, it can be positioned anywhere on the image using CSS.
77+
The description can contain any content.
78+
A <code>SlideshowCaptionText</code> component is used to display text with various options inside the caption.
7679
</Description>
7780
</DemoSection>
7881

@@ -82,3 +85,4 @@
8285
<ApiDocumentation Component="typeof(SlideshowItem<>)" />
8386
<ApiDocumentation Component="typeof(SlideshowCaption)" />
8487
<ApiDocumentation Component="typeof(SlideshowImage<>)" />
88+
<ApiDocumentation Component="typeof(SlideshowCaptionText)" />

‎src/Community.Components/Components/Slideshow/SlideshowCaption.razor‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
@namespace FluentUI.Blazor.Community.Components
22
@inherits FluentComponentBase
33

4-
<div @ref="@Element" id="@Id" class="@Css" style="@Style" role="presentation" @attributes="@AdditionalAttributes">
4+
<div @ref="@Element"
5+
id="@Id"
6+
class="@Css"
7+
style="@InternalStyle"
8+
role="presentation"
9+
@attributes="@AdditionalAttributes">
510
@ChildContent
611
</div>

‎src/Community.Components/Components/Slideshow/SlideshowCaption.razor.cs‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,32 @@ public partial class SlideshowCaption
1616
[Parameter]
1717
public RenderFragment? ChildContent { get; set; }
1818

19+
/// <summary>
20+
/// Gets or sets a value indicating whether the caption is fixed to the bottom of the slideshow item.
21+
/// </summary>
22+
[Parameter]
23+
public bool Fixed { get; set; } = true;
24+
25+
/// <summary>
26+
/// Gets or sets the maximum width, in pixels, that the component can occupy.
27+
/// </summary>
28+
[Parameter]
29+
public int? MaxWidth { get; set; }
30+
1931
/// <summary>
2032
/// Gets the css classes to use.
2133
/// </summary>
2234
private string? Css => new CssBuilder(Class)
23-
.AddClass("slideshow-caption")
35+
.AddClass("slideshow-description")
36+
.AddClass("fixed", Fixed)
37+
.Build();
38+
39+
/// <summary>
40+
/// Gets the computed CSS style string for the component, including any maximum width constraints.
41+
/// </summary>
42+
/// <remarks>This property is intended for internal use to generate the final style attribute value based
43+
/// on the component's configuration. It should not be accessed directly from outside the class.</remarks>
44+
private string? InternalStyle => new StyleBuilder(Style)
45+
.AddStyle("max-width", $"{MaxWidth}px", MaxWidth.HasValue)
2446
.Build();
2547
}

‎src/Community.Components/Components/Slideshow/SlideshowCaption.razor.css‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,18 @@
1-
.slideshow-caption {
1+
.slideshow-description {
22
position: absolute;
3+
color: var(--neutral-foreground-rest);
4+
text-align: center;
5+
display: flex;
6+
flex-direction: column;
7+
flex-wrap: wrap;
8+
word-break: break-word;
9+
overflow-wrap: break-word;
10+
}
11+
12+
.fixed {
313
right: 15%;
414
bottom: 5.25rem;
515
left: 15%;
616
padding-top: 1.25rem;
717
padding-bottom: 1.25rem;
8-
color: var(--neutral-foreground-rest);
9-
text-align: center;
10-
display: block !important;
1118
}

‎src/Community.Components/Components/Slideshow/SlideshowCaptionText.razor‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@namespace FluentUI.Blazor.Community.Components
2+
@inherits FluentComponentBase
3+
4+
<span @ref="@Element"
5+
id="@Id"
6+
class="slideshow-description-text @Class"
7+
style="@InternalStyle"
8+
role="presentation"
9+
@attributes="@AdditionalAttributes">
10+
@Text
11+
</span>

‎src/Community.Components/Components/Slideshow/SlideshowCaptionText.razor.cs‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
using Microsoft.AspNetCore.Components;
2+
using Microsoft.FluentUI.AspNetCore.Components;
3+
using Microsoft.FluentUI.AspNetCore.Components.Utilities;
4+
5+
namespace FluentUI.Blazor.Community.Components;
6+
7+
/// <summary>
8+
/// Represents a configurable text component for displaying descriptive content within a slideshow, allowing
9+
/// customization of text, color, font, and layout styles.
10+
/// </summary>
11+
/// <remarks>Use this component to present descriptive or explanatory text in a slideshow interface. The
12+
/// appearance of the text can be customized using standard CSS style values for color, font family, font size, font
13+
/// weight, letter spacing, line height, and margin. All style-related properties accept valid CSS values as strings. If
14+
/// a property is not set, a default value is applied as specified in each property's documentation.</remarks>
15+
public partial class SlideshowCaptionText : FluentComponentBase
16+
{
17+
/// <summary>
18+
/// Gets or sets the text to display in the description area of the slideshow.
19+
/// </summary>
20+
[Parameter]
21+
public string? Text { get; set; }
22+
23+
/// <summary>
24+
/// Gets or sets the CSS color value to apply to the component's content.
25+
/// </summary>
26+
/// <remarks>If not set, the default color is "white". Accepts any valid CSS color string, such as a named
27+
/// color (e.g., "red"), a hex code (e.g., "#FF0000"), or an RGB/RGBA value.</remarks>
28+
[Parameter]
29+
public string? Color { get; set; } = "white";
30+
31+
/// <summary>
32+
/// Gets or sets the CSS font family to apply to the component's text.
33+
/// </summary>
34+
[Parameter]
35+
public string? FontFamily { get; set; } = "sans-serif";
36+
37+
/// <summary>
38+
/// Gets or sets the CSS font size to apply to the component's content.
39+
/// </summary>
40+
/// <remarks>The value should be a valid CSS font-size string, such as "16px", "1.5em", or "large". If not
41+
/// set, the default value is "24px".</remarks>
42+
[Parameter]
43+
public string? FontSize { get; set; } = "24px";
44+
45+
/// <summary>
46+
/// Gets or sets the font weight to apply to the text content.
47+
/// </summary>
48+
/// <remarks>Accepts standard CSS font-weight values, such as numeric values (e.g., "400", "700") or
49+
/// keywords (e.g., "normal", "bold"). The default value is "400".</remarks>
50+
[Parameter]
51+
public string? FontWeight { get; set; } = "400";
52+
53+
/// <summary>
54+
/// Gets or sets the CSS letter-spacing value to apply to the element's text content.
55+
/// </summary>
56+
[Parameter]
57+
public string? LetterSpacing { get; set; } = "0";
58+
59+
/// <summary>
60+
/// Gets or sets the line height value for the element.
61+
/// </summary>
62+
public string? LineHeight { get; set; } = "64px";
63+
64+
/// <summary>
65+
/// Gets or sets the margin value to apply, typically used to define spacing around an element.
66+
/// </summary>
67+
public string? Margin { get; set; } = "0";
68+
69+
/// <summary>
70+
/// Gets the computed CSS style string based on the current style-related property values.
71+
/// </summary>
72+
/// <remarks>This property combines individual style settings, such as color, font, and spacing, into a
73+
/// single CSS style string. It is intended for internal use when rendering elements with dynamic styles.</remarks>
74+
private string? InternalStyle => new StyleBuilder(Style)
75+
.AddStyle("color", Color, !string.IsNullOrEmpty(Color))
76+
.AddStyle("font-family", FontFamily, !string.IsNullOrEmpty(FontFamily))
77+
.AddStyle("font-size", FontSize, !string.IsNullOrEmpty(FontSize))
78+
.AddStyle("font-weight", FontWeight, !string.IsNullOrEmpty(FontWeight))
79+
.AddStyle("letter-spacing", LetterSpacing, !string.IsNullOrEmpty(LetterSpacing))
80+
.AddStyle("line-height", LineHeight, !string.IsNullOrEmpty(LineHeight))
81+
.AddStyle("margin", Margin, !string.IsNullOrEmpty(Margin))
82+
.Build();
83+
}

‎src/Community.Components/Components/Slideshow/SlideshowCaptionText.razor.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.slideshow-description-text {
2+
display: block;
3+
white-space: normal !important;
4+
word-break: break-word;
5+
overflow-wrap: break-word;
6+
max-width: 100%;
7+
}

0 commit comments

Comments
 (0)