Skylab SDK Demo Page
Accordion (Contained)
Title Text
Optional subtitle textMore information, part 1
Here is some information.
More information, part 2
Here is some information.
More information, part 3
This is a sub heading
Here is some information.
Accordion (Single)
Here are some advanced options.
Here are some advanced options.
Accordion (Stacked)
Heading 1
Accordion sections can contain anything. Typically they include form elements and short paragraphs of text.
heading that wraps because the browser width is narrow
Accordion sections can contain anything. Typically they include form elements and short paragraphs of text.
Heading 3
Accordion sections can contain anything. Typically they include form elements and short paragraphs of text.
Alert
This is a warning alert.
Take an action.
Badge
Banner
Button
Card
My Title
Subtitle
Card navigation
Footer text
Card Selection
Add a brief description or supporting details about the topic.
Add a brief description or supporting details about the topic.
Chip
Column manager
Date picker
Invalid date entered. Please enter valid date using
MM/DD/YYYY format.
Select a date between October 15, 2018 and December 5, 2021
Invalid date entered. Please enter valid date using
MM/DD/YYYY format.
Specific dates disabled: Dec 13, 2020, Dec 14, 2020, Dec 16, 2020 and Dec 20, 2020
Invalid date entered. Please enter valid date using
MM/DD/YYYY format.
Input is required
Invalid date entered. Please enter valid date using
MM/DD/YYYY format.
Primary and alternative date formats specified
Invalid date entered. Please enter valid date using
D/M/YYYY format.
Dialog
Select a date
Invalid date entered. Please enter valid date using MM/DD/YYYY format.
Complete this form
This is a dialog without a header.
This is a dialog without a primary button.
Header
Standard (see top of page)
Input (extended)
Invite-User-Dialog
Filters panel
Image
Loader
Locale switcher
Menu
Gauge
Override normal color
Override upper color
Override critical color
Bad normal color
Override normal range
Override decimal places to 0
Override decimal places to 2
Show maximum value
Meter
35 of 100 units billed
65 units available
85 of 100 units billed
15 units available
105 of 100 units billed
This tier has overages. Upgrade to avoid fees.
Multi-select
This multi-select is deliberately empty for usage with acceptance tests
Need Assistance
Pagination
Base pagination example (with table)
| Header | Header | Header | Header | Header | Header | Header |
|---|
Rows per page preselected
Start index preselected
Progress
Radio group
Single Select
This single select is deliberately empty for usage with acceptance tests
This single select is deliberately empty for usage with acceptance tests
This single select (with replacealloptions attribute) is deliberately empty for usage with acceptance tests
Star Rating
Stepper
Subscription countdown
Subscription Expiration
Table (legacy s-table class)
Medium row height (default)
| Header | Header | Header | Header | Header | |
|---|---|---|---|---|---|
| Cell text | Text link | Cell text | Cell text | 201,800 | |
| Cell text | Text link | Cell text | Cell text | 90,600 | |
| Cell text | Text link | Cell text | Cell text | 20,150,421 | |
| Cell text | Text link | Cell text | Cell text | 118,252,800 |
Small row height with gridlines
| Header | Header | Header | Header | Header | Header |
|---|---|---|---|---|---|
| Cell text | Cell text | Cell text | Cell text | 201,800 | Cell text |
| Cell text | Cell text | Cell text | Cell text | 90,600 | Cell text |
| Cell text | Cell text | Cell text | Cell text | 20,150,421 | Cell text |
| Cell text | Cell text | Cell text | Cell text | 118,252,800 | Cell text |
Large row height (auto width)
| Header | Header | Header | Header | Header | Header |
|---|---|---|---|---|---|
| Cell text | Cell textSecondary text | Cell text | Cell text | 201,800 | Cell text |
| Cell text | Cell textSecondary text | Cell text | Cell text | 90,600 | Cell text |
| Cell text | Cell textSecondary text | Cell text | Cell text | 20,150,421 | Cell text |
| Cell text | Cell textSecondary text | Cell text | Cell text | 118,252,800 | Cell text |
Table (with s-table-container requirement)
Medium row height (default)
Sortable header 2
|
Header | Header | Header | ||
|---|---|---|---|---|---|
| Cell text | Text link | Cell text | Cell text | 201,800 | |
| Cell text | Text link | Cell text | Cell text | 90,600 | |
| Cell text | Text link | Cell text | Cell text | 20,150,421 | |
| Text link | Cell text | Cell text | 118,252,800 |
Small row height with gridlines
| Header | Header | Header | Header | Header | Header |
|---|---|---|---|---|---|
| Cell text | Cell text | Cell text | Cell text | 201,800 | Cell text |
| Cell text | Cell text | Cell text | Cell text | 90,600 | Cell text |
| Cell text | Cell text | Cell text | Cell text | 20,150,421 | Cell text |
| Cell text | Cell text | Cell text | Cell text | 118,252,800 | Cell text |
Large row height with width-auto
| Header | Header | Header | Header | Header | Header |
|---|---|---|---|---|---|
| Cell text | Cell textSecondary text | Cell text | Cell text | 201,800 | Cell text |
| Cell text | Cell textSecondary text | Cell text | Cell text | 90,600 | Cell text |
| Cell text | Cell textSecondary text | Cell text | Cell text | 20,150,421 | Cell text |
| Cell text | Cell textSecondary text | Cell text | Cell text | 118,252,800 | Cell text |
Row actions
| Header 1 | |
|---|---|
| Cell text |
|
| Cell text |
|
| Cell text |
|
| Cell text |
|
| Cell text |
|
| Cell text |
|
| Cell text |
|
Fixed headers
| Header | Header | Header | Header | Header | Header |
|---|---|---|---|---|---|
| Cell text | Cell textSecondary text | Cell text | Cell text | 201,800 | Cell text |
| Cell text | Cell textSecondary text | Cell text | Cell text | 90,600 | Cell text |
| Cell text | Cell textSecondary text | Cell text | Cell text | 20,150,421 | Cell text |
| Cell text | Cell textSecondary text | Cell text | Cell text | 118,252,800 | Cell text |
| Cell text | Cell textSecondary text | Cell text | Cell text | 112,800 | Cell text |
| Cell text | Cell textSecondary text | Cell text | Cell text | 12,800 | Cell text |
| Cell text | Cell textSecondary text | Cell text | Cell text | 100 | Cell text |
| Cell text | Cell textSecondary text | Cell text | Cell text | 118,800 | Cell text |
| Cell text | Cell textSecondary text | Cell text | Cell text | 252,800 | Cell text |
| Cell text | Cell textSecondary text | Cell text | Cell text | 2,800 | Cell text |
Static column widths
| Header | Header | Header | Header | Header | Header | Header |
|---|---|---|---|---|---|---|
| Cell text | Cell text | Cell text | A very long line of text in the cell | A very long line of text in the cell | Cell text | Cell text |
| Cell text | Cell text | Cell text | A very long line of text in the cell | A very long line of text in the cell | Cell text | Cell text |
| Cell text | Cell text | Cell text | A very long line of text in the cell | A very long line of text in the cell | Cell text | Cell text |
| Cell text | Cell text | Cell text | A very long line of text in the cell | A very long line of text in the cell | Cell text | Cell text |
Horizontal scroll
| Header | Header | Header | Header | Header | Header | Header |
|---|---|---|---|---|---|---|
| Cell text | Cell text | Cell text | A very long line of text in the cell | A very long line of text in the cell | Cell text | Cell text |
| Cell text | Cell text | Cell text | A very long line of text in the cell | A very long line of text in the cell | Cell text | Cell text |
| Cell text | Cell text | Cell text | A very long line of text in the cell | A very long line of text in the cell | Cell text | Cell text |
| Cell text | Cell text | Cell text | A very long line of text in the cell | A very long line of text in the cell | Cell text | Cell text |
Fixed column
| Column header | Column header | Column header | Column header | Column header | Column header | Column header |
|---|---|---|---|---|---|---|
| Row header | Cell text | Cell text | A very long line of text in the cell | A very long line of text in the cell | Cell text | Cell text |
| Row header | Cell text | Cell text | A very long line of text in the cell | A very long line of text in the cell | Cell text | Cell text |
| Row header | Cell text | Cell text | A very long line of text in the cell | A very long line of text in the cell | Cell text | Cell text |
Fixed column and fixed column headers
| Column header | Column header | Column header | Column header | Column header | Column header | Column header |
|---|---|---|---|---|---|---|
| Row header | Cell text | Cell text | A very long line of text in the cell | A very long line of text in the cell | Cell text | Cell text |
| Row header | Cell text | Cell text | A very long line of text in the cell | A very long line of text in the cell | Cell text | Cell text |
| Row header | Cell text | Cell text | A very long line of text in the cell | A very long line of text in the cell | Cell text | Cell text |
| Row header | Cell text | Cell text | A very long line of text in the cell | A very long line of text in the cell | Cell text | Cell text |
| Row header | Cell text | Cell text | A very long line of text in the cell | A very long line of text in the cell | Cell text | Cell text |
| Row header | Cell text | Cell text | A very long line of text in the cell | A very long line of text in the cell | Cell text | Cell text |
| Row header | Cell text | Cell text | A very long line of text in the cell | A very long line of text in the cell | Cell text | Cell text |
| Row header | Cell text | Cell text | A very long line of text in the cell | A very long line of text in the cell | Cell text | Cell text |
| Row header | Cell text | Cell text | A very long line of text in the cell | A very long line of text in the cell | Cell text | Cell text |
| Row header | Cell text | Cell text | A very long line of text in the cell | A very long line of text in the cell | Cell text | Cell text |
| Row header | Cell text | Cell text | A very long line of text in the cell | A very long line of text in the cell | Cell text | Cell text |
| Row header | Cell text | Cell text | A very long line of text in the cell | A very long line of text in the cell | Cell text | Cell text |
| Row header | Cell text | Cell text | A very long line of text in the cell | A very long line of text in the cell | Cell text | Cell text |
| Row header | Cell text | Cell text | A very long line of text in the cell | A very long line of text in the cell | Cell text | Cell text |
| Row header | Cell text | Cell text | A very long line of text in the cell | A very long line of text in the cell | Cell text | Cell text |
Tabs
Responsive tabs using s-select event.target
Responsive tabs using id matching with panels
| Name | Description |
|---|---|
| Apple | A common tree fruit grown in mild climates |
| Orange | A citrus fruit grown in warm climates. |
Fruit basket
Kiwi
Banana
Meyer lemon
Strawberry
Legacy tabs with hard-coded child elements (not recommended)
Tag
Toast
Dismiss all toasts
Dismiss single toast
Toast id to be dismissed:Toggle
Internet power
Tooltip
Buttons
Small text
Help tooltip text: adding a super long text here so it exceeds the max-width and we can test it
Checkbox
Select all
Inside a dialog
Title
Content
tooltip text asdfsdf asdfsdf sdfadfs asdfasdf asdfasdf asdfasdf asdfsdfsdfsdfsdfds
Top nav
The
<aui-supernav> component is shown at the top of this page. This section offers some options
that can be implemented by the consuming application.
Basic Uploader (s-uploader)
(Note to developers: Define the file requirements here. Here's an example.)
Accepted file types: .pdf, any image
Maximum file size: 75 MB
Uploader
HTML children can be customized. Example:
Accepted file types: .pdf, any image. Maximum file size: 75mb
Accepted file types: .pdf, any image. Maximum file size: 75mb
HTML children can be customized. Example:
Files are being uploaded and imported.Basic file uploader
Accepts PDF or image
X-Stepper
aui-widget-grid
Empty widget grid
define widgets in data