Standardized Design of Electronic Procedures
Home
First steps
First steps
What is DINTEL?
Designers
Developers
Resources
Frequently Asked Questions
Foundations
Foundations
Color
Typography
Box shadow
Spacing
Grid
Border
Border radius
Iconography
Illustrations
Animations
Accessibility
Design tokens
Writing guidelines
Data visualization
Interface elements
Interface elements
Modules
Templates
Components
Updates
Contact
First steps
Developers
Developers
The DINTEL Design System component library is a Web Components library.
Web Components are not a unique technology, but are based on a series of standards for browsers defined by the W3C consortium that allow you to create your own tags natively, providing them with their own markup, functionality and/or style using HTML, CSS and JavaScript.
Native browser APIs and standardized Web Components facilitate the implementation and use of DINTEL components in any framework or none at all.
Implementation without framework
Integrating the components into a project without a JavaScript framework is very simple. If we are working on a simple HTML page, we can start using the components immediately by adding these tags to the headers of the HTML document, in the <head> tag.
This example shows how to consume the DINTEL library by downloading
<link rel="stylesheet" href="dnt-ui.css" />
<script type="module">
import { defineCustomElements } from 'loader/index.js'
defineCustomElements(window)
</script>
In this second code example, the modules of the DINTEL library are loaded
<link rel="stylesheet" href="dnt-ui.css" />
<script type="module">
import { defineCustomElements } from 'loader/index.js'
defineCustomElements(window)
</script>
Once included, the components can be used in the markup just like any other normal HTML element.
<dnt-input label="Name" placeholder="Type your name"></dnt-input>
<dnt-button type="primary">Send</dnt-button>
Implementation with framework
The library of the DINTEL Design System can be requested through our:
Use of the component library according to the most standardized programming languages:
Before you can use components in Angular, you must import and add Angular's CUSTOM_ELEMENTS_SCHEMA. This allows the use of Web Components in HTML markup, without the compiler producing errors. The CUSTOM_ELEMENTS_SCHEMA needs to be included in any module that uses custom elements. Generally we will add it to AppModule:
// ...
// Import custom elements schema
import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
@NgModule({
// ...
// Add custom elements schema to NgModule
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
The final step is to load and register the DINTEL components in the browser. @dintel/dnt-ui includes a main function that takes care of this. That function is called defineCustomElements() and needs to be called once when starting the application. A convenient place to do this is in main.ts:
// Import components
import { defineCustomElements } from "@dintel/dnt-ui/dist/loader";
// ...
// Register components
defineCustomElements(window);
Once imported, the components can be used in your basic HTML markup:
<dnt-button type="primary">Send</dnt-button>
Once imported, the components can be used in your basic HTML markup:
<dnt-button type="primary">Send</dnt-button>
To integrate @dintel/dnt-ui into a Vue.js application, edit src/main.js to include:
// Import components
import { defineCustomElements } from "@dintel/dnt-ui/dist/loader";
// ...
// Configure Vue.js to ignore Web Components
Vue.config.ignoredElements = [/dnt-\w*/];
// Register components
defineCustomElements(window);
new Vue({
render: h => h(App)
}).$mount("#app");
Once imported, the components can be used in your basic HTML markup:
<dnt-button type="primary">Send</dnt-button>
To integrate @dintel/dnt-ui into a React application, edit src/index.js to include:
// Import components
import { defineCustomElements } from "@dintel/dnt-ui/dist/loader";
// ...
// Register components
defineCustomElements(window);
ReactDOM.render(<App />, document.getElementById("root"));
Once imported, the components can be used in your basic HTML markup:
<dnt-button type="primary">Send</dnt-button>
This website uses own and third party cookies to provide a better service. If you continue browsing we consider that you accept its use.
