vendure/packages/dev-server/example-plugins/ui-extensions-library/ui/angular-components/angular-ui/angular-ui.component.html

<vdr-page-block>
    <vdr-action-bar>
        <vdr-ab-left>Action bar left contents</vdr-ab-left>
        <vdr-ab-right>
            <button class="button primary" (click)="updateTitle()" [disabled]="pageTitleControl.pristine">
                Update page title
            </button>
        </vdr-ab-right>
    </vdr-action-bar>
</vdr-page-block>
<vdr-page-detail-layout>
    <vdr-page-detail-sidebar>
        <vdr-card> Sidebar content </vdr-card>
    </vdr-page-detail-sidebar>
    <vdr-page-block>
        <vdr-card title="Card">
            <div class="bg-black">
                This is a card. On a detail page, content should usually be placed inside a card.
            </div>
        </vdr-card>
        <vdr-card title="Form inputs">
            <div class="form-grid">
                <vdr-form-field label="Page title">
                    <input type="text" [formControl]="pageTitleControl" />
                </vdr-form-field>
                <vdr-form-field label="Select input">
                    <select>
                        <option>Option 1</option>
                        <option>Option 2</option>
                    </select>
                </vdr-form-field>
                <vdr-form-field label="Checkbox input">
                    <input type="checkbox" />
                </vdr-form-field>
                <vdr-form-field label="Textarea input">
                    <textarea></textarea>
                </vdr-form-field>
                <vdr-form-field label="With tooltip" tooltip="This is a tooltip for the form input">
                    <input type="text" />
                </vdr-form-field>
                <vdr-form-field label="Invalid with error">
                    <input type="text" [formControl]="invalidFormControl" />
                </vdr-form-field>
                <vdr-rich-text-editor class="form-grid-span" label="Description"></vdr-rich-text-editor>
            </div>
        </vdr-card>

        <vdr-card title="Icons">
            <demo-block label="Sizes">
                <ng-icon hlm shape="star" size="8"></ng-icon>
                <ng-icon hlm shape="star" size="16"></ng-icon>
                <ng-icon hlm shape="star" size="24"></ng-icon>
                <ng-icon hlm shape="star" size="36"></ng-icon>
                <ng-icon hlm shape="star" size="48"></ng-icon>
                <ng-icon hlm shape="star" size="56"></ng-icon>
            </demo-block>

            <demo-block label="Badges">
                <ng-icon hlm shape="user" class="has-badge--success"></ng-icon>
                <ng-icon hlm shape="user" class="has-alert"></ng-icon>
                <ng-icon hlm shape="user" class="has-badge--info"></ng-icon>
                <ng-icon hlm shape="user" class="has-badge--error"></ng-icon>
            </demo-block>

            <demo-block label="Status colors">
                <ng-icon hlm shape="user" class="is-success"></ng-icon>
                <ng-icon hlm shape="user" class="is-info"></ng-icon>
                <ng-icon hlm shape="user" class="is-warning"></ng-icon>
                <ng-icon hlm shape="user" class="is-error"></ng-icon>
            </demo-block>
        </vdr-card>

        <vdr-card title="Buttons">
            <demo-block label="Regular">
                <button class="button primary">Primary</button>
                <button class="button secondary">Secondary</button>
                <button class="button success">Success</button>
                <button class="button warning">Warning</button>
                <button class="button danger">Danger</button>
            </demo-block>
            <demo-block label="Ghost">
                <button class="button-ghost">Ghost</button>
                <a class="button-ghost" [routerLink]="['/extensions/ui-library/angular-ui']">
                    <ng-icon hlm shape="arrow" dir="right"></ng-icon>
                    John Smith
                </a>
            </demo-block>
            <demo-block label="Small">
                <button class="button-small">Small</button>
                <button class="button-small">
                    <ng-icon hlm name="lucideLayers"></ng-icon>
                    Assign to channel
                </button>
            </demo-block>
        </vdr-card>
    </vdr-page-block>
</vdr-page-detail-layout>