js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

update angular getting started (#1352)

Browse Source
This commit is contained in:
Bernhard
2023-05-24 16:34:05 +02:00
committed by konnorrogers
parent 2e2cee4cd6
commit 7390ac37bf
1 changed files with 28 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
docs/frameworks/angular.md
View File

@@ -10,10 +10,30 @@ To add Shoelace to your Angular app, install the package from npm.
npm install @shoelace-style/shoelace
```
Next, [include a theme](/getting-started/themes) and set the [base path](/getting-started/installation#setting-the-base-path) for icons and other assets. In this example, we'll import the light theme and use the CDN as a base path.
Next, [include a theme](/getting-started/themes) into your project. In this example, we'll import the light theme and use the CDN as a base path.
Include the theme into your `angular.json` config.
```json
...
"styles": [
"src/app/theme/styles.scss",
"@shoelace-style/shoelace/dist/themes/light.css"
],
...
```
OR
include it into your `styles.scss`.
```scss
@use "@shoelace-style/shoelace/dist/themes/light.css";
...
```
After that set the [base path](/getting-started/installation#setting-the-base-path) in your `AppModule` for icons and other assets.
```jsx
import '@shoelace-style/shoelace/dist/themes/light.css';
import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path';
setBasePath('https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/');
@@ -31,6 +51,10 @@ import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { AppComponent } from './app.component';
import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path';
setBasePath('https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/dist/');
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
@@ -48,7 +72,8 @@ import { SlDrawer } from '@shoelace-style/shoelace';
@Component({
selector: 'app-drawer-example',
template: '<div id="page"><button (click)="showDrawer()">Show drawer</button><sl-drawer #drawer label="Drawer" class="drawer-focus" style="--size: 50vw"><p>Drawer content</p></sl-drawer></div>'
template: '<div id="page"><button (click)="showDrawer()">Show drawer</button><sl-drawer #drawer label="Drawer" class="drawer-focus" style="--size: 50vw"><p>Drawer content</p></sl-drawer></div>',
providers: [SlDrawer]
})
export class DrawerExampleComponent implements OnInit {