When a component is published in the Turas Design System we include details of what it is, how to use it, and when to use it based on our user research. Our components pages include HTML examples, and .NET Core Tag Helpers. We intend to expand on these examples to include other frameworks such as React.
To help with styling we have created 'utility styles’. This is part of our base styles and is available when using our NPM package.
The utility styles include styles for adding margins and paddings to existing elements. Hopefully negating the need for developers to add additional styles.
We are continually adding to these styles and welcome suggestions for any additions that will help with development.
All our .NET Core tag helpers have an 'additional classes' parameter that can be used to pass in classes from the utility styles.
This example shows passing in a utility style to add a margin top of 50px (mt-50) and a margin bottom of 30px (mb-30) to an alert component:
The info alert box title! Use this style of alert to communicate non-urgent information.
<turas-alert-box additional-classes="mt-50 mb-30" alert-box-title="The info alert box title!" alert-box-message="Use this style of alert to communicate non-urgent information.">
</turas-alert-box>
<div class="alert-info alert mt-50 mb-30" role="alert">
<div class="alert-icon">
<span class="fa-info-circle fa" aria-hidden="true"></span>
</div>
<div class="alert-content">
<p class="mb-0"><strong>The info alert box title!</strong> Use this style of alert to communicate non-urgent information.</p>
</div>
</div>
All our components accept the HTML id attribute.
This example shows passing in the id attribute to a button.
<turas-button button-style="Primary" id="my-example-id">Primary</turas-button>
<button id="my-example-id" class="btn btn-primary " type="button">Primary</button>
In some cases the id attribute must be passed in via a custom parameter for that component. When this is the case it will be documented on that component's page.
This example shows passing in a custom id parameter to a modal for both the modal button and the modal using 'button-opens-modal-id' and 'modal-id'.
<turas-button button-opens-modal-id="my-modal-example">Close without saving</turas-button>
<turas-modal modal-id="my-modal-example" modal-title="Close without saving">
<turas-modal-body>
<p>Are you sure you want to close without saving?</p>
<p>Any changes made will not be saved!</p>
</turas-modal-body>
<turas-modal-footer>
<turas-button button-closes-modal>No, return to form</turas-button>
<turas-button button-type="Hyperlink" button-style="Primary" href="">Yes, close without saving</turas-button>
</turas-modal-footer>
</turas-modal>
<button class="btn btn-default " type="button" data-bs-toggle="modal" data-bs-target="#my-modal-example">Close without saving</button>
<div class="modal modal-info " id="my-modal-example" tabindex="-1" role="dialog" aria-labelledby="my-modal-exampleLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title" id="my-modal-exampleLabel">Close without saving</div>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span class="fa-regular fa-x"></span></button>
</div>
<div class="modal-body">
<p>Are you sure you want to close without saving?</p>
<p>Any changes made will not be saved!</p>
</div>
<div class="modal-footer">
<button class="btn btn-default " type="button" data-bs-dismiss="modal">No, return to form</button>
<a href="" class="btn btn-primary ">Yes, close without saving</a>
</div>
</div>
</div></div>
