Beyond

這裡放全站共用元件

Ruby / Rails

使用方式

gem "beyond-rails"
在 application.js
//= require beyond
在 application.scss
@import "beyond-sprockets";
@import "beyond";

Webpack

安裝

yarn add @superlanding/beyond --exact

使用

在 sass 檔案引入樣式
// 定義 css 圖片路徑與 font icons 路徑
$beyond-icon-font-path: '~@superlanding/beyond/src/font/';
$beyond-css-img-path: '~@superlanding/beyond/src/sass/img/';

@import '~@superlanding/beyond/src/sass/index.scss';

JS 元件存取

自動載入

  • 必須在 document ready 之後執行
  • 自動載入目前只支援以下元件:
    • Alert
    • Checkbox
    • Dropdown
    • Menu
    • Navbar
    • Radio
    • Sidebar
    • Tabbox
    • Tooltip
JavaScript Modules
import { bind, unbindAll } from '@superlanding/beyond'

// bind 執行後會返回一個 unbind 方法
// unbind 只會 destroy 透過 bind 綁定的元件
const unbind = bind()

// 或是可以使用 unbindAll 解除所有載入 Beyond 後所生成的元件
unbindAll()
Browser
const unbind = window.beyond.bind()

window.beyond.unbindAll()

手動載入

JavaScript Modules
import { Datepicker, Dropdown, Modal, Tabbox, Toast, Tooltip } from '@superlanding/beyond'
Browser
const { Datepicker, Dropdown, Modal, Tabbox, Toast, Tooltip } = window.beyond