obliczeniowo/elementary

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 1391 razy

Komponenty wchodzące w skład biblioteki:

@obliczeniowo/elementary jest biblioteką Angular-ową zawierającą zbiór przydatnych komponentów takich jak:

komponent kalendarza;
preogress bary;
komponent temperatury;
komponent wykresu kołowego;
komponent wykresu 3W;
komponent horyzontalnego paska postępu;
komponenty cyfrowe;
komponent szachów;
komponenty związane z dźwiękiem;
komponenty czasu;
komponenty rozwijanej listy;
komponent drzewa rozwijanego;
komponent graficznego wyboru kombinacji kategorii;
komponent połówkowej macierzy kombinacji;
progress stepper komponent;
circle menu komponent;
perspective slider;

Bibliotekę można zainstalować:

npm i @obliczeniowo/elementary

Najnowsza wersja jest napisana w Angularz-e 17.

Konfiguracja styli

W celu poprawnego działania należy zaimportować style scss z lokalizacji node_modules/@obliczeniowo/elementary/styles/global.scss. Poprawna konfiguracja pliku angular.js pozwoli na zaimportowanie w pliku styles.scss w następujący sposób:

@import '@obliczeniowo/elementary/styles/global'

Jak wspomniałem, aby było to możliwe konieczne jest dodanie następujacej konfiguracji:

"projects": { "YourProjectName": { "projectType": "application", "schematics": { "@schematics/angular:component": { "style": "scss" } }, "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist/YourProjectName", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "src/styles.scss", ], "scripts": [], "vendorChunk": true, "extractLicenses": false, "buildOptimizer": false, "sourceMap": true, "optimization": false, "namedChunks": true, "stylePreprocessorOptions": { "includePaths": [ "node_modules", "node_modules/@obliczeniowo/elementary/styles" ] } },

Kluczowe informacje można znaleść w liniach od 37 do 41.

Konfiguracja ikon

Ikony znajdują się w projekcie, aby je załączyć niestety trzeba będzie użyć załączonego skryptu. W tym celu w pliku package.json należy umieścić następujący wpis:

"start": "npm run copy-assets && ng serve", "build": "npm run copy-assets && ng build", "copy-assets": "node ./node_modules/@obliczeniowo/elementary/assets/scripts/copy.js ./src/assets/"