Stenax NPM | npm.io

NpmVersion

Stenax is a UI component library build with Stencil.

Instalation

via NPM

# npm
npm install stenax

# yarn
yarn add stenax

CLI useage

npm link

$ stenax

Usage
$ npm start <input> <option>

Inputs
  generate,     g  Generate boilerplate

Options
  component,    c  Generate component boilerplate

Examples
  $ npm run cmd generate component <component name>

via CDN

Getting Started

Quick-start CDN

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <sx-button sx-type="filled">Hello Stenax</sx-button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/stenax@latest/dist/stenax.min.js"></script>
</body>
</html>

API

Color

Element uses a specific set of palettes to specify colors to provide a consistent look and feel for the products you build.

Main Color

The main color of Element is bright and friendly blue.

Main Color

Secondary Color

Besides the main color, you need to use different scene colors in different scenarios (for example, dangerous color indicates dangerous operation)

Secondary Color

Neutral Color

Neutral colors are for text, background and border colors. You can use different neutral colors to represent the hierarchical structure.

Neutral Color

Layout

Quickly and easily create layouts with the basic 24-column.

Basic layout

Create basic grid layout using columns.

<sx-row>
  <sx-col span="24">
    <div class="grid-content bg-purple-dark color-white text-center">L1</div>
  </sx-col>
</sx-row>
<sx-row>
  <sx-col span="12">
    <div class="grid-content bg-purple color-white text-center">L2</div>
  </sx-col>
  <sx-col span="12">
    <div class="grid-content bg-purple-light color-white text-center">L3</div>
  </sx-col>
</sx-row>
<sx-row>
  <sx-col span="8">
    <div class="grid-content bg-purple color-white text-center">L4</div>
  </sx-col>
  <sx-col span="8">
    <div class="grid-content bg-purple-light color-white text-center">L5</div>
  </sx-col>
  <sx-col span="8">
    <div class="grid-content bg-purple color-white text-center">L6</div>
  </sx-col>
</sx-row>
<sx-row>
  <sx-col span="6">
    <div class="grid-content bg-purple-light color-white text-center">L7</div>
  </sx-col>
  <sx-col span="6">
    <div class="grid-content bg-purple color-white text-center">L7</div>
  </sx-col>
  <sx-col span="6">
    <div class="grid-content bg-purple-light color-white text-center">L8</div>
  </sx-col>
  <sx-col span="6">
    <div class="grid-content bg-purple color-white text-center">L9</div>
  </sx-col>
</sx-row>
<sx-row>
  <sx-col span="4">
    <div class="grid-content bg-purple-light color-white text-center">L10</div>
  </sx-col>
  <sx-col span="4">
    <div class="grid-content bg-purple color-white text-center">L11</div>
  </sx-col>
  <sx-col span="4">
    <div class="grid-content bg-purple-light color-white text-center">L12</div>
  </sx-col>
  <sx-col span="4">
    <div class="grid-content bg-purple color-white text-center">L13</div>
  </sx-col>
  <sx-col span="4">
    <div class="grid-content bg-purple-light color-white text-center">L14</div>
  </sx-col>
  <sx-col span="4">
    <div class="grid-content bg-purple color-white text-center">L15</div>
  </sx-col>
</sx-row>

Basic layout

Column spacing

Column spacing is supported.

<sx-row gutter="20">
  <sx-col span="6">
    <div class="grid-content bg-purple-dark color-white text-center">L1</div>
  </sx-col>
  <sx-col span="6">
    <div class="grid-content bg-purple color-white text-center">L2</div>
  </sx-col>
  <sx-col span="6">
    <div class="grid-content bg-purple-dark color-white text-center">L3</div>
  </sx-col>
  <sx-col span="6">
    <div class="grid-content bg-purple color-white text-center">L4</div>
  </sx-col>
</sx-row>

Column spacing

Hybrid layout

Form a more complex hybrid layout by combining the basic 1/24 columns.

<sx-row gutter="20">
  <sx-col span="16">
    <div class="grid-content bg-purple-dark color-white text-center">L1</div>
  </sx-col>
  <sx-col span="8">
    <div class="grid-content bg-purple color-white text-center">L2</div>
  </sx-col>
</sx-row>
<sx-row gutter="20">
  <sx-col span="8">
    <div class="grid-content bg-purple color-white text-center">L3</div>
  </sx-col>
  <sx-col span="8">
    <div class="grid-content bg-purple color-white text-center">L4</div>
  </sx-col>
  <sx-col span="4">
    <div class="grid-content bg-purple-dark color-white text-center">L5</div>
  </sx-col>
  <sx-col span="4">
    <div class="grid-content bg-purple-dark color-white text-center">L6</div>
  </sx-col>
</sx-row>
<sx-row gutter="20">
  <sx-col span="4">
    <div class="grid-content bg-purple-dark color-white text-center">L7</div>
  </sx-col>
  <sx-col span="16">
    <div class="grid-content bg-purple color-white text-center">L8</div>
  </sx-col>
  <sx-col span="4">
    <div class="grid-content bg-purple-dark color-white text-center">L9</div>
  </sx-col>
</sx-row>

Hybrid layout

Column offset

You can specify column offsets.

<sx-row gutter="20">
  <sx-col span="6">
    <div class="grid-content bg-purple-dark color-white text-center">L1</div>
  </sx-col>
  <sx-col span="6" offset="6">
    <div class="grid-content bg-purple-dark color-white text-center">L2</div>
  </sx-col>
</sx-row>
<sx-row gutter="20">
  <sx-col span="6" offset="6">
    <div class="grid-content bg-purple color-white text-center">L3</div>
  </sx-col>
  <sx-col span="6" offset="6">
    <div class="grid-content bg-purple-light color-white text-center">L4</div>
  </sx-col>
</sx-row>
<sx-row gutter="20">
  <sx-col span="12" offset="6">
    <div class="grid-content bg-purple color-white text-center">L5</div>
  </sx-col>
</sx-row>

Column offset

Alignment

Use the flex layout to make flexible alignment of columns.

<sx-row gutter="10">
  <sx-col xs="8" sm="6" md="4" lg="3" xl="1">
    <div class="grid-content bg-purple-dark color-white text-center">L1</div>
  </sx-col>
  <sx-col xs="4" sm="6" md="8" lg="9" xl="11">
    <div class="grid-content bg-purple-light color-white text-center">L2</div>
  </sx-col>
  <sx-col xs="4" sm="6" md="8" lg="9" xl="11">
    <div class="grid-content bg-purple color-white text-center">L3</div>
  </sx-col>
  <sx-col xs="8" sm="6" md="4" lg="3" xl="1">
    <div class="grid-content bg-purple-light color-white text-center">L4</div>
  </sx-col>
</sx-row>

Alignment

Responsive Layout

Taking example by Bootstrap's responsive design, five breakpoints are preset: xs, sm, md, lg and xl.

/* Comming Soon */

Icons

Element provides a set of common icons.

Basic usage

Just assign the class name to name=iconName.

<sx-icon name="edit"></sx-icon>
<sx-icon name="loading" size="20"></sx-icon>
<sx-icon name="back" size="30" color="red"></sx-icon>

Icons

/* Comming Soon */

Button

Commonly used button.

Basic usage

<sx-row>
  <sx-button>Default</sx-button>
  <sx-button type="primary">Primary</sx-button>
  <sx-button type="success">Success</sx-button>
  <sx-button type="info">Info</sx-button>
  <sx-button type="warning">Warning</sx-button>
  <sx-button type="danger">Danger</sx-button>
</sx-row>

<sx-row>
  <sx-button plain>Plain</sx-button>
  <sx-button type="primary" plain>Primary</sx-button>
  <sx-button type="success" plain>Success</sx-button>
  <sx-button type="info" plain>Info</sx-button>
  <sx-button type="warning" plain>Warning</sx-button>
  <sx-button type="danger" plain>Danger</sx-button>
</sx-row>

<sx-row>
  <sx-button round>Round</sx-button>
  <sx-button type="primary" round>Primary</sx-button>
  <sx-button type="success" round>Success</sx-button>
  <sx-button type="info" round>Info</sx-button>
  <sx-button type="warning" round>Warning</sx-button>
  <sx-button type="danger" round>Danger</sx-button>
</sx-row>

<sx-row>
  <sx-button circle></sx-button>
  <sx-button type="primary" circle></sx-button>
  <sx-button type="success" circle></sx-button>
  <sx-button type="info" circle></sx-button>
  <sx-button type="warning" circle></sx-button>
  <sx-button type="danger" circle></sx-button>
</sx-row>

<sx-row>
  <sx-button circle>A</sx-button>
  <sx-button type="primary" circle>B</sx-button>
  <sx-button type="success" circle>C</sx-button>
  <sx-button type="info" circle>D</sx-button>
  <sx-button type="warning" circle>E</sx-button>
  <sx-button type="danger" circle>F</sx-button>
</sx-row>

<sx-row>
  <sx-button icon="search" circle color="black"></sx-button>
  <sx-button type="primary" icon="edit" circle></sx-button>
  <sx-button type="success" icon="check" circle></sx-button>
  <sx-button type="info" icon="message" circle></sx-button>
  <sx-button type="warning" icon="star-off" circle></sx-button>
  <sx-button type="danger" icon="delete" circle></sx-button>
</sx-row>

Disabled Button

The disabled attribute determines if the button is disabled.

<sx-row>
  <sx-button disabled>Default</sx-button>
  <sx-button type="primary" disabled>Primary</sx-button>
  <sx-button type="success" disabled>Success</sx-button>
  <sx-button type="info" disabled>Info</sx-button>
  <sx-button type="warning" disabled>Warning</sx-button>
  <sx-button type="danger" disabled>Danger</sx-button>
</sx-row>

<sx-row>
  <sx-button plain disabled>Plain</sx-button>
  <sx-button type="primary" plain disabled>Primary</sx-button>
  <sx-button type="success" plain disabled>Success</sx-button>
  <sx-button type="info" plain disabled>Info</sx-button>
  <sx-button type="warning" plain disabled>Warning</sx-button>
  <sx-button type="danger" plain disabled>Danger</sx-button>
</sx-row>

Text Button

Buttons without border and background.

<sx-button type="text">Text Button</sx-button>
<sx-button type="text" disabled>Text Button</sx-button>

Icon Button

Use icons to add more meaning to Button. You can use icon alone to save some space, or use it with text.

<sx-button type="primary" icon="edit"></sx-button>
<sx-button type="primary" icon="share"></sx-button>
<sx-button type="primary" icon="delete"></sx-button>
<sx-button type="primary" icon="search">Search</sx-button>
<sx-button type="primary">Upload
  <sx-icon color="white" name="upload"></sx-icon>
</sx-button>

Button Group

Displayed as a button group, can be used to group a series of similar operations.

<sx-button-group>
  <sx-button type="primary" icon="arrow-left">Previous Page</sx-button>
  <sx-button type="primary">
    Next Page
    <sx-icon color="white" name="arrow-right"></sx-icon>
  </sx-button>
</sx-button-group>
<sx-button-group>
  <sx-button type="primary" icon="edit"></sx-button>
  <sx-button type="primary" icon="share"></sx-button>
  <sx-button type="primary" icon="delete"></sx-button>
</sx-button-group>

Loading Button

Click the button to load data, then the button displays a loading state.

<sx-button type="primary" loading>Loading</sx-button>

Sizes

Besides default size, Button component provides three additional sizes for you to choose among different scenarios.

 <sx-row>
  <sx-button>Default</sx-button>
  <sx-button size="medium">Medium</sx-button>
  <sx-button size="small">Small</sx-button>
  <sx-button size="mini">Mini</sx-button>
</sx-row>
<sx-row>
  <sx-button round>Default</sx-button>
  <sx-button size="medium" round>Medium</sx-button>
  <sx-button size="small" round>Small</sx-button>
  <sx-button size="mini" round>Mini</sx-button>
</sx-row>