Neglected Pizza Money

    qia-widgets

    4.3.1 • Public • Published

    Introduction

    Web widgets powered by web components and React, published as UMD modules


    Documentation is available at https://github.johannhuang.com/Qia-Web-Widgets/.

    On 20211016, version 4 is published.

    APIs

    JavaScript Constructors

    • class QiaMarkDownText (containerElement: HTMLElement, optionsObject? : { readOnly?: boolean; canFullScreen?: boolean } = {})
    • class QiaPaginator (containerElement, optionsObject = { current, total })
    • class QiaSkeleton (containerElement)

    HTML Custom Elements

    • <qia-paginator current="" total=""></qia-paginator>
      • class QiaPaginator.HTMLElement extends HTMLElement
    • <qia-skeleton></qia-skeleton>
      • class QiaSkeleton.HTMLElement extends HTMLElement

    React Components

    • class QiaPaginator.ReactComponent extends React.Component (props = { current, total, onPageChange?, onPageChanged? })
    • class QiaSkeleton.ReactComponent extends React.Component ()

    Installation

    1. Download files from GitHub or find links on CDN such as UNPKG.com, and then import as HTML scirpts
    2. npm install qia-widgets from https://www.npmjs.com/package/qia-widgets

    Quickstart - Step by Step

    1. include React and ReactDOM
    <script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
    1. include Qia.Widgets

    for all available widgets as HTML scripts

    <script src="$base_url/qia.widgets.js" crossorigin></script>
    <!-- .widgets is the namespace just like .audio is the namespace for audio-player; web components are named without widgets in-between, such as qia-paginator -->

    for just the widgets needed as HTML scripts

    <script src="node_modules/qia-widgets/qia-skeleton.js"></script>

    for all available widgets in JavaScript with a bare module resolver

    import QiaWidgets from 'qia-widgets'
    const QiaSkeleton = QiaWidgets.Skeleton

    for just the widgets needed in JavaScript with a bare module resolver

    import QiaSkeleton from 'qia-widgets/qia-skeleton'
    1. use QiaWidgets
    <qia-skeleton></qia-skeleton>

    or using JavaScript to construct and mount

    const qiaSkeletonContainer = document.createElement('div')
    const qiaSkeleton = new QiaSkeleton({}, qiaSkeletonContainer)
    
    document.body.appendChild(qiaSkeletonContainer)

    or JSX or React.createElement() in React

    const QiaSkeletonReactComponent = QiaSkeleton.ReactComponent
    
    React.createElement(QiaSkeletonReactComponent)
    
    <QiaSkeletonReactComponent />

    Quickstart - Examples

    Dependencies

    • QiaSkeleton, QiaPaginator
      • React and ReactDOM (They are not bundled in the module.)
    • QiaMarkDownText

    Install

    npm i qia-widgets

    DownloadsWeekly Downloads

    0

    Version

    4.3.1

    License

    UNLICENSED

    Unpacked Size

    7.48 MB

    Total Files

    82

    Last publish

    Collaborators

    • johannhuang