-
Modular Architecture: Focused on creating reusable and flexible components.
-
Modern Design Principles: Emphasizes minimalist UI design with support for multiple themes and visual styles.
-
Customizable Components: Easily adapt component styles to meet project-specific requirements using standard CSS.
Install Air-Components using npm:
npm install @aircomponents/ui <title>Test AirComponents</title>
<script type="module" src="https://unpkg.com/@aircomponents/[email protected]/dist/aircomponents/aircomponents.esm.js"></script>
</head>
<body>
<air-button size="medium" variant="solid" color="primary">Primary Button</air-button>
<air-button size="medium" variant="outline" color="primary">Outline Primary</air-button>
</body>
</html>import '@aircomponents/ui';
document.body.innerHTML = `
<air-button size="medium" variant="solid" color="primary">Primary Button</air-button>
`;import 'air-components';
function App() {
return (
<div>
<air-button size="medium" variant="solid" color="primary">
Primary Button
</air-button>
</div>
);
}
export default App;module.exports = {
chainWebpack: config => {
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
options.compilerOptions = {
isCustomElement: tag => tag.startsWith('air-'),
};
return options;
});
},
};<template>
<div>
<air-button size="medium" variant="solid" color="primary">
Primary Button
</air-button>
</div>
</template>
<script>
import 'air-components';
export default {
name: 'App',
};
</script>