diff --git a/Documentation/Blazorise.Docs.Server/wwwroot/img/avatars/giorgi.png b/Documentation/Blazorise.Docs.Server/wwwroot/img/avatars/giorgi.png new file mode 100644 index 0000000000..35d847755f Binary files /dev/null and b/Documentation/Blazorise.Docs.Server/wwwroot/img/avatars/giorgi.png differ diff --git a/Documentation/Blazorise.Docs.Server/wwwroot/img/blog/2024-05-17/how-to-create-social-media-share-buttons.png b/Documentation/Blazorise.Docs.Server/wwwroot/img/blog/2024-05-17/how-to-create-social-media-share-buttons.png new file mode 100644 index 0000000000..840a83bd5e Binary files /dev/null and b/Documentation/Blazorise.Docs.Server/wwwroot/img/blog/2024-05-17/how-to-create-social-media-share-buttons.png differ diff --git a/Documentation/Blazorise.Docs.Server/wwwroot/img/blog/2024-05-17/share-buttons.png b/Documentation/Blazorise.Docs.Server/wwwroot/img/blog/2024-05-17/share-buttons.png new file mode 100644 index 0000000000..74a53c6248 Binary files /dev/null and b/Documentation/Blazorise.Docs.Server/wwwroot/img/blog/2024-05-17/share-buttons.png differ diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Code/HowToCreateSocialMediaShareButtons_BrandsCode.html b/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Code/HowToCreateSocialMediaShareButtons_BrandsCode.html new file mode 100644 index 0000000000..f895096f0b --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Code/HowToCreateSocialMediaShareButtons_BrandsCode.html @@ -0,0 +1,20 @@ +
+
+.bg-x {
+  background-color: #000000 !important;
+}
+
+.bg-discord {
+  background-color: #5865F2 !important;
+}
+
+.bg-github {
+  background-color: #0D1117 !important;
+}
+
+/* 
+ * other brand colors... add the brands you need here!
+ * IMPORTANT NOTE: please make sure, you prefix your class names with `bg-` 
+ */
+
+
diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Code/HowToCreateSocialMediaShareButtons_HeadContentIncludeFontAwesomeCode.html b/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Code/HowToCreateSocialMediaShareButtons_HeadContentIncludeFontAwesomeCode.html new file mode 100644 index 0000000000..fe01434c06 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Code/HowToCreateSocialMediaShareButtons_HeadContentIncludeFontAwesomeCode.html @@ -0,0 +1,11 @@ +
+
+<html>
+<head>
+  <link href="_content/Blazorise.Icons.FontAwesome/v6/css/all.min.css" rel="stylesheet">
+  ...
+</head>
+...
+</html>
+
+
diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Code/HowToCreateSocialMediaShareButtons_IndexhtmlHeadSectionCode.html b/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Code/HowToCreateSocialMediaShareButtons_IndexhtmlHeadSectionCode.html new file mode 100644 index 0000000000..02052b964d --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Code/HowToCreateSocialMediaShareButtons_IndexhtmlHeadSectionCode.html @@ -0,0 +1,10 @@ +
+
+<html>
+<head>
+  <link href="brands.css" rel="stylesheet" />
+  ...
+</head>
+</html>
+
+
diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Code/HowToCreateSocialMediaShareButtons_PlatformCode.html b/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Code/HowToCreateSocialMediaShareButtons_PlatformCode.html new file mode 100644 index 0000000000..8ac438d1c9 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Code/HowToCreateSocialMediaShareButtons_PlatformCode.html @@ -0,0 +1,10 @@ +
+
+public record Platform(string Name, string TextColor, string BackgroundColor, string IconName, string Href)
+{
+    public static Platform X => new Platform("X", "white", "x", "fa-brands fa-x", "https://twitter.com/intent/tweet");
+    
+    // your social media platform can go here.
+}
+
+
diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Code/HowToCreateSocialMediaShareButtons_ShareButtonComponentCodeCode.html b/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Code/HowToCreateSocialMediaShareButtons_ShareButtonComponentCodeCode.html new file mode 100644 index 0000000000..816926b403 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Code/HowToCreateSocialMediaShareButtons_ShareButtonComponentCodeCode.html @@ -0,0 +1,18 @@ +
+
+@code
+{
+    [Parameter, EditorRequired]
+    public Platform Platform { get; set; }
+
+    [Parameter]
+    public Size ButtonSize { get; set; } = Size.Large;
+
+    [Parameter, EditorRequired]
+    public RenderFragment ChildContent { get; set; }
+
+    [Parameter(CaptureUnmatchedValues = true)]
+    public Dictionary<string, object> AdditionalAttributes { get; set; } = new();
+}
+
+
diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Code/HowToCreateSocialMediaShareButtons_ShareButtonComponentMarkupCode.html b/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Code/HowToCreateSocialMediaShareButtons_ShareButtonComponentMarkupCode.html new file mode 100644 index 0000000000..a1ceeb57c4 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Code/HowToCreateSocialMediaShareButtons_ShareButtonComponentMarkupCode.html @@ -0,0 +1,15 @@ +
+
+<Button TextColor="@Platform.TextColor"
+        Background="@(new Background(Platform.BackgroundColor))"
+        To="@Platform.Href"
+        Type="@ButtonType.Link"
+        Size="@ButtonSize"
+        @attributes="@AdditionalAttributes">
+
+    @ChildContent
+
+    <Icon Name="@($"fa-brands {Platform.IconName}")" IconStyle="IconStyle.Light"/>
+</Button>
+
+
diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Code/HowToCreateSocialMediaShareButtons_ShareButtonUsageCode.html b/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Code/HowToCreateSocialMediaShareButtons_ShareButtonUsageCode.html new file mode 100644 index 0000000000..b142033e56 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Code/HowToCreateSocialMediaShareButtons_ShareButtonUsageCode.html @@ -0,0 +1,7 @@ +
+
+<ShareButton Brand="@Platform.X">
+    Share on
+</ShareButton>
+
+
diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Examples/HowToCreateSocialMediaShareButtons_Brands.snippet b/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Examples/HowToCreateSocialMediaShareButtons_Brands.snippet new file mode 100644 index 0000000000..0e7c57ddf8 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Examples/HowToCreateSocialMediaShareButtons_Brands.snippet @@ -0,0 +1,16 @@ +.bg-x { + background-color: #000000 !important; +} + +.bg-discord { + background-color: #5865F2 !important; +} + +.bg-github { + background-color: #0D1117 !important; +} + +/* + * other brand colors... add the brands you need here! + * IMPORTANT NOTE: please make sure, you prefix your class names with `bg-` + */ \ No newline at end of file diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Examples/HowToCreateSocialMediaShareButtons_HeadContentIncludeFontAwesome.snippet b/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Examples/HowToCreateSocialMediaShareButtons_HeadContentIncludeFontAwesome.snippet new file mode 100644 index 0000000000..a848accaa5 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Examples/HowToCreateSocialMediaShareButtons_HeadContentIncludeFontAwesome.snippet @@ -0,0 +1,7 @@ + + + + ... + +... + \ No newline at end of file diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Examples/HowToCreateSocialMediaShareButtons_IndexhtmlHeadSection.snippet b/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Examples/HowToCreateSocialMediaShareButtons_IndexhtmlHeadSection.snippet new file mode 100644 index 0000000000..a8b35a401d --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Examples/HowToCreateSocialMediaShareButtons_IndexhtmlHeadSection.snippet @@ -0,0 +1,6 @@ + + + + ... + + \ No newline at end of file diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Examples/HowToCreateSocialMediaShareButtons_Platform.snippet b/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Examples/HowToCreateSocialMediaShareButtons_Platform.snippet new file mode 100644 index 0000000000..11e1557e68 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Examples/HowToCreateSocialMediaShareButtons_Platform.snippet @@ -0,0 +1,6 @@ +public record Platform(string Name, string TextColor, string BackgroundColor, string IconName, string Href) +{ + public static Platform X => new Platform("X", "white", "x", "fa-brands fa-x", "https://twitter.com/intent/tweet"); + + // your social media platform can go here. +} \ No newline at end of file diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Examples/HowToCreateSocialMediaShareButtons_ShareButtonComponentCode.snippet b/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Examples/HowToCreateSocialMediaShareButtons_ShareButtonComponentCode.snippet new file mode 100644 index 0000000000..75c032111e --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Examples/HowToCreateSocialMediaShareButtons_ShareButtonComponentCode.snippet @@ -0,0 +1,14 @@ +@code +{ + [Parameter, EditorRequired] + public Platform Platform { get; set; } + + [Parameter] + public Size ButtonSize { get; set; } = Size.Large; + + [Parameter, EditorRequired] + public RenderFragment ChildContent { get; set; } + + [Parameter(CaptureUnmatchedValues = true)] + public Dictionary AdditionalAttributes { get; set; } = new(); +} \ No newline at end of file diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Examples/HowToCreateSocialMediaShareButtons_ShareButtonComponentMarkup.snippet b/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Examples/HowToCreateSocialMediaShareButtons_ShareButtonComponentMarkup.snippet new file mode 100644 index 0000000000..da29eb0747 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Examples/HowToCreateSocialMediaShareButtons_ShareButtonComponentMarkup.snippet @@ -0,0 +1,11 @@ + \ No newline at end of file diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Examples/HowToCreateSocialMediaShareButtons_ShareButtonUsage.snippet b/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Examples/HowToCreateSocialMediaShareButtons_ShareButtonUsage.snippet new file mode 100644 index 0000000000..65397d36d4 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Examples/HowToCreateSocialMediaShareButtons_ShareButtonUsage.snippet @@ -0,0 +1,3 @@ + + Share on + \ No newline at end of file diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Index.md b/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Index.md new file mode 100644 index 0000000000..7b8a9e3673 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Index.md @@ -0,0 +1,171 @@ +--- +title: How to create social media share buttons +description: Discover how to create social media share buttons for your Blazor app! using the framework-agnostic component library Blazorise! +permalink: /blog/how-to-create-social-media-share-buttons +canonical: /blog/how-to-create-social-media-share-buttons +image-url: /img/blog/2024-05-17/how-to-create-social-media-share-buttons.png +image-title: How to create social media share buttons with Blazorise +author-name: Giorgi +author-image: giorgi +posted-on: Jun 12th, 2024 +read-time: 5 min +--- + +# How to create a ShareButton component with Blazorise! + +Are you ready to sprinkle some Blazorise magic into your Blazor app? Adding share buttons for social media platforms can give your users an easy way to spread the word about your awesome content. It's easier than you think, thanks to Blazorise! + +--- + +## Installing Blazorise + +Adding Blazorise to your project doesn't need to be explained in every blog post, so [here's](/docs/start) here's the link to the current guide on the subject! + +Or if you wish to install Blazorise with another CSS framework, you can follow the [Blazorise Integration Guides](/docs/usage) and choose the CSS framework you want to use! + +--- + +## Let's begin! + +We can start with creating the class which will hold all the information related to each social media platform we want to support sharing to! + +Create `Platform.cs`. We will use a record for this. Choosing the right tool to solve our problems is always a good idea. I think records are ideal for this scenario as they are basically immutable data classes, ie. unchangeable collections of values. You can read more about them [here](https://learn.microsoft.com/en-us/dotnet/csharp/language-reference/builtin-types/record). + +```cs|Platform +public record Platform(string Name, string TextColor, string BackgroundColor, string IconName, string Href) +{ + public static Platform X => new Platform("X", "white", "x", "fa-brands fa-x", "https://twitter.com/intent/tweet"); + + // your social media platform can go here. +} +``` + +## Creating the ShareButton component + +The next step will be to create the actual Blazor component which will be used as the share button. This component can go inside the `/Components/` folder. This folder is a great place for keeping components which are reused in many different places across your app! + +Create a file named `ShareButtonComponent.razor`, and write the following in it: + +```html|ShareButtonComponentMarkup + +``` +```cs|ShareButtonComponentCode +@code +{ + [Parameter, EditorRequired] + public Platform Platform { get; set; } + + [Parameter] + public Size ButtonSize { get; set; } = Size.Large; + + [Parameter, EditorRequired] + public RenderFragment ChildContent { get; set; } + + [Parameter(CaptureUnmatchedValues = true)] + public Dictionary AdditionalAttributes { get; set; } = new(); +} +``` + +## Let's break down the component + +First thing's first, we have the Button component, notice that it is typed as **B**utton and not **b**utton that is because it is not an ordinary HTML button, it is the Blazorise **B**utton component! This means it can take parameters and allow us to customize it! + +It's important to note, that all Blazor components must be named in PascalCase, this is necessary for them to be treated as components by the razor compiler. If you don't do this, they will not be treated as razor markup, rather, as regular HTML elements. + +Just like other Blazorise components, this button is framework-agnostic, meaning you may use Bootstrap, TailwindCSS, or any other supported frameworks! + +### The parameters + +We have just enough of them to allow for the exact customization necessary, while keeping the component very simple to use. We will write this code once, and re-use it multiple times all around our application. This is the beauty of DRY and Component based front-end frameworks. + +Here is a breakdown of what each parameter does: +1. `Platform` - The platform of the share button. The user will pass the platforms which will are statically defined inside the Platform record. +2. `Size` - The size of the button, this is a Blazorise class, so we can use Small, Medium, Large etc. +3. `ChildContent` - The markup displayed inside the button. See [blazor-university](https://blazor-university.com/templating-components-with-renderfragements/). +4. `AdditionalAttributes` - Any additional attributes the user passes to the button. Will directly be applied to the underlying button component. See [blazor-university](https://blazor-university.com/components/capturing-unexpected-parameters/). + +To define parameters in Blazor, we use a publicly accessible property, with the `[Parameter]` attribute! + +You may be wondering, what `[EditorRequired]` does, well, it is a really useful attribute. It marks a regular Parameter required, meaning that we will see warnings in our IDE when we don't pass the required parameters to our component. This is extremely useful to prevent accidental bugs while writing Blazor components. Because Blazor components are strongly typed, there is little to no room for making mistakes while using them. + +--- + +## Define the brand colors in brands.css + +Let's create another file inside the `/wwwroot/` folder. Let's name it `brands.css`. This CSS file will hold all of our brand colors. Here are some example colors, which you may expand further as you need to add more brands! + +```html|Brands +.bg-x { + background-color: #000000 !important; +} + +.bg-discord { + background-color: #5865F2 !important; +} + +.bg-github { + background-color: #0D1117 !important; +} + +/* + * other brand colors... add the brands you need here! + * IMPORTANT NOTE: please make sure, you prefix your class names with `bg-` + */ +``` + +> **Note:** The `!important` property, this is necessary as, by default the Bootstrap icons will have the `Color` property set to `primary`, this will shadow our custom background colors, so adding `!important` at the end of them will fix this. + +--- + +## Include the brands.css file in your app + +Now, writing a simple CSS file is not really enough, we need to include it in our index.html's head section, so that the browser, can actually fetch our classes. Just add the following line to the `wwwroot/index.html` + +```html|IndexhtmlHeadSection + + + + ... + + +``` + +--- + +## Using the ShareButtons! + +And already, we are done! It's time to use your freshly created component! Inside `Index.razor` add your component like so: + +```html|ShareButtonUsage + + Share on + +``` + +> **Note:** Notice how the text inside the button says `Share on` instead of `Share on X`, this is because X's logo is literally the latin letter X, so it would not make sense, so have `Share on X ✖` + +> Also, try to omit the Brand parameter, or the ChildContent - which in this case is just the text "Share on". You will see warnings in your code, your IDE will warn you about not passing required parameters to your component. + +--- + +## Congratulations! You can now create ShareButtons in your Blazor web application! + +![Share buttons](img/blog/2024-05-17/share-buttons.png) + +--- + +Sharing your content with the world is important, it allows your users to show their friends what your page is all about! + +Blazorise makes it easy to develop framework-agnostic UI quickly. + +Thanks for reading! 💗 \ No newline at end of file diff --git a/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Index.razor b/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Index.razor new file mode 100644 index 0000000000..24b46c2272 --- /dev/null +++ b/Documentation/Blazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Index.razor @@ -0,0 +1,174 @@ +@page "/blog/how-to-create-social-media-share-buttons" + + + + + + + How to create a ShareButton component with Blazorise! + + + + Are you ready to sprinkle some Blazorise magic into your Blazor app? Adding share buttons for social media platforms can give your users an easy way to spread the word about your awesome content. It's easier than you think, thanks to Blazorise! + + + + Installing Blazorise + + + + Adding Blazorise to your project doesn't need to be explained in every blog post, so here's here's the link to the current guide on the subject! + + + + Or if you wish to install Blazorise with another CSS framework, you can follow the Blazorise Integration Guides and choose the CSS framework you want to use! + + + + Let's begin! + + + + We can start with creating the class which will hold all the information related to each social media platform we want to support sharing to! + + + + Create Platform.cs. We will use a record for this. Choosing the right tool to solve our problems is always a good idea. I think records are ideal for this scenario as they are basically immutable data classes, ie. unchangeable collections of values. You can read more about them here. + + + + + + Creating the ShareButton component + + + + The next step will be to create the actual Blazor component which will be used as the share button. This component can go inside the /Components/ folder. This folder is a great place for keeping components which are reused in many different places across your app! + + + + Create a file named ShareButtonComponent.razor, and write the following in it: + + + + + + + + Let's break down the component + + + + First thing's first, we have the Button component, notice that it is typed as Button and not button that is because it is not an ordinary HTML button, it is the Blazorise Button component! This means it can take parameters and allow us to customize it! + + + + It's important to note, that all Blazor components must be named in PascalCase, this is necessary for them to be treated as components by the razor compiler. If you don't do this, they will not be treated as razor markup, rather, as regular HTML elements. + + + + Just like other Blazorise components, this button is framework-agnostic, meaning you may use Bootstrap, TailwindCSS, or any other supported frameworks! + + + + The parameters + + + + We have just enough of them to allow for the exact customization necessary, while keeping the component very simple to use. We will write this code once, and re-use it multiple times all around our application. This is the beauty of DRY and Component based front-end frameworks. + + + + Here is a breakdown of what each parameter does: + + + + + Platform - The platform of the share button. The user will pass the platforms which will are statically defined inside the Platform record. + + + Size - The size of the button, this is a Blazorise class, so we can use Small, Medium, Large etc. + + + ChildContent - The markup displayed inside the button. See blazor-university. + + + AdditionalAttributes - Any additional attributes the user passes to the button. Will directly be applied to the underlying button component. See blazor-university. + + + + + To define parameters in Blazor, we use a publicly accessible property, with the [Parameter] attribute! + + + + You may be wondering, what [EditorRequired] does, well, it is a really useful attribute. It marks a regular Parameter required, meaning that we will see warnings in our IDE when we don't pass the required parameters to our component. This is extremely useful to prevent accidental bugs while writing Blazor components. Because Blazor components are strongly typed, there is little to no room for making mistakes while using them. + + + + Define the brand colors in brands.css + + + + Let's create another file inside the /wwwroot/ folder. Let's name it brands.css. This CSS file will hold all of our brand colors. Here are some example colors, which you may expand further as you need to add more brands! + + + + + +
+ Note: The !important property, this is necessary as, by default the Bootstrap icons will have the Color property set to primary, this will shadow our custom background colors, so adding !important at the end of them will fix this. +
+ + + + Include the brands.css file in your app + + + + Now, writing a simple CSS file is not really enough, we need to include it in our index.html's head section, so that the browser, can actually fetch our classes. Just add the following line to the wwwroot/index.html + + + + + + Using the ShareButtons! + + + + And already, we are done! It's time to use your freshly created component! Inside Index.razor add your component like so: + + + + + +
+ Note: Notice how the text inside the button says Share on instead of Share on X, this is because X's logo is literally the latin letter X, so it would not make sense, so have Share on X ✖ +
+ + + +
+ Also, try to omit the Brand parameter, or the ChildContent - which in this case is just the text "Share on". You will see warnings in your code, your IDE will warn you about not passing required parameters to your component. +
+ + + + Congratulations! You can now create ShareButtons in your Blazor web application! + + + + + + Sharing your content with the world is important, it allows your users to show their friends what your page is all about! + + + + Blazorise makes it easy to develop framework-agnostic UI quickly. + + + + Thanks for reading! 💗 + + + diff --git a/Documentation/Blazorise.Docs/Pages/Blog/Index.razor b/Documentation/Blazorise.Docs/Pages/Blog/Index.razor index 2daa8864a2..24b5626980 100644 --- a/Documentation/Blazorise.Docs/Pages/Blog/Index.razor +++ b/Documentation/Blazorise.Docs/Pages/Blog/Index.razor @@ -66,6 +66,7 @@ List BlogEntries = new List { + new BlogEntry { Category = "How To Guides", Url = "blog/how-to-create-social-media-share-buttons", Text = "How to create social media share buttons with Blazorise", Image = "img/blog/2024-05-17/how-to-create-social-media-share-buttons.png", AuthorName="Giorgi", AuthorImage="giorgi", PostedOn="May 21st, 2024", ReadTime="5 min" }, new BlogEntry { Category = "How To Guides", Url = "blog/how-to-implement-validation-with-captcha", Text = "How to implement validation with captcha", Image = "img/blog/2024-05-08/how-to-implement-validation-with-captcha.png", AuthorName="David Moreira", AuthorImage="david", PostedOn="May 8th, 2024", ReadTime="5 min", Pinned = true }, new BlogEntry { Category = "How To Guides", Url = "blog/how-to-override-fluent-design-tokens", Text = "How to override Fluent design tokens", Image = "img/blog/2024-03-26/how-to-override-fluent-design-tokens.png", AuthorName="Mladen Macanović", AuthorImage="mladen", PostedOn="March 26th, 2024", ReadTime="5 min" }, new BlogEntry { Category = "How To Guides", Url = "blog/how-to-handle-localization-in-blazorise-validation", Text = "How to handle Localization in Blazorise Validation", Image = "img/blog/2023-09-15/how_to_handle_localization_in_blazorise_validation.png", AuthorName="David Moreira", AuthorImage="david", PostedOn="September 15th, 2023", ReadTime="5 min" },