PeriodicTable

UI is from https://github.com/FlorianFe/Elements

Dev environment is from ng-zorro-antd

Quick start

$ npm install mta-periodic-table -S

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MtaPeriodicTableModule } from 'mta-periodic-table';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MtaPeriodicTableModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Input params

@Input() isShowElDetail: boolean // 是否展示元素详情, default: true
@Input() maxSelect: number; // 最大可以选择元素的个数
@Input() canSelectElements: string[]; // 关联可以选择的元素string[],例['h', 'li', 'be']

<mta-periodic-table></mta-periodic-table>

See details

Development

$ git clone https://github.com/matai-tech/periodic-table.git
$ cd periodic-table
$ npm install
$ npm run start