3. Components

Table of contents

1. Common data binds
2. Window
3. Button
4. Radio

Common data binds

All components have a theme and variant attribute, see more about how to use them in the Theming page.

Window

Import

Add this lines of code to your app.module.ts:

import { OsWindowModule } from "@santinobch/os-window-angular";

...
@NgModule({
  imports: [
    OsWindowModule
  ]
})

Structure

This is the normal format of a os-window component instance:

<os-window>
    <window-title> Example title </window-title>

    <window-content>
        <!-- Fill me with anything -->
    </window-content>
</os-window>

Attributes

• minHeight & minWidth: The window will not resize under the inputed value. Deafults to 200px.
• height & width: Sets the initial Height & Width of the window.
• Position: Initial position of the window, first string determines X coordinates and the second one Y coordinates. Defaults to left top or 0 0.
  • X Coordinates: left center right or any number
  • Y Coordinated: top center bottom or any number
• resizable: Disables resizing for the user, if set to false.
• maximizable: Will stop the window from maximizing if set to false, and also will hide the maximize button.
• theme & variant. See theming.

Examples of attributes

<os-window 
  [minHeight]=300 
  [minWidth]=300
  [height]=400 
  [width]=600
  position="right bottom"
  [resizable]="true"
  [maximizable]="true">
</os-window>

Button

Import

I love buttons to use them you need to import them and then add them to the NgModule imports of your app.module.ts:

import { OsButtonModule } from "@santinobch/os-window-angular";

...

@NgModule({
  imports: [
    OsButtonModule
  ]
})

Structure

To create a os-button you need to add the os-button attribute to the button or a tag. This is the normal format of a button component instance:

<button os-button>
</button>

<a 
  href="google.com"
  os-button>
</a>

Attributes

• disabled, marks the button as disabled.
• theme & variant. See theming.

Radio

Import

First add the module to the NgModule imports of your app.module.ts:

import { OsRadioModule } from "@santinobch/os-window-angular"';

...

@NgModule({
  imports: [
    OsRadioModule
  ]
})

Structure

This is the normal structure of the os-radio component

<os-radio>Test 1</os-radio>

Attributes

• labelPosition: The component creates a <input type="radio"> and a <label> sibling. The position of the label tag can be modified with the labelPosition attribute. Defaults to after.
• theme & variant. See theming.

-This component also accepts the attributes the <input type="radio"> tag supports:

• name
• ariaLabel
• ariaLabel
• ariaLabelledby
• ariaDescribedby
• checked
• value
• disabled
• required

Examples of attributes

<!-- Label before radio input -->
<os-radio labelPosition="before">Test 1</os-radio>

<!-- Label after radio input -->
<os-radio labelPosition="after">Test 1</os-radio>