@wuisdk/comps

Base CSS

• Element
  • icon
  • spinner
  • badge
  • button
  • input
• Card
  • card
  • alert-card
  • stat-card

Component

• WuiTabs : @wuisdk/comps/tabs
• WuiTable : @wuisdk/comps/table
• WuiModal : @wuisdk/comps/modal
• WuiDrawer : @wuisdk/comps/drawer
• WuiPopover : @wuisdk/comps/popover
• WuiActionMenu : @wuisdk/comps/dropdown

Icon

<i class="icon">&#xf03e;</i>

| # | Class | | ------- | :---- | | Weight | icon, icon-thin, icon-bold | | Align | icon--left, icon--right | | Size | icon--sm, icon--md, icon--lg, icon--xl, icon--2xl, icon--3xl | | Color | icon--primary, icon--success, icon--warning, icon--error, icon--info, icon--purple, icon--brown, icon--gray |

Spinner

<span class="spinner"></span>

| # | Class | | ------- | :---- | | Speed | spinner--base, spinner--fast, spinner--slow | | Size | spinner--sm, spinner--md, spinner--lg, spinner--xl |

Badge

<span class="badge">Badge</span>

| # | Class | | ------- | :---- | | Style | badge--outline, badge--dot | | Color | badge--primary, badge--success, badge--warning, badge--error, badge--info, badge--purple, badge--brown |

Button

<button class="btn" data-action="save">
    <span class="btn__icon">&#xf0c7;</span>
    <span class="btn__label">Save</span>
</button>

| # | Class | | ------- | :---- | | Element | btn__label, btn__icon, btn__icon-thin, btn__icon-bold | | Size | btn--sm, btn--md, btn--lg | | Shape | btn--square, btn--circle | | Color | btn--primary, btn--success, btn--warning, btn--error, btn--info | | Style | btn--secondary, btn--outline, btn--ghost | | Other | btn--block, btn--shadow | | Group | btn-group, btn-group--vertical |

Input

<div class="input">
    <label class="input__label">Email</label>
    <input class="input__field" type="email">
    <span class="input__icon-right">&#xf0e0;</span>
</div>

| # | Class | | ------- | :---- | | Element | input, input__field, input__label, input__icon-left, input__icon-right | | Size | input--sm, input--md, input--lg |

Card

<div class="card">
    <h3 class="card__title">title</h3>
    <p class="card__content">content</p>
    <div class="card__actions">actions</div>
</div>

| # | Class | | ------- | :---- | | Element | card, card__image, card__title, card__content, card__actions |

Alert Card

<div class="alert-card">
    <h2 class="alert-card__title">title</h2>
    <p class="alert-card__message">message</p>
</div>

| # | Class | | ------- | :---- | | Element | alert-card, alert-card__title, alert-card__message | | Color | alert-card--success, alert-card--warning, alert-card--error, alert-card--info |

Stat Card

<div class="stat-card">
    <div class="stat-card__value">000</div>
    <div class="stat-card__label">ยอดผู้ป่วย</div>
</div>

| # | Class | | ------- | :---- | | Element | stat-card, stat-card__value, stat-card__label | | Color | stat-card--primary, stat-card--success, stat-card--warning, stat-card--error, stat-card--info, stat-card--purple, stat-card--brown, stat-card--gray |

WuiTabs

<!-- tabs style: line | pill | card -->
<section class="wui-tabs" data-style="line">
    <div class="tabs__menu">
        <button data-id="tab1" class="tabs__item">
            <span class="tabs__icon"></span>
            <span class="tabs__label"></span>
        </button>
        <button data-id="tab2" class="tabs__item">
            <span class="tabs__icon"></span>
            <span class="tabs__label"></span>
        </button>
    </div>
    <div class="tabs__content">
        <article class="tabs__panel"></article>
    </div>
</section>

WuiTable

<section class="wui-table">
    <header class="wui-table__toolbar"></header>
    <div class="table-wrapper">
        <table class="table">
            <thead class="table__head"></thead>
            <tbody class="table__body"></tbody>
        </table>
    </div>
    <footer class="wui-table__footer"></footer>
</section>

| WuiTable | | ------------------- | | wui-table__title | | wui-table__toolbar | | wui-table__footer | | table-wrapper |

| Table | Class | | ------- | :-------------------------- | | Section | table__head, table__body | | Row | table__row | | Cell | table__cell, table__cell-th |

| modifier | | -------- | | table--fill-height | | table--striped | | table__row--selected | | table__cell--start | | table__cell--end | | table__cell--left | | table__cell--right | | table__cell--center | | table__cell--fit | | table__cell--numeric | | table__cell--action |

WuiModal

WuiDrawer

WuiPopover

WuiActionMenu