The other for larger amounts of text, replicating the functionality from the Bootstrap docs. From there we are going to create two solutions, one for short amounts of text, replicating the GitHub example above. We're going to start by looking at the available APIs we can use for this functionality. In this post I’m going to show you how to create a simple copy to clipboard feature for Blazor apps. I thought this would be a cool little feature to be able to use in Blazor applications so thought I would do a bit of investigation and see how it could be replicated. Each code example has a copy button in the top right corner allowing developers to copy the sample code straight to their clipboard. Another great example of this can be found on the Bootstrap site. This is a really useful feature, as I said a second ago, I literally use it everytime. When I noticed a feature which I use everytime but had never given much thought to, the copy to clipboard button. Learning Web API? Get our eBook ASP.Recently I was creating a new repo on GitHub, a pretty common action for most of us now-a-days. Next, we include the CopyToClipboard component that we’ve created previously, passing the text field to the TextToCopy parameter.įinally, we add the TextArea component defined previously to verify the Copy to Clipboard logic works as expected. We set the value to the text field that we define in our block. Then we create an input element, making sure to include the readonly attribute. Initially, we use the directive to mark this component as a routable component. String text = "Some readonly text to copy" Let’s create a component for this scenario: "/singleline" The first scenario in which we may wish to use our Copy to Clipboard component is when we have a single line of read-only text that the user would like to copy, such as a website or a repository URL. With this created, we can now look at some of the scenarios we could come across that would require the use of this component. We create a simple paragraph to show the user what to do, along with a textarea element to allow users to paste data from their clipboard to verify the logic is working. Learning Web API? Get our eBook ASP.NET Core Web API Best Practices and become an expert for FREE! > GET THE BOOK Paste text here: We can verify that our Copy to Clipboard logic works as expected by simply creating a textarea to paste our data into: Create a Component to Show the Copied Text Next, let’s create a component that we can use later to verify if our Copy to Clipboard logic is working correctly. We also add a class attribute, providing some Bootstrap classes.įinally, we create an OnClick() method, that will call CopyToClipboard() and pass the TextToCopy parameter. In our block, we create a TextToCopy parameter. Then we create a button element, adding an event handler for the onclick event. We start by injecting our IClipboardService. We have a service that handles our Copy to Clipboard logic, so now we want to create a component that can be re-used in our application: IClipboardService ClipboardServiceĪwait ClipboardService.CopyToClipboard(TextToCopy) This covers the basic logic we need to copy data to the clipboard. To learn more about dependency injection, check out our article about Dependency Injection in ASP.NET Core.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |