-
-
Notifications
You must be signed in to change notification settings - Fork 523
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Blog: Social media share buttons (#5518)
* added a blog for the social media share buttons. added avatar for giorgi. and added a placeholder cover image Signed-off-by: 10x developer <gio2004n@gmail.com> * generated the content with the CLI Signed-off-by: 10x developer <gio2004n@gmail.com> * fixed the generated content. fixed one typo. fixed the date. fixed an issue with the markdown Signed-off-by: 10x developer <gio2004n@gmail.com> * fixed typos. and reformatted some of the blogs parts. added an image of the buttons. tested the blog thoroughly. fixed all issues. Signed-off-by: 10x developer <gio2004n@gmail.com> * fixed naming of code snippet Signed-off-by: 10x developer <gio2004n@gmail.com> * updated the cover image for the blog. Signed-off-by: 10x developer <gio2004n@gmail.com> * minor format changes. Signed-off-by: 10x developer <gio2004n@gmail.com> * added a new way to register the platforms. tested everything. Signed-off-by: 10x developer <gio2004n@gmail.com> * formating * Fixed spelling mistakes. Added more text, made the blog more fluent. Removed the beginning section explaining how to add Blazorise to a Blazor project. Tested for typos. Signed-off-by: 10x developer <gio2004n@gmail.com> * added previously missing code snippets Signed-off-by: 10x developer <gio2004n@gmail.com> * Small optimizations * update the description and date Signed-off-by: 10x developer <gio2004n@gmail.com> * renamed folders, to reflect the date of the blog Signed-off-by: 10x developer <gio2004n@gmail.com> --------- Signed-off-by: 10x developer <gio2004n@gmail.com> Co-authored-by: Mladen Macanovic <mladen.macanovic@blazorise.com>
- Loading branch information
Showing
20 changed files
with
500 additions
and
0 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+393 KB
...Server/wwwroot/img/blog/2024-05-17/how-to-create-social-media-share-buttons.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+7.63 KB
Documentation/Blazorise.Docs.Server/wwwroot/img/blog/2024-05-17/share-buttons.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 20 additions & 0 deletions
20
...owToCreateSocialMediaShareButtons/Code/HowToCreateSocialMediaShareButtons_BrandsCode.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| <div class="blazorise-codeblock"> | ||
| <div class="html"><pre> | ||
| .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-` | ||
| */ | ||
| </pre></div> | ||
| </div> |
11 changes: 11 additions & 0 deletions
11
...areButtons/Code/HowToCreateSocialMediaShareButtons_HeadContentIncludeFontAwesomeCode.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| <div class="blazorise-codeblock"> | ||
| <div class="html"><pre> | ||
| <span class="htmlTagDelimiter"><</span><span class="htmlElementName">html</span><span class="htmlTagDelimiter">></span> | ||
| <span class="htmlTagDelimiter"><</span><span class="htmlElementName">head</span><span class="htmlTagDelimiter">></span> | ||
| <span class="htmlTagDelimiter"><</span><span class="htmlElementName">link</span> <span class="htmlAttributeName">href</span><span class="htmlOperator">=</span><span class="quot">"</span><span class="htmlAttributeValue">_content/Blazorise.Icons.FontAwesome/v6/css/all.min.css</span><span class="quot">"</span> <span class="htmlAttributeName">rel</span><span class="htmlOperator">=</span><span class="quot">"</span><span class="htmlAttributeValue">stylesheet</span><span class="quot">"</span><span class="htmlTagDelimiter">></span> | ||
| ... | ||
| <span class="htmlTagDelimiter"></</span><span class="htmlElementName">head</span><span class="htmlTagDelimiter">></span> | ||
| ... | ||
| <span class="htmlTagDelimiter"></</span><span class="htmlElementName">html</span><span class="htmlTagDelimiter">></span> | ||
| </pre></div> | ||
| </div> |
10 changes: 10 additions & 0 deletions
10
...alMediaShareButtons/Code/HowToCreateSocialMediaShareButtons_IndexhtmlHeadSectionCode.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| <div class="blazorise-codeblock"> | ||
| <div class="html"><pre> | ||
| <span class="htmlTagDelimiter"><</span><span class="htmlElementName">html</span><span class="htmlTagDelimiter">></span> | ||
| <span class="htmlTagDelimiter"><</span><span class="htmlElementName">head</span><span class="htmlTagDelimiter">></span> | ||
| <span class="htmlTagDelimiter"><</span><span class="htmlElementName">link</span> <span class="htmlAttributeName">href</span><span class="htmlOperator">=</span><span class="quot">"</span><span class="htmlAttributeValue">brands.css</span><span class="quot">"</span> <span class="htmlAttributeName">rel</span><span class="htmlOperator">=</span><span class="quot">"</span><span class="htmlAttributeValue">stylesheet</span><span class="quot">"</span> <span class="htmlTagDelimiter">/></span> | ||
| ... | ||
| <span class="htmlTagDelimiter"></</span><span class="htmlElementName">head</span><span class="htmlTagDelimiter">></span> | ||
| <span class="htmlTagDelimiter"></</span><span class="htmlElementName">html</span><span class="htmlTagDelimiter">></span> | ||
| </pre></div> | ||
| </div> |
10 changes: 10 additions & 0 deletions
10
...ToCreateSocialMediaShareButtons/Code/HowToCreateSocialMediaShareButtons_PlatformCode.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| <div class="blazorise-codeblock"> | ||
| <div class="csharp"><pre> | ||
| <span class="keyword">public</span> record Platform(<span class="keyword">string</span> Name, <span class="keyword">string</span> TextColor, <span class="keyword">string</span> BackgroundColor, <span class="keyword">string</span> IconName, <span class="keyword">string</span> Href) | ||
| { | ||
| <span class="keyword">public</span> <span class="keyword">static</span> Platform X => <span class="keyword">new</span> Platform(<span class="string">"X"</span>, <span class="string">"white"</span>, <span class="string">"x"</span>, <span class="string">"fa-brands fa-x"</span>, <span class="string">"https://twitter.com/intent/tweet"</span>); | ||
|
|
||
| <span class="comment">// your social media platform can go here.</span> | ||
| } | ||
| </pre></div> | ||
| </div> |
18 changes: 18 additions & 0 deletions
18
...diaShareButtons/Code/HowToCreateSocialMediaShareButtons_ShareButtonComponentCodeCode.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| <div class="blazorise-codeblock"> | ||
| <div class="csharp"><pre> | ||
| <span class="atSign">@</span>code | ||
| { | ||
| [Parameter, EditorRequired] | ||
| <span class="keyword">public</span> Platform Platform { <span class="keyword">get</span>; <span class="keyword">set</span>; } | ||
|
|
||
| [Parameter] | ||
| <span class="keyword">public</span> Size ButtonSize { <span class="keyword">get</span>; <span class="keyword">set</span>; } = Size.Large; | ||
|
|
||
| [Parameter, EditorRequired] | ||
| <span class="keyword">public</span> RenderFragment ChildContent { <span class="keyword">get</span>; <span class="keyword">set</span>; } | ||
|
|
||
| [Parameter(CaptureUnmatchedValues = <span class="keyword">true</span>)] | ||
| <span class="keyword">public</span> Dictionary<<span class="keyword">string</span>, <span class="keyword">object</span>> AdditionalAttributes { <span class="keyword">get</span>; <span class="keyword">set</span>; } = <span class="keyword">new</span>(); | ||
| } | ||
| </pre></div> | ||
| </div> |
15 changes: 15 additions & 0 deletions
15
...aShareButtons/Code/HowToCreateSocialMediaShareButtons_ShareButtonComponentMarkupCode.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| <div class="blazorise-codeblock"> | ||
| <div class="html"><pre> | ||
| <span class="htmlTagDelimiter"><</span><span class="htmlElementName">Button</span> <span class="htmlAttributeName">TextColor</span><span class="htmlOperator">=</span><span class="quot">"</span><span class="htmlAttributeValue"><span class="atSign">@</span>Platform.TextColor</span><span class="quot">"</span> | ||
| <span class="htmlAttributeName">Background</span><span class="htmlOperator">=</span><span class="quot">"</span><span class="htmlAttributeValue"><span class="atSign">@</span>(new Background(Platform.BackgroundColor))</span><span class="quot">"</span> | ||
| <span class="htmlAttributeName">To</span><span class="htmlOperator">=</span><span class="quot">"</span><span class="htmlAttributeValue"><span class="atSign">@</span>Platform.Href</span><span class="quot">"</span> | ||
| <span class="htmlAttributeName">Type</span><span class="htmlOperator">=</span><span class="quot">"</span><span class="htmlAttributeValue"><span class="atSign">@</span>ButtonType.Link</span><span class="quot">"</span> | ||
| <span class="htmlAttributeName">Size</span><span class="htmlOperator">=</span><span class="quot">"</span><span class="sharpVariable"><span class="atSign">@</span>ButtonSize</span><span class="quot">"</span> | ||
| <span class="htmlAttributeName"><span class="atSign">@</span>attributes</span><span class="htmlOperator">=</span><span class="quot">"</span><span class="sharpVariable"><span class="atSign">@</span>AdditionalAttributes</span><span class="quot">"</span><span class="htmlTagDelimiter">></span> | ||
|
|
||
| <span class="atSign">@</span>ChildContent | ||
|
|
||
| <span class="htmlTagDelimiter"><</span><span class="htmlElementName">Icon</span> <span class="htmlAttributeName">Name</span><span class="htmlOperator">=</span><span class="quot">"</span><span class="htmlAttributeValue"><span class="atSign">@</span>($"fa-brands {Platform.IconName}")</span><span class="quot">"</span> <span class="htmlAttributeName">IconStyle</span><span class="htmlOperator">=</span><span class="quot">"</span><span class="enum">IconStyle</span><span class="enumValue">.Light</span><span class="quot">"</span><span class="htmlTagDelimiter">/></span> | ||
| <span class="htmlTagDelimiter"></</span><span class="htmlElementName">Button</span><span class="htmlTagDelimiter">></span> | ||
| </pre></div> | ||
| </div> |
7 changes: 7 additions & 0 deletions
7
...SocialMediaShareButtons/Code/HowToCreateSocialMediaShareButtons_ShareButtonUsageCode.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| <div class="blazorise-codeblock"> | ||
| <div class="html"><pre> | ||
| <span class="htmlTagDelimiter"><</span><span class="htmlElementName">ShareButton</span> <span class="htmlAttributeName">Brand</span><span class="htmlOperator">=</span><span class="quot">"</span><span class="htmlAttributeValue"><span class="atSign">@</span>Platform.X</span><span class="quot">"</span><span class="htmlTagDelimiter">></span> | ||
| Share on | ||
| <span class="htmlTagDelimiter"></</span><span class="htmlElementName">ShareButton</span><span class="htmlTagDelimiter">></span> | ||
| </pre></div> | ||
| </div> |
16 changes: 16 additions & 0 deletions
16
...oCreateSocialMediaShareButtons/Examples/HowToCreateSocialMediaShareButtons_Brands.snippet
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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-` | ||
| */ |
7 changes: 7 additions & 0 deletions
7
...Buttons/Examples/HowToCreateSocialMediaShareButtons_HeadContentIncludeFontAwesome.snippet
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| <html> | ||
| <head> | ||
| <link href="_content/Blazorise.Icons.FontAwesome/v6/css/all.min.css" rel="stylesheet"> | ||
| ... | ||
| </head> | ||
| ... | ||
| </html> |
6 changes: 6 additions & 0 deletions
6
...ediaShareButtons/Examples/HowToCreateSocialMediaShareButtons_IndexhtmlHeadSection.snippet
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| <html> | ||
| <head> | ||
| <link href="brands.css" rel="stylesheet" /> | ||
| ... | ||
| </head> | ||
| </html> |
6 changes: 6 additions & 0 deletions
6
...reateSocialMediaShareButtons/Examples/HowToCreateSocialMediaShareButtons_Platform.snippet
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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. | ||
| } |
14 changes: 14 additions & 0 deletions
14
...ShareButtons/Examples/HowToCreateSocialMediaShareButtons_ShareButtonComponentCode.snippet
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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<string, object> AdditionalAttributes { get; set; } = new(); | ||
| } |
11 changes: 11 additions & 0 deletions
11
...areButtons/Examples/HowToCreateSocialMediaShareButtons_ShareButtonComponentMarkup.snippet
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| <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> |
3 changes: 3 additions & 0 deletions
3
...ialMediaShareButtons/Examples/HowToCreateSocialMediaShareButtons_ShareButtonUsage.snippet
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| <ShareButton Brand="@Platform.X"> | ||
| Share on | ||
| </ShareButton> |
171 changes: 171 additions & 0 deletions
171
...lazorise.Docs/Pages/Blog/2024-06-12_HowToCreateSocialMediaShareButtons/Index.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| <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> | ||
| ``` | ||
| ```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<string, object> 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 | ||
| <html> | ||
| <head> | ||
| <link href="brands.css" rel="stylesheet" /> | ||
| ... | ||
| </head> | ||
| </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: | ||
|
|
||
| ```html|ShareButtonUsage | ||
| <ShareButton Brand="@Platform.X"> | ||
| Share on | ||
| </ShareButton> | ||
| ``` | ||
|
|
||
| > **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! 💗 |
Oops, something went wrong.