Create a component to encapsulate the bootstrap close button component.
https://getbootstrap.com/docs/5.1/components/close-button/
This component belongs in the Bonzai.Blazor.Bootstrap project and should be placed in the Components folder.
This component requires 2 parameters
- bool IsWhite
- EventCallback OnClick
The component needs to display the "X" button just like it does in the bootstrap documentation. This component should also apply attribute splatting for all attributes. The aria-label attribute should default to "Close" but the user of the component should be able to override that value via attribute splatting.
In addition to the attribute splatting, setting class names on the component should automatically combine the user provided class with the btn-close class name. For example, creating a BtnClose component like this
<BtnClose class="mr-2" />
Should result in this html output (notice how it has both the btn-close and mr-2 class names).
<button type="button" class="btn-close mr-2" aria-label="Close"></button>
All of the existing components in this library have this class name behavior. So you should be able to look at other components and see how they achieve this. To get you started, you will need to inherit the BootstrapComponentBase class.
You will also need to create a test class in the Bonzai.Blazor.Bootstrap.Test project. You will need to write tests that prove the following:
- The component renders a button and that button has the
btn-close class name
- Setting the class attribute appends that class name to the list of class names (as described above).
- Attribute splatting is working
- The aria-label attribute defaults to "Close"
- The aria-label attribute can be overridden by setting
aria-label="Some Value" on the component.
You will also need to create a page in the documentation project that describes this component and details its parameters. If you're not sure what to write to describe the component you can always get some inspiration from bootstraps documentation. There are a lot of examples in the documentation project, please take a look at those to see how the style of the documentation pages is achieved. This documentation needs to have working example of the following:
- Basic example that just shows the closed button
- Shows off the disabled state
- Shows off the
IsWhite variation.
- Shows that the OnClick button will execute some code.
Create a component to encapsulate the bootstrap close button component.
https://getbootstrap.com/docs/5.1/components/close-button/
This component belongs in the
Bonzai.Blazor.Bootstrapproject and should be placed in the Components folder.This component requires 2 parameters
The component needs to display the "X" button just like it does in the bootstrap documentation. This component should also apply attribute splatting for all attributes. The aria-label attribute should default to "Close" but the user of the component should be able to override that value via attribute splatting.
In addition to the attribute splatting, setting class names on the component should automatically combine the user provided class with the
btn-closeclass name. For example, creating aBtnClosecomponent like thisShould result in this html output (notice how it has both the
btn-closeandmr-2class names).All of the existing components in this library have this class name behavior. So you should be able to look at other components and see how they achieve this. To get you started, you will need to inherit the
BootstrapComponentBaseclass.You will also need to create a test class in the
Bonzai.Blazor.Bootstrap.Testproject. You will need to write tests that prove the following:btn-closeclass namearia-label="Some Value"on the component.You will also need to create a page in the documentation project that describes this component and details its parameters. If you're not sure what to write to describe the component you can always get some inspiration from bootstraps documentation. There are a lot of examples in the documentation project, please take a look at those to see how the style of the documentation pages is achieved. This documentation needs to have working example of the following:
IsWhitevariation.