angular-atomic-schematics v0.1210.2
DON'T TOUCH THIS REPOSITORY BECAUSE I'M ADJUSTING NOW.
Angular Atomic Schematics
This is an Angular Atomic Schematics.
Features
- Generate Atomic Component by CLI
- Host CSS Variable
- Atomic Common Style
Install
You can install this package with ng add
.
$ ng add angular-atomic-schematics
Skipping installation: Package already installed
? Where do you setup Angular Atomic Components? src/app/shared/components
? Where do you setup Angular Atomic Styles? src/styles
Generate Atomic Component by CLI
You can generate Atomic Component(Atom, Molecule, Organism, Template) by CLI. There are something to implement Angular Components.
ng g atom <name>
create Atom in<conponentsDir>/atoms/<name>
.ng g molecule <name>
create Molecule in<componentsDir>/molecules/<name>
.ng g organism <name>
create Organism in<componentsDir>/organisms/<name>
.ng g template <name>
create Template in<componentsDir>/templates/<name>
.
<componentsDir>
is configed when you run ng add
.
In above case, <componentsDir>
is src/app/shared/components
Host CSS Variable
You can use Host CSS Variable host-variable()
or hvar()
.
This is capcelized CSS Variable that is not accessed by other Component.
Example
// hoge.atom.scss
$host: "--hoge-atom";
@import 'atomic/host-variable';
@import 'atomic/atom';
:host {
@include atom($host);
// Define Host CSS Variable.
@include host-variable(--width, 1000px);
// You can defined `hvar()` alias of `host-variable()`.
@include hvar(--height, calc(var(--width) / 2));
}
:host {
// You can call Host CSS Variable by `host-variable()` or `hvar()`.
width: host-variable(--width);
height: hvar(--height);
}
and you can setting CSS Variable from Molecules.
// hogehoge.molecule.scss
$host: "--hogehoge-molecule";
@import 'atomic/host-variable';
@import 'atomic/molecule';
:host {
@include molecule($host);
@include hvar(--width, 300px);
}
:host {
// `hoge` is selector of above Hoge Component.
hoge {
--width: calc(var(#{$host}--width) / 2);
}
}
Atomic Common Style
Editing atomic scss files, change atomic common style.
Example
// src/styles/atomic/_molecule.scss
@import 'atomic/host-variable';
@import 'atomic/atomic-component';
@mixin molecule($host) {
@include atomic-component($host);
@include hvar($host, --base-color, black);
@include hvar($host, --main-color, white);
@include hvar($host, --accent-color, red);
// All shild atoms become the same color as this molecule
* {
--base-color: hvar(--base-color);
--main-color: hvar(--main-color);
--accent-color: hvar(--accent-color);
}
}
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago