A10 GUI Widgets

Introduction

Widgets are common components that are reused across all A10 applications. This widget library is an extension of our a10-gui-framework that facilitates the A10 GUI development process. With the sharable widgets under the same framework, different apps can utilize the same structure and codebase. This promotes the maximization of consistency, modularity, and maintainability of A10 applications.

Repository path:

https://github.com/a10networks/a10-gui-widgets

Install

1.Add a10-gui-widgets to the dependency of package.json

 "dependencies": {
    "a10-gui-widgets": "git https://github.com/a10networks/a10-gui-widgets
},

2.Install a10-gui-widgets using npm install

3.To use the a10-gui-widgets in your app:

Take the simple A10Button as an example.

import { A10Component } from 'a10-gui-framework'
import { A10Button } from 'a10-gui-widgets'

class Demo extends A10Component {
  render() {
    return <A10Button>test</A10Button>
  }
}
export default Demo

4.Importing widget css style

There are two ways to import the css of a10-gui-widget in your code.

By Less

import '~a10-gui-widgets/dist/index.less'

NOTE ~ means importing the less file from node_modules

By css

import '~a10-gui-widgets/dist/widgets.bundle.css'

NOTE: ~ means importing the less file from node_modules

How to use

import { A10WidgetLocaleProvider } from 'a10-gui-widgets'
...

return (
  <A10WidgetLocaleProvider locale={A10WidgetLocaleProvider.locales.ja}>
    <App />
  </A10WidgetLocaleProvider>
)

​

Widget contribution

1. Create a widget

First, create a widget package in src, for example:

src/
  +-- NewWidget/
    +-- styles/
      +-- index.less  // the less style file
    +-- NewWidget.tsx // your source code
    +-- index.tsx     // the output definition file
    +-- README.md     // the README of this widget for using in Storybook

IMPORTANT When partially importing some widgets from our a10-gui-widgets library, please DO NOT import the styles/index.less of the widget in index.tsx. We have a script (npm build) to collect all less files of all widgets into the root index.less ('~a10-gui-widgets/dist/index.less').

NOTE: Please write your code in alphabetical order.

2. Export widget component and props in src/index.tsx

These widgets are maintained by A10 devs. PRs are welcomed.

• Create a component

• Wrap the component up with the HOC createWidget from a10-gui-framework

For example, a simple widget:

import * as React from 'react'
import { A10Component, createWidget } from 'a10-gui-framework'

class IconButton extends A10Component {
  render() {
    return <div>test</div>
  }
}
export default createWidget(IconButton)

3. Compile Typescript into JavaScript (ES5)

export * from './NewWidget'

NOTE: Please write the code in alphabetical order.

4. Write storybook for the widget

Add NewWidget folder in stories, and create index.story.js file in NewWidget folder

NOTE: The code of storybook is created by JavaScript (ES6) instead of TypeScript.

stories/
  +-- NewWidget/
    +-- index.story.js

import * as React from 'react'
import { withReadme } from 'storybook-readme'
import { Code, CodeComponent, CodeCard } from '../utils'
import { A10NewWidget } from '../../src'
const A10NewWidgetReadme = require('../../src/NewWidget/README.md')

const Example = () => {
  return (
    <CodeComponent>
      <CodeCard
        title="A10NewWidget example title"
        desc="A10NewWidget example description"
        code={<Code string={'code string'} />}
      >
        <A10NewWidget />
      </CodeCard>
    </CodeComponent>
  )
}
export default story => {
  story.add('A10NewWidget', withReadme(A10NewWidgetReadme, Example))
}

Import the new story book in stories/index.stories.js

import createNewWidgetStory from './NewWidget/index.story'

createNewWidgetStory(widgetStory)

Run the storybook npm run storybook and you will see it at http://localhost:6006. __

NOTE: Please write the code in alphabetical order.

5. Git Push and create a PR.

That's it! Please bear in mind to call npm build before submitting your code, and then create a PR for code review at a10-gui-widgets.

Widgets

General

A10Button A10Icon

Layout

A10Grid A10Layout

Navigation

A10Affix A10Breadcrumb A10Dropdown A10DropdownMenu A10Menu A10MenuPopover A10Pagination A10Steps A10Explorer

Data Entry

A10AutoComplete A10Checkbox A10Cascader A10CompoundConfigList A10CompoundTable A10ConfigList A10DatePicker A10Form A10InputNumber A10Input A10ListInput A10Mention A10Rate A10Radio A10Switch A10Silder A10Select A10TreeSelect A10Transfer A10TimePicker A10Upload

Data Display

A10Avatar A10Badge A10Carousel A10Card A10Calendar A10Chart A10Comment A10ContextMenu A10Collapse A10Datatable A10Diff A10DnDTable A10DnDBasic A10List A10LogFilterBar A10LogSearchBar A10MultiItem A10MultiSearch A10Popover A10SearchableSelector A10SearchBar A10Table A10Tabs A10Tag A10Timeline A10Tooltip A10Tree

Feedback

A10Alert A10Drawer A10Modal A10Message A10Notification A10Progress A10Popconfirm A10SlidingPage A10Spin A10Skeleton

Other

A10Anchor A10BackTop A10ConfigProvider A10Divider A10LocaleProvider

​FAQ​