Alma DS Web Components

Welcome to Alma DS Web Components, the official Web Components library composed with LitElement from Dasa.

Installation

Using your terminal and Yarn, install Alma Web Components:

yarn add @dasa-health/alma-wc

Usage

Here is an example of how you can use Alma Web Components in your project:

Vue.js Configuration

Configure Alma Web Components for Vue.js versions 2 and 3:

Vue.js 2 Configuration

import Vue from 'vue'
import App from './App.vue'
import Alma from "@dasa-health/alma-wc";

// Importing tokens from another brand
import '@dasa-health/alma-tokens/src/assets/css/das/das-tokens.css';

Vue.use(Alma);

new Vue({
  render: h => h(App),
}).$mount('#app')

Vue.js 3 Configuration

import { createApp } from 'vue'
import App from './App.vue'
import Alma from "@dasa-health/alma-wc";

// Importing tokens from another brand
import '@dasa-health/alma-tokens/src/assets/css/das/das-tokens.css';

const app = createApp(App)

app.use(Alma);
app.mount('#app')

Usage

Here is an example of how you can use Alma Web Components in your project:

<alma-button
  icon="arrowUp"
  type="primary"
  size="MD"
  label="Click Me!"
></alma-button>

Svelte Configuration

First, import the Alma Web Components:

<script>
  import { onMount } from 'svelte';
  import "@dasa-health/alma-wc";

  // Importing tokens from another brand
  import "@dasa-health/alma-tokens/src/assets/css/das/das-tokens.css";

  onMount(() => {
    console.log("Alma Web Components loaded.");
  });
</script>

<alma-button
  icon="arrowUp"
  type="primary"
  size="md"
  label="Click Me!"
></alma-button>

Angular Configuration

First, add the Alma Web Components to your app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { AppComponent } from './app.component';
import { createCustomElement } from '@angular/elements';
import { AlmaComponentsModule } from '@dasa-health/alma-wc';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AlmaComponentsModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {
  constructor() {
    const almaButton = createCustomElement(
      AlmaComponentsModule.getComponents().almaButton,
      { injector: this.injector }
    );
    customElements.define('alma-button', almaButton);
  }

  ngDoBootstrap() {}
}

Then, add the component to your Angular template:

<alma-button
  icon="arrowUp"
  type="primary"
  size="md"
  label="Click Me!"
></alma-button>

Demo

To see our Web Components in action, you can check out our demo page.

Learn More

To learn more about the Web Components available in Alma Design System, please refer to our official documentation.