❤
npm
Sign UpSign In

@byu-oit/admissions-polymer-components

2.0.0 • Public • Published

Admissions Polymer Components

Includes a set of polymer web components to be used across BYU Undergraduate Admissions web apps.

Installation

The simplest way to install the component is with Bower. Run bower install admissions-polymer-components and the necesary files will be installed in a bower_components directory.

To use the components, include the web component loader polyfill and the desired components.

...
<head>
...
<script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="../admit-fieldset.html">
<link rel="import" href="../admit-heading-section.html">
<link rel="import" href="../admit-table.html">
<link rel="import" href="../admit-table-row.html">
...
</head>

admit-heading-section

Prefaces its content with a standard header.

Attributes

  • title The heading text
  • subsection If set, the section uses a smaller heading size, and can't be collapsed.
  • collapse If set, the section is collapsible.
  • is-collapsed If set, the section is collapsed.

Example

<admit-heading-section title="Admissions">
    <!-- Content goes here -->
</admit-heading-section>

admit-fieldset / admit-fieldset-row / admit-field

An admit-fieldset wraps any number of admit-field elements into a vertical 2-column layout with a heading. For multi-column layouts, you may use admit-fieldset-row elements instead.

admit-fieldset Attributes

  • title The heading text
  • collapse If set, the field set is collapsible.

admit-field Attributes

  • label The field's label (can be omitted)
  • value The field's value
  • emphasis If set, the field value will be bold

Example

<admit-fieldset title="Applicant" collapse>
    <admit-field label="Name" value="John Doe"></admit-field>
    <admit-field label="Age" value="15"></admit-field>
    <admit-field label="" value="Young Applicant!" emphasis></admit-field>
</admit-heading-section>

Using multi-column layout:

<admit-fieldset title="Clearances" collapse>
    <admit-fieldset-row>
        <span class="label">Endorsement</span>
        <span>Not Endorsed</span>
        <a class="action">clear</a>
    </admit-fieldset-row>
    <admit-fieldset-row>
        <span class="label">Dept Interest Flag</span>
        <span>Music</span>
        <a class="action">remove</a>
    </admit-fieldset-row>
    <admit-fieldset-row>
        <span class="label"></span>
        <span>Math</span>
        <a class="action">remove</a>
    </admit-fieldset-row>
    <admit-fieldset-row>
        <span class="label"></span>
        <span></span>
        <a class="action">+add flag</a>
    </admit-fieldset-row>
</admit-heading-section>

admit-table / admit-table-row

An admit-table creates a simple data table with column headings. Each row in the table is wrapped in an admit-table-row element, and must have an equal number of sub-elements for each cell in the table.

admit-table Attributes

  • columns A comma separated list of column headers. If a column doesn't require a header, set it to -. If a column header is prefixed with #, the text will be centered (good for numeric columns for example).

Example

<admit-table columns="-,Date,#Score">
    <admit-table-row>
        <span>ACT</span>
        <span>Apr 2015</span>
        <span style="text-align: center;">30</span>
    </admit-table-row>
    <admit-table-row>
        <span>SAT</span>
        <span>May 2016</span>
        <span style="text-align: center;">1400</span>
    </admit-table-row>
</admit-table>

admit-color-circle

Creates a simple circle with one of 5 color values.

admit-color-circle Attributes

  • color-index The color assigned to the circle. These values can be configured with the css variables --admit-color-circle-color[0-5]. Default values are:
    • 0: Navy
    • 1: Blue
    • 2: Light Blue
    • 3: Yellow
    • 4: Red
  • active Indicates that this circle is active

Example

<admit-color-circle color-index="0" on-click="setValue(0)"></admit-color-circle>
<admit-color-circle color-index="1" on-click="setValue(1)"></admit-color-circle>
<admit-color-circle color-index="2" active on-click="setValue(2)"></admit-color-circle>
<admit-color-circle color-index="3" on-click="setValue(3)"></admit-color-circle>
<admit-color-circle color-index="4" on-click="setValue(4)"></admit-color-circle>

Readme

Keywords

Package Sidebar

Install

npm i @byu-oit/admissions-polymer-components

Repository

github.com/byu-oit/admissions-polymer-components

Homepage

github.com/byu-oit/admissions-polymer-components#readme

Weekly Downloads

2

Version

2.0.0

License

Apache-2.0

Last publish

Collaborators

  • mjweather
  • yoshutch
  • lehinpm
  • oscea
  • stuft2
  • mhailstone
  • arasmus8
  • garygsc
  • martingarn
  • snelg
  • byu-oit-bot
Try on RunKit
Report malware