5 |
10 |
11 |
15 |
5 | Pop crumb
6 | Push router link crumb
7 | Push normal link crumb
8 | Push log action crumb
9 |
10 | Breadcrumbs is a system component used by the page component. It's not meant to be used directly.
14 |
20 |
21 |
25 |
7 |
12 |
13 | Choice is a system component used by the checkbox component and choice list component. It's not meant to be used directly.
14 |
20 |
21 |
23 |
16 |
23 |
24 |
25 |
29 | {{ code }}-
9 |
- View source code on GitHub 10 |
- View Polaris specs 11 |
Angular Polaris is a conversion of the Shopify Polaris project from React to Angular.
6 |The Angular Polaris library tries to implement the Shopify Polaris API as-is as much as possible. Exceptions are made when the Shopify Polaris breaks common Angular convention. Typical adaptation include:
7 | 8 |-
9 |
- Prefixing all component with
plrs.
10 | - Component event use the Angular
@Outputnotation withEventEmitter. (e.g.:<plrsCheckbox (change)="onchange($event)"></plrsCheckbox>)
11 | - Self-closing tags are not used because Angular doesn't support that syntax. 12 |
The purpose of this project is to illustrate the component that are available and how to use them in your angular project.
17 |-
20 |
- View this project on GitHub 21 |
3 |
5 |
6 |
21 |
--------------------------------------------------------------------------------
/src/app/library/banner/banner.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, Output, EventEmitter, OnInit, TemplateRef } from '@angular/core';
2 | import { AngularComplexAction } from '../types';
3 | import { createUniqueIDFactory } from '@shopify/javascript-utilities/other';
4 |
5 | const getUniqueID = createUniqueIDFactory('Banner');
6 |
7 | /**
8 | * Component to display a Shopify layout
9 | */
10 | @Component({
11 | selector: 'plrsBanner',
12 | templateUrl: './banner.component.html',
13 | host: {
14 | '[class.Polaris-Banner]': 'true',
15 | '[class.Polaris-Banner--statusSuccess]': 'status == "success"',
16 | '[class.Polaris-Banner--statusInfo]': 'status == "info"',
17 | '[class.Polaris-Banner--statusWarning]': 'status == "warning"',
18 | '[class.Polaris-Banner--statusCritical]': 'status == "critical"',
19 | '[class.Polaris-Banner--hasDismiss]': 'dimissible',
20 | '[attr.role]': '"banner " + status',
21 | '[attr.aria-labelledby]': 'id + "Heading"',
22 | '[attr.aria-describedby]': 'id + "Content"',
23 | '[attr.tabindex]': '0',
24 | },
25 | })
26 | export class BannerComponent implements OnInit {
27 |
28 | ngOnInit() { }
29 |
30 | /**
31 | * Title content for the card.
32 | */
33 | @Input() title: string = '';
34 |
35 | public id = getUniqueID();
36 |
37 | private _icon : string;
38 |
39 | /**
40 | * Icon to display in the banner.
41 | */
42 | @Input() public get icon(): string {
43 | if (this._icon) {
44 | return this._icon;
45 | } else {
46 | switch (this.status) {
47 | case 'success':
48 | return 'circle-check-mark';
49 | case 'info':
50 | return 'flag';
51 | case 'warning':
52 | return 'circle-alert';
53 | case 'critical':
54 | return 'circle-barred';
55 | default:
56 | return 'confetti';
57 | }
58 | }
59 | };
60 | public set icon(value: string) {
61 | this._icon = value;
62 | }
63 |
64 | /**
65 | * Sets the status of the banner.
66 | */
67 | @Input() status: '' | 'success' | 'info' | 'warning' | 'critical' = '';
68 |
69 | /**
70 | * Action for banner.
71 | */
72 | @Input() action: AngularComplexAction;
73 |
74 | /**
75 | * Displays a secondary action
76 | */
77 | @Input() secondaryAction: AngularComplexAction;
78 |
79 | @Output() dismiss: EventEmitter
7 |
9 | {{ title }}
8 |
10 |
20 |
13 |
14 |
17 |
18 |
19 |
3 |
5 |
8 |
16 |
17 |
21 |
18 |
20 | -
3 |
-
4 |
10 | 17 |
18 |
2 | {{ label }}
3 |
4 |
6 |
13 |
14 |
7 |
8 |
9 |
10 | {{ error }}
11 |
12 |
16 |
18 |
2 |
14 |
--------------------------------------------------------------------------------
/src/app/library/layout/layout.annotated.section.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, Input } from '@angular/core';
2 |
3 | /**
4 | * Component to display a Shopify layout
5 | */
6 | @Component({
7 | selector: 'plrsLayoutAnnotatedSection',
8 | templateUrl: 'layout.annotated.section.component.html',
9 | host: {
10 | '[class.Polaris-Layout__AnnotatedSection]': 'true'
11 | }
12 | })
13 | export class LayoutAnnotatedSectionComponent implements OnInit {
14 |
15 | @Input() title: string;
16 | @Input() description: string;
17 |
18 |
19 | /**
20 | * Automatically add a sectionned to the layout.
21 | */
22 | ngOnInit() {
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/app/library/layout/layout.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | /**
4 | * Component to display a Shopify layout
5 | */
6 | @Component({
7 | selector: 'plrsLayout:not([sectioned])',
8 | template: `
3 |
13 |
4 |
9 |
5 |
8 | {{ title }}
6 |{{ description }}
7 |
10 |
12 |
10 |
12 |
--------------------------------------------------------------------------------
/src/app/library/page/page.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, Input } from '@angular/core';
2 | import { PaginationDescriptor } from '../pagination/pagination.descriptor';
3 | import { AngularComplexAction } from '../types';
4 |
5 | /**
6 | * Component to display a Shopify layout
7 | */
8 | @Component({
9 | selector: 'plrsPage',
10 | templateUrl: './page.component.html',
11 | host: {
12 | '[class.Polaris-Page]': 'true',
13 | '[class.Polaris-Page--fullWidth]': 'fullWidth !== false'
14 | },
15 | styles: [':host {display: block;}']
16 | })
17 | export class PageComponent implements OnInit {
18 |
19 |
20 | @Input() public title: string = '';
21 | @Input() public icon: string = '';
22 | @Input() public breadcrumbs: AngularComplexAction[];
23 | @Input() public secondaryActions: AngularComplexAction[];
24 | @Input() public primaryAction: AngularComplexAction;
25 | @Input() public pagination: PaginationDescriptor;
26 | @Input() public fullWidth: boolean = false;
27 |
28 | /**
29 | * Automatically add a sectionned to the layout.
30 | */
31 | ngOnInit() {
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/src/app/library/page/page.header.component.html:
--------------------------------------------------------------------------------
1 |
12 |
13 | {{ title }}
14 | 15 |
16 |
62 |
--------------------------------------------------------------------------------
/src/app/library/page/page.header.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit, Input } from '@angular/core';
2 | import { PaginationDescriptor } from '../pagination/pagination.descriptor';
3 | import { AngularComplexAction } from '../types';
4 |
5 | /**
6 | * Component to display a Shopify layout
7 | */
8 | @Component({
9 | selector: 'plrsPageHeader',
10 | templateUrl: './page.header.component.html',
11 | host: {
12 | '[class.Polaris-Page__Header]': 'true',
13 | '[class.Polaris-Page__Header--hasBreadcrumbs]': 'breadcrumbs !== undefined',
14 | '[class.Polaris-Page__Header--hasPagination]': 'pagination !== undefined',
15 | },
16 | styles: [':host {display: block;}'],
17 | })
18 | export class PageHeaderComponent implements OnInit {
19 |
20 |
21 | @Input() public title: string = '';
22 | @Input() public icon: string = '';
23 | @Input() public breadcrumbs: AngularComplexAction[];
24 | @Input() public secondaryActions: AngularComplexAction[];
25 | @Input() public primaryAction: AngularComplexAction;
26 | @Input() public pagination: PaginationDescriptor;
27 |
28 | /**
29 | * Automatically add a sectionned to the layout.
30 | */
31 | ngOnInit() {
32 |
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/app/library/pagination/index.ts:
--------------------------------------------------------------------------------
1 | export { PaginationComponent } from './pagination.component';
2 | export { PaginationDescriptor } from './pagination.descriptor';
3 |
--------------------------------------------------------------------------------
/src/app/library/pagination/pagination.component.html:
--------------------------------------------------------------------------------
1 |
6 |
8 |
18 |
19 |
20 |
21 |
2 |
8 |
14 |
34 |
--------------------------------------------------------------------------------
/src/app/library/resource.list/resource.list.item.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, OnInit, HostListener, TemplateRef } from '@angular/core';
2 |
3 | /**
4 | * Component to display a Shopify layout
5 | */
6 | @Component({
7 | selector: 'plrsResourceListItem',
8 | templateUrl: './resource.list.item.component.html',
9 | host: {
10 | '[class.Polaris-ResourceList__ItemWrapper]': 'true',
11 | },
12 | styles: [':host {display: list-item;}']
13 | })
14 | export class ResourceListItemComponent implements OnInit {
15 |
16 | @Input() url: string;
17 | @Input() attributeOne: string;
18 | @Input() attributeTwo: string;
19 | @Input() attributeThree: string;
20 | @Input() routerLink: string = '';
21 | @Input() media: string|TemplateRef
15 |
16 |
33 |
17 |
19 |
20 |
21 |
32 |
22 |
31 | {{ attributeOne }}
23 |{{ attributeTwo }}
24 |
25 |
26 | {{ badge.content }}
27 |
28 |
29 | {{ attributeThree }}
30 |
5 |
21 |
24 |
25 |
22 |
23 |
{{ contents }}
2 | {{ minimumLineContent }}
3 |
--------------------------------------------------------------------------------
/src/app/library/text.field/resizer.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, Output, OnInit, OnChanges, EventEmitter, ViewChild, ElementRef, HostListener } from '@angular/core';
2 | import { NgModel } from '@angular/forms';
3 |
4 |
5 | /**
6 | * Component to display a Shopify layout
7 | */
8 | @Component({
9 | selector: 'plrsResizer',
10 | templateUrl: 'resizer.component.html',
11 | host: {
12 | '[class.Polaris-TextField__Resizer]': 'true',
13 | '[attr.aria-hidden]': '"true"'
14 | }
15 | })
16 | export class ResizerComponent implements OnInit, OnChanges {
17 |
18 | @ViewChild('contentNode') private contentNode: ElementRef;
19 | @ViewChild('minimumLinesNode') private minimumLinesNode: ElementRef;
20 |
21 | @Output() heightChange: EventEmitter
6 |
10 |
7 |
9 |
15 |
19 |
--------------------------------------------------------------------------------
/src/app/library/text.field/spinner.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, Output, OnInit, EventEmitter, HostListener } from '@angular/core';
2 |
3 | /**
4 | * Component to display a Shopify layout
5 | */
6 | @Component({
7 | selector: 'plrsSpinner',
8 | templateUrl: 'spinner.component.html',
9 | host: {
10 | '[class.Polaris-TextField__Spinner]': 'true',
11 | '[attr.aria-hidden]': '"true"'
12 | }
13 | })
14 | export class SpinnerComponent {
15 |
16 | ngOnInit() { }
17 |
18 | constructor() { }
19 |
20 | @Output() change: EventEmitter
16 |
18 |
6 |
7 |
11 |
31 |
32 |
48 |
56 |
57 |
8 |
10 |
7 |
9 | The page you are looking for could not be found.
5 |Raise an issue on Git Hub if you think this is a mistake.
6 |