UI定制組件屬性說明書

  1. 組件類型
# 父類容器
Parent = 'Parent'.freeze
# 文本輸入框
LabelTextField = 'LabelTextField'.freeze
# 密碼輸入框
LabelPasswordTextField = 'LabelPasswordTextField'.freeze
# 提交保存按鈕
SubmitButton = 'SubmitButton'.freeze
# 返回取消按鈕
BackButton = 'BackButton'.freeze
# 多選項(xiàng)
CheckBox = 'CheckBox'.freeze
# 下拉款
SelectComponent = 'SelectComponent'.freeze
# 地址選擇下拉款(特殊)
AddressSelect = 'AddressSelect'.freeze
# 表格
Table = 'Table'.freeze
# 標(biāo)簽組
TagGroup = 'TagGroup'.freeze
# 標(biāo)簽
Tag = 'Tag'.freeze
# 輸入框容器
NormalComponentGroup = 'NormalComponentGroup'.freeze
# 進(jìn)度條
ProgressBar = 'ProgressBar'.freeze
# 步進(jìn)器
Stepper = 'Stepper'.freeze
  1. 組件詳情說明
  2. 父類容器:組件在模型里面使用自關(guān)聯(lián)的方法實(shí)現(xiàn)榆综, 一個(gè)容器也是組件鸟悴。
  3. 文本輸入框: 最基本的文本輸入框, 樣式如圖所以:
    文本輸入款--上下排版
    文本輸入款--上下排版

    ![文本輸入框--左右排版](http://ognvcf5x6.bkt.clouddn.com/bbs_image/ 文本輸入框--左右排版.png)
JSON:
{
  "id": "7093865172",
  "enable": "true",     # 是否啟用
  "name": "公司名稱",     # 組件名稱
  "code": "enterprise.name",  # 組件code對(duì)于同一個(gè)容器code需要驗(yàn)證唯一
  "ui_component_type": "LabelTextField",  # 組件類型
  "default_value": "",  # 組件默認(rèn)值
  "editable": true,     # 組件是否可編輯
  "placeholder": "請(qǐng)輸入公司名稱",  # 組件提示語
  "extra": "",    # 附加內(nèi)容
  "style": { layout: "up_and_down" },  # 組件樣式
  "description": "公司名稱必填的哦",      # 組件描述語
  "visibility": true,                  # 是否可見
  "parent_id": "5876220971",           # 父容器id
  "created_at": "2016-12-08 17:33:14",
  "seq": "",                           # 組件排序
  "value": "",                         # 組件值
  "validation_rules": [     # 驗(yàn)證規(guī)則
    {
    id: 1,
    validation_type: "min_length",  # 驗(yàn)證規(guī)則類型
    seq: 1,                         # 驗(yàn)證規(guī)則排序奖年, 默認(rèn)按著從大到小的正序排列细诸, seq越大,驗(yàn)證規(guī)則級(jí)別越高陋守。
    validation_value: "2",          # 驗(yàn)證值
    message: "最小長(zhǎng)度2",            # 驗(yàn)證提示語
    extra: nil,                     # 驗(yàn)證規(guī)則附件信息
    resource_type: "UiComponent",   # 多態(tài)關(guān)聯(lián)類型
    resource_id: 2,                 # 多態(tài)關(guān)聯(lián)ID
    created_at: Mon, 05 Dec 2016 11:34:26 CST +08:00,
    updated_at: Mon, 05 Dec 2016 11:34:29 CST +08:00,
    },
    {
    id: 2,
    validation_type: "max_length",
    seq: 2,
    validation_value: "25",
    message: "最大長(zhǎng)度25",
    extra: nil,
    resource_type: "UiComponent",
    resource_id: 2,
    created_at: Mon, 05 Dec 2016 11:34:56 CST +08:00,
    updated_at: Mon, 05 Dec 2016 11:34:57 CST +08:00,
    }
  ],
  "ui_themes": [],  # 組件主題
  "ui_layout_templates": []  # 組件模板
}
  1. 密碼輸入框:在文本輸入框的前提上震贵,隱藏輸入文本(一般情況下以*號(hào)填充)樣式圖:


    密碼文本輸入款--上下排版
    密碼文本輸入款--上下排版
  2. 提交保存按鈕:用戶通過點(diǎn)擊按鈕, 實(shí)現(xiàn)響應(yīng)事件水评。


    保存按鈕
    保存按鈕

    登錄按鈕
    登錄按鈕
  3. 返回取消按鈕: 取消猩系、返回、上一步等按鈕


    上一步
    上一步

    返回
    返回
  4. 多選項(xiàng): 在頁面進(jìn)行選擇的時(shí)候可以多選中燥, 用戶進(jìn)行頁面渲染寇甸, 通過JSON解析,可以獲取默認(rèn)值疗涉。

多選項(xiàng)
多選項(xiàng)
  1. 下拉款: 目前只支持最基本的下拉款拿霉,(下拉框不支持搜索, 不支持多項(xiàng))


    下拉框
    下拉框
  2. 地址選擇下拉款(特殊): 對(duì)于特殊的地址下拉框這設(shè)置一個(gè)特殊的組件咱扣。 由后臺(tái)和前臺(tái)溝通確定绽淘,該組件的使用方法。


    地址選擇框
    地址選擇框
  3. 表格: 目前支持基本表格(行合并闹伪, 列合并的表格目前還沒考慮)


    表格
    表格
  4. 標(biāo)簽頁


    標(biāo)簽頁
    標(biāo)簽頁
  5. 標(biāo)簽


    標(biāo)簽
    標(biāo)簽
  6. 輸入框容器


    輸入框容器
    輸入框容器
  7. 進(jìn)度條


    進(jìn)度條
    進(jìn)度條
  8. 步進(jìn)器


    進(jìn)步器
    進(jìn)步器
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末沪铭,一起剝皮案震驚了整個(gè)濱河市壮池,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌杀怠,老刑警劉巖椰憋,帶你破解...
    沈念sama閱讀 222,627評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異赔退,居然都是意外死亡橙依,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,180評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門离钝,熙熙樓的掌柜王于貴愁眉苦臉地迎上來票编,“玉大人褪储,你說我怎么就攤上這事卵渴。” “怎么了鲤竹?”我有些...
    開封第一講書人閱讀 169,346評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵浪读,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我辛藻,道長(zhǎng)碘橘,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,097評(píng)論 1 300
  • 正文 為了忘掉前任吱肌,我火速辦了婚禮痘拆,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘氮墨。我一直安慰自己纺蛆,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,100評(píng)論 6 398
  • 文/花漫 我一把揭開白布规揪。 她就那樣靜靜地躺著桥氏,像睡著了一般。 火紅的嫁衣襯著肌膚如雪猛铅。 梳的紋絲不亂的頭發(fā)上字支,一...
    開封第一講書人閱讀 52,696評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音奸忽,去河邊找鬼堕伪。 笑死,一個(gè)胖子當(dāng)著我的面吹牛栗菜,可吹牛的內(nèi)容都是我干的刃跛。 我是一名探鬼主播,決...
    沈念sama閱讀 41,165評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼苛萎,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼桨昙!你這毒婦竟也來了检号?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,108評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤蛙酪,失蹤者是張志新(化名)和其女友劉穎齐苛,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體桂塞,經(jīng)...
    沈念sama閱讀 46,646評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡凹蜂,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,709評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了阁危。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片玛痊。...
    茶點(diǎn)故事閱讀 40,861評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖狂打,靈堂內(nèi)的尸體忽然破棺而出擂煞,到底是詐尸還是另有隱情,我是刑警寧澤趴乡,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布对省,位于F島的核電站,受9級(jí)特大地震影響晾捏,放射性物質(zhì)發(fā)生泄漏蒿涎。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,196評(píng)論 3 336
  • 文/蒙蒙 一惦辛、第九天 我趴在偏房一處隱蔽的房頂上張望劳秋。 院中可真熱鬧,春花似錦胖齐、人聲如沸玻淑。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,698評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽岁忘。三九已至,卻和暖如春区匠,著一層夾襖步出監(jiān)牢的瞬間干像,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,804評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工驰弄, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留麻汰,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,287評(píng)論 3 379
  • 正文 我出身青樓戚篙,卻偏偏與公主長(zhǎng)得像五鲫,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子岔擂,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,860評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容